10 Awesome CSS3 Techniques You’ll Want To Start Using

Advertisement

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.

Thanks!

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.

Create a Pixel Perfect Subscription Box in CSS3

Pure CSS Speech Bubbles

Speech bubbles are a popular effect but many tutorials rely on presentational HTML or JavaScript. This tutorial contains various forms of speech bubble effect created with CSS2.1 and enhanced with CSS3. No images, no JavaScript and it can be applied to your existing semantic HTML.

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.
CSS3 Border Radius for Hover States

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.

Pimp Your Tables with CSS3

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 Color Changing Website using CSS3

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.

Create a CSS3 Drop Down Menu

Sexy Image Hover Effects using CSS3

In this post I am going to show how to create a sexy CSS effect on image hover.

Sexy Image Hover Effects using CSS3

CSS3 Starbursts

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.

CSS3 Starbursts

Animated Navigation Menu with CSS3

Today we will learn here to create animated navigation menu with css3.

Animated Navigation Menu with CSS3

Beautiful CSS3 Search Form

How to create a beautiful search form in CSS3.

Beautiful CSS3 Search Form

Advertisement
Use your ← → (arrow) keys to browse

Login

Signup

Forgot Password

Enter the e-mail you used to signup. A password reset link will be sent to you by email.