With CSS3 starting to work its way into the design arsenal, and browser support becoming much more widespread, many people are interested in using CSS3 in their new websites to add a bit of flare as well as to demonstrate proficiency in new web technologies.
We’ve gathered up 10 awesome CSS3 techniques, elements and demos that you’ll want to start using, and can start using today. Subscribe boxes, search forms and navigation menus are among the best targets to spice up with CSS3.
If you have any other tips, techniques or demos to share, let us know in the comments.
Create a Pixel Perfect Subscription Box in CSS3
Today I will show how to create the above subscription box using simple HTML markup and a few advanced CSS3 properties. I believe CSS3 is the future and the sooner you can jump on the CSS3 band wagon the better. All the stylish shadows and gradients used are rendered using CSS properties which can be experimented with to produce some fantastic results.
Pure CSS Speech Bubbles
CSS3 Border Radius for Hover States
One of the huge benefits to using CSS3 is the ability to create image-like effects without the use of images. CSS3 gradients, shadows, and rounded corners have helped designers greatly in this area.
While browsing the website of well-known web hosting company Media Temple, I stumbled upon their Labs page and noticed they’re using a block hover effect on the list of items, and the hover state uses (what I assume is) the border-radius property when the background becomes visible.
Pimp Your Tables with CSS3
Today I am going to show you how to use some neat CSS3 properties to beautify your tables. With so many new selectors we can address specific table cells and rows in order to create a unique style without adding classes to the markup.
Create a Color-Changing Website Using CSS3
In this brief tutorial we’ll take go crazy with CSS3 transitions in Webkit to create a simple web page that showcases some really nice color fade effects.
Create a CSS3 Drop Down Menu
While I was coding the Notepad theme, I’ve learned some new CSS3 features and now I would like to share it with you. View the demo to see a Mac-like multi-level dropdown menu that I’ve created using border-radius, box-shadow, and text-shadow. It renders perfect on Firefox, Safari and Chrome. The dropdown also works on non-CSS3 compitable browsers such as IE7+, but the rounded corners and shadow will not be rendered.
Sexy Image Hover Effects using CSS3
In this post I am going to show how to create a sexy CSS effect on image hover.
I was recently experimenting with the new CSS3 rotation property and it occurred to me that I could use this to create image-free starbursts. All I needed was a series of nested block-level elements each rotated by a slightly different amount. The rotation would distribute the box corners around the circumference of the star.
Animated Navigation Menu with CSS3
Today we will learn here to create animated navigation menu with css3.
Beautiful CSS3 Search Form
How to create a beautiful search form in CSS3.