HTML5 Zone is brought to you in partnership with:

I'm Dong. I love webdesign and coding. When I was student, I was working as a web designer and a web developer. I now work as an RF engineer in VietNam and run http://webdesign14.com. Dong is a DZone MVB and is not an employee of DZone and has posted 12 posts at DZone. You can read more from them at their website. View Full User Profile

50 Outstanding CSS3 Tutorials

08.30.2011
| 4260 views |
  • submit to reddit

Almost all modern browsers support CSS3. In this post,  we present 50 best css3 tutorials for visual effects, layouts and web form design to help you find solutions to the problems you are dealing with or will have to deal with in future.

1. Pretty CSS3 buttons

CSS3 Tutorials 2010

CSS3 Tutorials 2010

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.

2. 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.
1

3. How to Create Inset Typography with CSS3

In this tutorial, we’ll create inset type, a popular text treatment, using CSS. If you follow Six Revisions closely, you’re probably thinking: “Jacob already wrote a Photoshop tutorial on how to do that.”
1

4. Use CSS3 to Create a Dynamic Stack of Index Cards

We will create a dynamic stack of index cards solely with HTML and CSS3 and use such CSS3 features as transform and transition (for the dynamic effects) and @font-face, box-shadow and border-radius (for the styling).
CSS3 Tutorials 2010

5. Box-shadow

The box-shadow property allows designers to easily implement multiple drop shadows (outer or inner) on box elements, specifying values for color, size, blur and offset.
1

6. Recreating the OS X Dock

We take a basic list of links and turn them into an awesome OS X dock of icons.CSS3 Tutorials 2010

7. Awesome Overlays

These overlays use a number of new CSS properties, some of which are simple like
border-radius and using RGBa colors.
1

8. CSS3 Background-Clip & @Font-Face

With no clear purpose or plan, I’ve resolved to experiment with CSS3 on a regular basis. Some of these note-posts may be more useful and practical than others, but the only way to know for sure is to learn by doing. 1

9. CSS3 Background-Clip: Text

I had a lot of fun dabbling in CSS3 on a recent post, but had to hold back a bit to keep things looking presentable in most browsers. To carry out the DIN typeface I chose into the header, I used a transparent png with the letters knocked out to achieve that subtle yellow to blue fade animation.1

10. How To Design A Sexy Button Using CSS

1

11. Create a Beautiful Looking Custom Dialog Box With jQuery and CSS3

This custom dialog box is one of the scripts in that website and I think it will be quite useful for all of us. The reason I have this custom dialog box is to overcome the inconsistencies across different browsers. It uses CSS3 to style everything and it looks really nice!
1

12. BounceBox Notification Plugin With jQuery & CSS3

Earlier this week, while working on ZineScripts‘ coupon code system, I found the need to be able to dynamically create and present a message box to Zine’s visitors. The usual routine would include digging through jQuery’s plugin repository and ending up with using a lightbox alternative, but I decided to take the time and build an one-off notification solution, which I am sharing with you today.1

13. Create a Vibrant Digital Poster Design with CSS3

CSS has come a long way in recent years, and with new browser support for a hand full of CSS3 properties we can begin to replicate design styles directly in the browser that beforehand were recently only possible in our design applications. Follow this walkthrough of the making of Circlicious, a vibrant and abstract digital poster design made purely of HTML and CSS.1

14. CSS3 Box-Shadow with Inset Values – The Aqua Button ReReVisited!

This is my third article on CSS3 No Image Aqua Buttons.1

15. Roll Your Own Google Buttons

Google has a new focus on webkit-specific properties thanks to their new Chrome browser, which uses a branch of the same rendering engine Safari uses. This has actually allowed them to target the Google homepage to the webkit engine, probably after some sort of browser detection.1

16. How To Create Depth And Nice 3D Ribbons Only Using CSS3

