Today we bring very handy collection of CSS3 tutorials for developers and designers. CSS has long been a commanding part of the web designing process. So every designer should have to complete knowledge of this then they can become a perfect web designer. In this collection we have fundamental and pure CSS3 tutorials with jquery which can be handy to learn CSS professionally.
New Selectors Introduced in CSS3
There are no ways of targeting alternate elements using CSS2 but CSS3 has added comprehensive support allowing you to style odd or even rows or even every 3rd, 4th, 5th or user defined number of rows. There are ways of doing so using javascript or even server side code such as PHP but this CSS3 makes it so much easier and more flexible.
Sweet tabbed navigation bar using CSS3
I wanted to take a couple of these new things, and create a Sweet tabbed navigation using CSS3.
CSS3 & Flexible UI: Avoid Recutting UI Graphics for Mobile
The first challenge was creating "on/off toggles for the preferences pane within Fennec. Doing some quick research into what could be done with CSS3 in Firefox 3.5, the ultimate arsenal was discovered: the -moz-border-radius, -moz-border-color, @font-face, and opacity styles.
Create a Beautiful Looking Custom Dialog Box With jQuery and CSS3
One thing about this dialog box, it uses CSS3 drop shawdow and a completely CSS3 skined button. So, latest version of chrome, firefox and safari will have no problems with it, but for IE6 and 7, the script will work but the display of the dialog box will look plain, no rounded border, drop shadow and gradient (i think ie8 will work).
Coverflow, anyone?
So I was looking at all the nice things the WebKit folks did, and one particular feature really got his way into my thoughts, and I was playing with possible usecases for weeks… I’m talking about the CSS transforms.
How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS3
More and more we see people using horizontal sliding panels on their websites. And they usually look very nice! Some will put a contact or login form in there, others will put some information about them and their website.
Creating a polaroid photo viewer with CSS3 and jQuery
By combining the CSS3 Box Shadow and Rotate properties, this effect is relatively easy to create. When dragging a polaroid around, you’ll see the shadow. When it’s placed down, it’s rotated to the left or the right (random).
Letterpress Text Effect Using Photoshop and CSS
Letterpress effect looks good in modern websites, letterpress effect can be gain using Photoshop and also using text-shadow property of CSS.
Editable CSS3 Image Gallery
We build a pretty typical image gallery design pattern, a grid of images that pop up larger when clicked. But this image gallery page makes use of hot semantic HTML5 markup, loads of visual treats with CSS3 and jQuery, and made editable through the CMS PageLime.
Sweet AJAX Tabs With jQuery 1.4 & CSS3
This allows you to squeeze much more content in a seemingly limited space and provide a structured way of accessing it.
Pure CSS speech bubbles
All examples use simple, semantic HTML. No empty elements, no unnecessary extra elements, no JavaScript, no images (apart from that Twitter logo). Have a look at the source code.
Using Rounded Corners with CSS3
As CSS3 gets closer to becoming the new standard for mainstream design, the days of rounded corners through elaborate background images is fading. This means less headache and time spent working out alternatives for each browser.
Creating Dynamic Buttons With CSS3
Creating buttons with CSS becomes a lot more comfortable. The following example demonstrates how to create nice looking, dynamic buttons that are fully scaleable using the new CSS3 properties border-radius, box-shadow and RGBa.
A Glossy Button Using CSS
One thing you’ll notice is the big ‘Notify me’ button. One of the great things about this button is that it isn’t a graphic. It’s simply styled using CSS.
CSS3 – Buttons – no graphics and no extra markup
This demonstration works in Firefox, Safari and Google Chrome and shows how to style buttons using just border radius, drop shadows and gradient fills. No graphics have been used in this demo and no extra markup. If you wanted to be adventurous you could also add a hover state change of gradient fill to give an illumination effect.
Buttons with CSS3 and RGBA
One of our favorite things about CSS3 is the addition of RGBA, a color mode that adds alpha-blending to your favorite CSS properties. We’ve kicked the tires on it a bit with our own projects and have found that it helps streamline our CSS and makes scaling things like buttons very easy. To show you how, we’ve cooked up an example with some super awesome, scalable buttons.
Pretty CSS3 Buttons
We want to create a set of styles that are both cross browser compliant and degrade gracefully for non CSS3 compliant browsers. A button that is scaleable meaning that we can make it a variety of sizes and colours with ease.
3d animation using pure CSS3
CSS3 Gradient Generator
Going Nuts with CSS Transitions
I’m going to show you how CSS 3 transforms and WebKit transitions can add zing to the way you present images on your site.
Awesome Overlays with CSS3
These overlays use a number of new CSS properties, some of which are simple like border-radius and using RGBa colors. The trick with these overlays is the gradient border, going form a lighter to darker orange as you go from top to bottom. To create that effect we used to the border-image property, which is a tricky little addition to CSS.
Create a fancy web form with field hints using only CSS3
CSS3 tricks have been pretty popular in the last while on various design blogs and with good reason. Like many of you, I’ve caught the CSS3 bug and this afternoon I took a stab at this nifty little method of adding hints to your form fields (as well as some fancy style enhancements) using CSS3. The cool part is you don’t require Javascript for the form field hints. Here’s a demo and run down of the code used.
