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

21 Fresh CSS3 Tutorials and Techniques

05.24.2011
| 6915 views |
  • submit to reddit
CSS3 has become highly usable and popular. Most internet browsers like Internet Explorer 7 & 8, Safari, Firefox and Chrome, support new CSS3 properties. CSS3 comes with so many new features for the web and for mobile. Today I collected a useful list of 21 Fresh CSS3 tutorials and techniques for you.

 

1.iPhone “slide to unlock” Text in WebKit/CSS3

Those will allow the background of the parent element to become the background of the text inside. I got to thinkin', if we made a made a horizontal gradient that faded in a gray-white-gray pattern, then animated it from left to right, we could make the iPhone/iPad's "slide to unlock" screen with no images at all!

css3-12

 

View Live Demo

2.How to use Multiple backgrounds and Animation with CSS3

In CSS3 appear new possibility to use multiple backgrounds for the objects, in our new article I will demonstrate how to do it. And, I going to add a bit of JS code for simple animation (to make it not so boring).

css3-2

 

View Live Demo

3.Advanced (yet awesome) pure CSS3 boxes without using images

On today’s tutorial we will show you how to make the fascinating set of frame boxes featured in ThemeShock using pure CSS3 and achieve in the process something that can easily look as any Photoshop work. css3-3

View Live Demo

4.Pure CSS Sliding Image Gallery

The idea is to get one image to slide in while the current image slides out. There’s a lot of z-index going on as well so the new image always appears to be at the top.

css3-24

 

View Live Demo

5.Making a CSS3 Animated Menu

In this short tutorial, we will be using the power of CSS3 effects and transitions, to build a JavaScript-free animated navigation menu which you can use to add a polished look to your website or template.

css3-6

 

View Live Demo

6.How to Build Cross-Browser HTML5 Forms

In this tutorial, we’re going to take a look at how to serve HTML5 forms to modern browsers, while compensating for older browsers by using a mix of Webforms2, Modernizr, jQuery UI and assorted jQuery Plugins.

css3-7

 

View Live Demo

7.Styling pretty buttons with only CSS3

What I am going to show here, is how you can use some of these new CSS3 properties to create lightweight, good looking buttons! The code we’ll be writing will be very easy to adjust. It will have completely flexible, so the buttons can be any size, ratio, color, font and you only need to edit the css file.

css3-8

 

View Live Demo

8.Animated wicked CSS3 3d bar chart

Create a beautiful 3d bar chart. We don't create a "stacked" one (since animation would be hard), but several bars placed under each other. When hovering, the animation shows and the bar will grow to the appropriate size.

css3-9

 

View Live Demo

9.Create A Clean and Stylish CSS3 Contact Form

In this tutorial we’re going to look at a range of different CSS3 effects – in particular, we’ll be creating background gradients, adding shadows to elements, applying some rounded corners, and adding a couple of simple animation effects.

css3-10

 

View Live Demo

10.Phone Style Checkboxes With CSS3

Here’s some form input checkboxes styled with CSS3 to look like iPhone style on/off buttons. Just messing about again with CSS3.

css3-11

 

View Live Demo


11.Animated Sprites with CSS3 Transitions

CSS3 animations (or more accurately, CSS3 transitions) is a new feature that has been added to some newer browsers, most notably WebKit-based browsers like Chrome and Safari. Like sprites, CSS3 animations don’t require JavaScript. css3-1

 

View Live Demo

12.CSS3 Flying Menu

This is a request post from my reader. He asks me how to create a simple menu that have a flying effect when user hovering them using only CSS. As we know CSS3 is more powerful with its transition property, it help us creating animation without any JavaScript or even Flash help. We’ll use them for creating the flying effect and here is the result.

css3-13

 

View Live Demo

13.Popout Details on Hover w/ CSS

I recently saw a hover over trick that caught my eye and I thought it was a pretty clever way of showing more details on an element. I decided to give it a try and the solution was quite simple.

css3-14

 

View Live Demo

14.HTML5 & CSS3 readiness css3-15

View Live Demo

15.CSS3 Button Maker

Drag things, pick colors, make a nice class for your buttons...

css3-16

 

View Live Demo

16.Fancy Image Hover Using CSS3

We will try to create fancy image hover with css3 as you all know we can have cool image hover effect using jquery but now using transform and transition properties of css3 we can have the same cooler effect with css3 only.

css3-17

 

View Live Demo

17.Creating A Rocking CSS3 Search Field

In this tutorial, we will explore some of these features like text-shadow, border-radius, box-shadows and transitions to create a rocking search field. The image below shows how the search filed looks like, or check out a working demo.

css3-23

 

View Live Demo

 

18.Fading Button Background Images With CSS3 Transitions

css3-19

 

View Live Demo

19.Super Cool CSS Flip Effect with Webkit Animation

There’s some seriously cool transform and animation effects available through the webkit engine that can really spice up the web experiences for users with the Safari browser. Here’s a quick look at how the rotateY property can produce a flip effect, and how it can be used to create a super cool Transformers themed top trumps design.

css3-20

 

View Live Demo

20.Build a HTML5/CSS3 Website Layout without Images

css3-21

 

View Live Demo

21.Pure CSS Reflections

Many might not be aware that, with CSS, we can achieve reflections quite easily in all webkit-based browsers, which represent roughly 20% of all browser usage. The key is in the vendor-specific, -webkit-box-reflect property. I’ll show you how to use it in today’s video quick tip!

css3-22

 

View Live Demo

 

Published at DZone with permission of Dong Nguyen, author and DZone MVB.

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

Tags: