21 Fresh CSS3 Tutorials and Techniques
by
Join the DZone community and get the full member experience.
Join For Free
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!
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).
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. 
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
14.HTML5 & CSS3 readiness
Drag things, pick colors, make a nice class for your buttons...
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.
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.
18.Fading Button Background Images With CSS3 Transitions
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.
20.Build a HTML5/CSS3 Website Layout without Images
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!
Opinions expressed by DZone contributors are their own.
Comments