In this last period on PV.M Garage we have described many trends of the modern Web Design and many techniques for creating stunning and impressive web sites.1

17. Fun with CSS3 and mootools

These examples came about when experimenting with the extend property in MooTools. By extending the styles class I could add CSS3 properties into the Core MooTools framework and do CSS3 animations.1

18. CSS3 Gradient Buttons

Today I’m going to show you how to put the CSS gradient feature in a good practical use. 1

19. CSS3 Gradient Generator

1

20. Cool Sprites – Free overlapped CSS menu using CSS Sprites

1

21. Get Started With CSS 3

1

22. Border-image: using images for your border

Another exciting new border feature of CSS3 is the property border-image. With this feature you can define an image to be used instead of the normal border of an element. This feature is actually split up into a couple of properties: border-image and border-corner-image.1

23. Halftone Navigation Menu With jQuery & CSS3

Today we are making a CSS3 & jQuery halftone-style navigation menu, which will allow you to display animated halftone-style shapes in accordance with the navigation links, and will provide a simple editor for creating additional shapes as well.
1

24. Coding a Rotating Image Slideshow w/ CSS3 and jQuery

Today we are going to use jQuery and CSS3 rotations, along with the jQuery rotate plugin, to create a beautiful slideshow. You can use it to spice up your web sites, product pages and other projects with some CSS3 magic.
1

25. CSS3 Dropdown Menu

1

26. Sweet AJAX Tabs With jQuery 1.4 & CSS3

Today we are making an AJAX-powered tab page with CSS3 and the newly released version 1.4 of jQuery, so be sure to download the zip archive from the button above and continue with step one.
1

27. Creating a Realistic Looking Button with CSS3

I had previously created the Cadmus “post” button in Photoshop and it was essentially three images for the different states. I wanted to use this style for all our buttons, but doing it with single images is not a good idea. So I set about creating the same style of the buttons with CSS3.
1

28. Making Better Select Elements with jQuery and CSS3

This is why, today we are building a script that is going to take an ordinary select element, and replace it with a better looking, markup powered version, while keeping all the functionality intact.
1

29. Making a Sleek Feed Widget With YQL, jQuery & CSS3

Today we are making a sleek feed widget, that will fetch any feed and display it in your blog sidebar. You can set it up to show the latest posts from the different categories of your blog, your latest stumbles, or even people mentioning you on twitter.
1

30. Making a Photoshoot Effect With jQuery & CSS

We are creating a photo shoot effect with our just-released PhotoShoot jQuery plug-in. With it you can convert a regular div on the page into a photo shooting stage simulating a camera-like feel. Using this plug-in, we give visitors the ability to take shots of the background image.
1

31. CSS3 Animated Bubble Buttons

This week we are creating a useful set of animated buttons with the power of CSS3′s multiple backgrounds and animations. With this button pack, you can easily turn any link on your page into an animated button by just assigning a class name. No JavaScript necessary. Four color themes and three sizes are also available by assigning additional class names.
1

32. CSS3 Minimalistic Navigation Menu

So today we are making something practical – a simple CSS3 animated navigation menu, which degrades gracefully in older browsers and is future-proofed to work with the next generation of browsers.
1

33. 3d animation using pure CSS3

The perspective property is what we need to create the 3d effect. Using transform and transition, we can create 3d animation using pure CSS3.
1

34. Beautiful Photo Stack Gallery with jQuery and CSS3

In this tutorial we are going to create a nice and fresh image gallery. The idea is to show the albums as a slider, and when an album is chosen, we show the images of that album as a beautiful photo stack. In the photo stack view, we can browse through the images by putting the top most image behind all the stack with a slick animation.
1

35. Contextual Slideout Tips With jQuery & CSS3

Knowing the importance of HTML standards, we are making a set of contextual slideout tips with jQuery & CSS3, which are ideal for product pages and online tours. As a bonus, they are SEO friendly, so all the content is visible to search engines.
1

36. HTML5 and CSS3 Without Guilt

Not every HTML5 or CSS3 feature has widespread browser support, naturally. To compensate for this, enterprising developers have created a number of tools to let you use these technologies today, without leaving behind users who still live in the stone age.
1

37. Display social icons in a beautiful way using CSS3

I wanted to take this concept and bring it to the next level using CSS3 transitions. The goal was to slowly fade-in and fade-out the opacity changing, and animate the position of the tooltip a little bit. With that in mind, I was able to create a beautiful social media icons display using CSS3.
1

38. 10 CSS3 Properties you Need to be Familiar with

The key is to first determine whether or not you’re okay with a slightly different presentation from browser to browser. Are you okay with, say, IE displaying 90 degree corners, rather than slick rounded ones? That’s up to you to decide. However, always remember that websites needn’t look identical in every browser. At the conclusion of this article, we’ll work on a fun final project.
1

39. Animated wicked CSS3 3d bar chart

Do you remember the Wicked CSS3 3d bar chart that I placed online a couple of weeks ago? Paul Irish left a comment, requesting for an example with transitions. My reply was that I was already working on that, and today I’m proud to release the animated wicked CSS3 3d bar chart.
1

40. Carbon Fiber Signup Form With PHP, jQuery and CSS3

Today we are making a carbon fiber – style form, build using progressive enhancement. This means that we first ensure that the form works well without JavaScript and fancy CSS support (think of IE6 here) and later move on by layering over cool styling, AJAX and jQuery magic.
1

41. Build Awesome Practical CSS3 Buttons

What once required background images and icons can now be created with plain-old CSS. Because modern browsers have access to things like box shadow, gradients, rounded corners, text-shadows, and font-face, we can finally take advantage of this and remove any need for images, when creating visual elements, such as buttons! I’ll show you how in today’s video tutorial.
1

42. Colorful Sliders With jQuery & CSS3

In this tutorial we are using jQuery and the new transformation features brought by CSS3 to create a three dimensional dynamic slider effect. The techniques presented here – for creating sliders, and CSS dynamic resizable bars, can be used together or in part for powering all sorts of jQuery goodness.
1

43. CSS3 animations and their jQuery equivalents

At the same time, I wanted to see if those animations with CSS3 could be created with jQuery too (especially for those browser that don’t support CSS3 animations yet). So today, I present you Five examples of CSS3 animations and their jQuery equivalents.
1

44. Coding a CSS3 & HTML5 One-Page Website Template

Today we are making a HTML5 web template, using some of the new features brought by CSS3 and jQuery, with the scrollTo plug-in. As HTML5 is still a work in progress, you can optionally download a XHTML version of the template here.
1

45. How to Build a Kick-Butt CSS3 Mega Drop-Down Menu

1

46. Introducing the CSS3 Multi-Column Module

1

47. Getting to Work with CSS3 Power Tools

CSS3 is one of the coolest new web technologies available to web developers right now. Using some of its many features, it is possible to reproduce the effects that you might have previously done in Photoshop, with CSS code that is more maintainable, faster to load, and hip with the latest trends. Read on to learn about the power tools available to you and how to combine them to produce the ultimate graphical effects.
1

48. Subtle CSS3 Typography that you’d Swear was Made in Photoshop

1

49. How to Create a Drop-down Nav Menu with HTML5, CSS3 and jQuery

In this tutorial, we’ll take a look and see what we can achieve with HTML5 and CSS3 when it comes to the staple of current web sites: the humble drop-down navigation menu. We’ll also use jQuery to handle the effects and add the finishing touches for us.
1

50. Design a Prettier Web Form with CSS 3

By following this tutorial you will not only end up with a lightweight and beautiful form, you’ll also learn and understand new CSS3 techniques, such as box-shadow, gradients, opaque colors, and rounded corners.


1
References
Published at DZone with permission of Dong Nguyen, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Tags: