CSS3 Powered jQuery Image Slider for 2D or 3D transitions – Flux Slider

Flux Slider is an image slider using CSS3 animations for creating good looking 2D or 3D transitions.

It requires jQuery or Zepto.js, inspired from the transitions of Nivo Slider jQuery plugin and mimics them without using traditional JavaScript-timer-based animations.

Currently, there are 10+ transitions including Bars-Bars3D, Blinds-Blinds3D, Cube, Zip and more.

Continue reading

Now very easy to write CSS3 style, Best collection of CSS3 code Generators

To write CSS manually is not tough, if you know the properties you can easily write CSS. But what if you are too lazy to write your own code then there are lots of CSS code generators available on net, as in CSS3 lots of new porperties introduced which are very helpful, we focused mainly on CSS3 code generators.

Cross Browser CSS3 Rule Generator

CSS3 Please is simple and effective cross-browser CSS3 rules generator.

Continue reading

Power of CSS3 and jQuery, How to CSS3 Effects via jQuery

How to use CSS3 today with safety to create visible effects in all browsers? Simple! Hiding it in jQuery! In this way your problem is just to know if the browser supports jQuery. Today we show yuo a useful list to learn to use CSS3 via jQuery but let’s start with some info and examples about the CSS3 code to understand how to use it after with jQuery.

Multiple Backgrounds with CSS3

#backgrounds-box {
background: url(top-backgroundg.png) top left no-repeat,
url(bottom-backgroundg.png) bottombottom left no-repeat,
url(middle -backgroundg.png) left repeat-y;
padding: 35px;
}

Text Shadow with CSS3

b { text-shadow:  5px 5px 5px #666666; }

Continue reading

Styling HTML 5 elements with Modernizr, Better HTML5 & CSS3 Usage By Detecting Browsers Capabilities

Similar to the IE6 situation, when using HTML5/CSS3 in our websites, it is a good idea to offer non-problematic outputs to web users with older/non-standard browsers.

Modernizr is a JavaScript library that uses feature detection techniques to determine whether or not the current browser is capable of CSS3 and HTML5 features like rgba(), border-radius, CSS Transitions & more.

Modernizr

It enables you to write pseudo-IF/ELSE statements in your CSS &, if wanted, it is possible to wirite conditional statements in JavaScript with the help of a “Modernizr JavaScript object” created.

Also, Modernizr adds support for styling HTML 5 elements. This allows you to use more semantic, forward-looking elements such as <section>, <header> and <dialog> without having to worry about them not working in Internet Explorer.

Continue reading