Design & UX - - By Tara Hornor

Twenty Advanced CSS Tutorials

The following collection focuses on advanced CSS tutorials to help you sharpen your CSS skills. Once you’ve recreated these tutorials on your own, you can use and re-use the resulting files and keep them in your personal toolkit for future reference.

We avoided tutorials that used combinations of CSS and jQuery to focus entirely on CSS development tricks. jQuery is a powerful tool, but if you want to learn pure CSS, then these advanced tutorials are a great place to start. Topics range from sliders, accordions, forms, layouts, to even image transitions.


Stylish Image Content Slider in Pure CSS3

Source


Horizontal Accordion Slider with Vertical Text

Source


How to Create CSS3 Borders – CSS3 Handy Techniques

Source


The Definitive Guide to CSS Animations and Transitions

Source


Learn How To Create Drop Cap Letters In CSS

Source


CSS3 Hover Tabs without JavaScript

Source


Creating Intrinsic Ratios for Video (Resizeable Videos)

Source


CSS3 animated dropdown menu

Source


Create Pulse Effect With CSS3 Animation

Source


CSS Custom Fonts Tutorial

Source


How to Create a Pure CSS3 Slideshow

Source


How to Create Accordion Menu in Pure CSS3

Source


How to Create a CSS3 Tabbed Navigation

Source


CSS3 Minimalistic Navigation Menu

Source


How to Build a Kick-Butt CSS3 Mega Drop-Down Menu

Source


How to Create Nice Scalable CSS Based Breadcrumbs

Source


CSS Form

Source


Multi Column Layout and How it Will Change Web Design

Source


Adventures In The Third Dimension: CSS 3D Transforms

Source


Designing Modern Web Forms with HTML 5 and CSS3

Source

Sponsors