20 Fresh CSS3 Tutorials

By / May 10, 2012 / Tutorials
shares

The design industry is probably one of the fastest changing and growing. Designers have to keep their eyes on everything, including new trends in visual design, as well as interaction technologies like jQuery, HTML5, and CSS3. Designers are using these technologies to express more creativity in design production and make user experience richer.

In this post today, I would like to share with you some amazing and beautiful CSS3 tutorials for creating various web design elements and interactions. Use this collection to learn something new and be prepared for the near future of the web.

Quickly Build a Swish Teaser Page With CSS3

Quickly Build a Swish Teaser Page With CSS3

In this tutorial, you’ll learn how to build a teaser page using just CSS, no images or even a Photoshop design. Use it for any app or website that’s getting ready to launch.

How to Create a CSS3 Dropdown Menu [Tutorial]

How to Create a CSS3 Dropdown Menu [Tutorial]

In this short tutorial you will learn to code navigation menu in pure CSS3. Simple, clean and professional outcome.

Orman Clark’s Vertical Navigation Menu: The CSS3 Version

Orman Clark’s Vertical Navigation Menu: The CSS3 Version

By following this tutorial you will learn to recreate Orman Clark’s vertical navigation menu with CSS3 and jQuery while using the minimal amount of images possible.

Accordion with CSS3

Accordion with CSS3

In this tutorial you will see how to create an accordion that will animate the content areas on opening and closing using hidden inputs and labels.

Tutorial: CTA button without images using CSS3 and Entypo

Tutorial: CTA button without images using CSS3 and Entypo

In this tutorial you will learn to create button using 100% CSS and Entypo. Buttons without images are more flexible, require less data to be downloaded and are easily changed and updated.

Create the Illusion of Stacked Elements with CSS3 Pseudo-Elements

Create the Illusion of Stacked Elements with CSS3 Pseudo-Elements

In this tutorial Tom Kenny will guide you in creating the illusion of stacked elements with CSS3 pseudo-elements.

Pure CSS3 LavaLamp Menu

Pure CSS3 LavaLamp Menu

Another cool tutorial for creating originally jQuery based effect. Learn how to create LavaLamp effect using only CSS3 transitions.

CSS3 signup form

CSS3 signup form

In this article you will find out how to design a clean and attractive CSS3 signup form.

Timeline Portfolio

Timeline Portfolio

In this tutoriail you will see how to create beautiful and impressive portfolio using Timeline jQuery plugin and CSS3.

Apple-like Login Form with CSS 3D Transforms

Apple-like Login Form with CSS 3D Transforms

In this tutorial you will see how you can use CSS3 transforms to create an interesting flipping effect on an Apple-inspired form.

How to Create an Image Slider using jQuery and CSS3 [Tutorial]

How to Create an Image Slider using jQuery and CSS3 [Tutorial]

In this tutorial you will learn to create a slider with “Nivo Slider jQuery Script” and CSS3.

Making an Impressive Product Showcase with CSS3

Making an Impressive Product Showcase with CSS3

Amazing tutorial showing you how to spice up a plain old product page with some CSS3 magic and jQuery.

How to Create a Stylish Image Content Slider in Pure CSS3 [Tutorial]

How to Create a Stylish Image Content Slider in Pure CSS3 [Tutorial]

In this tutorial you will see how to create a clean and beautiful CSS3 only image slider.

CSS3 Pricing Table

CSS3 Pricing Table

This tutorial consists of a whole bunch of new CSS3 features including: transforms, gradient, shadow and nth-child.

CSS3 breadcrumbs

CSS3 breadcrumbs

Catalin Rosu will show you how to create your own cool CSS3 breadcrumbs in order to increase website’s usability.

Animated Content Tabs with CSS3

Animated Content Tabs with CSS3

In this tutorial you are going to implement some simple CSS3 content tabs using radio buttons together with the :checked pseudo-class and sibling combinators.

Responsive Horizontal Layout

Responsive Horizontal Layout

In this tutorial you will find out how to create a horizontal layout with several content panels.

Login and Registration Form with HTML5 and CSS3

Login and Registration Form with HTML5 and CSS3

In this tutorial you are going to create two HTML5 forms that will switch between login and registration using the CSS3 pseudo class :target.

Responsive Content Navigator with CSS3

Responsive Content Navigator with CSS3

In this tutorial Mary Lou will show you how to create a content navigator with CSS only.

How to Create Calendar using jQuery and CSS3 [Tutorial]

How to Create Calendar using jQuery and CSS3 [Tutorial]

In this tutorial you will learn to code the CSS3 calendar using jQuery and jQuery UI.

About the Author

Tomas Laurinavicius is an adventurous designer and entrepreneur. Editor-in-chief at Despreneur and Product Manager at Refe. Connect with me on @tomaslau.

11 Comments

  1. Alan
    May 10, 2012

    Think there are enough compatible browsers out there yet to risk it?

    Reply
  2. Simon
    May 10, 2012

    Well, there’s not much risk involved. After all, it’s just CSS. I’ve tested some of the demos in those tutorials, and they mostly downgrade gracefully on IE8 and IE7. Users with obsolete browsers probably won’t miss a simple rounded corner or a subtle text shadow. Animations are another story, though.

    Reply
  3. Anna Green
    May 11, 2012

    I love the way that css3 is taking thing! I just can’t wait for the browsers to catch up, especially with the animate function that thing is awsome!

    Reply
  4. Design Turnpike
    May 11, 2012

    I am taking your expert advice and implementing the Image Slider using jQuery and CSS3 on the home page of my license plate art website. Stay tuned, it’s going well, I’ll be deploying it soon to replace my Flash image gallery. http://www.designturnpike.com Thanks for posting!!!

    Reply
  5. Gerwin van der Feijst
    May 12, 2012

    I will add these to our internal list of tutorials. It will give the guys some new insights and keeps them sharp! Thanks for taking the time collecting them and present them together.

    Reply
  6. Simon Fletcher
    May 15, 2012

    I agree with Simon, people using earlier versions of IE wont miss the simple drop shadow. However when it comes to animations like the accordions its not worth doing until it all browsers support it. For example I have got placeholders on my site but I have had to include a jQuery script to do the function in IE anyway. I cannot wait for all the browsers to support css3 as it will be so much easier for designers to implement interactivity.

    Reply
  7. Ari
    May 16, 2012

    Thanks for including my Teaser Page tutorial!

    Reply
  8. TheCodeDemo
    November 10, 2012

    If you want to play with CSS3, Vertical Navigation Menu tutorial code before you start using it on your website, you can now on http://www.TheCodeDemo.co.cc or on it’s own page: http://TheCodeDemo.co.cc/preview/18/ .

    Reply
  9. Deepanker
    May 29, 2013

    Nice collection of Tutorials. :D

    Reply
  10. Howard Steele
    July 12, 2013

    Great collection!
    Thumbs up :)

    Reply
  11. Nate Balcom
    March 14, 2014

    Great group of tutes you put together here. Are these all responsive examples? Looks like most are.

    Reply

Leave a Reply