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


Horizontal Accordion Slider with Vertical Text


How to Create CSS3 Borders – CSS3 Handy Techniques


The Definitive Guide to CSS Animations and Transitions


Learn How To Create Drop Cap Letters In CSS


CSS3 Hover Tabs without JavaScript


Creating Intrinsic Ratios for Video (Resizeable Videos)


CSS3 animated dropdown menu


Create Pulse Effect With CSS3 Animation


CSS Custom Fonts Tutorial


How to Create a Pure CSS3 Slideshow


How to Create Accordion Menu in Pure CSS3


How to Create a CSS3 Tabbed Navigation


CSS3 Minimalistic Navigation Menu


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


How to Create Nice Scalable CSS Based Breadcrumbs


CSS Form


Multi Column Layout and How it Will Change Web Design


Adventures In The Third Dimension: CSS 3D Transforms


Designing Modern Web Forms with HTML 5 and CSS3


Tags: advanced css, CSS, Tutorials
Tara Hornor has a degree in English and has found her niche writing about marketing, advertising, branding, graphic design, and desktop publishing. She is a Senior Editor for Creative Content Experts, a company that specializes in guest blogging and building backlinks. In addition to her writing career, Tara also enjoys spending time with her husband and two children.
  • Paul

    Hi Tara

    Thanks for including a couple of my tutorials.


    • Tara Hornor

      You’re welcome, Paul! Thanks for providing such useful resources to the web design community. :)

  • Anoop

    NIce work, thanks for your uploading to net

  • Yuki

    Wow. Thanks for this article!

  • Realz Web

    Great Post!

    Also i came across recently which is awesome, an entire collection of only html/css items.

  • vimal

    Thanks for your articles

  • Best Web Services

    This is a nice templates for all collection here, i like too see this collection thanks for shearing!

  • mantolama

    Thank you for this kind of useful resources :)

  • Dan

    At first glance these look too good. I might have to look at how available these styles are before using them yet.

  • varinder

    its great tutorial for me, my times it’s help me out…


  • Tom Carnevale

    Some really nifty designs. Thanks!

    But what’s the reluctance to use javascript – especially jQuery? In many cases, it makes life much simpler.

    • Tara Hornor

      No reluctance at all, actually. :) I just thought I’d organize this article according to a single code.

      Maybe I should do a roundup of jQuery and Javascript tutorials next?

  • Sergio Felix

    Oh wow, this is an amazing compilation Tara, thank you!


  • Ryan

    A few nice tuts here, going to give some of them a try, :)

  • Paal Joachim Romdahl

    This is a very nice list of resources! Thank you!

  • Banji

    Great collections. Thanks for the work done .

  • EntheosWeb

    Thank you for including our tutorials, we also have a recent one on parallax scrolling seen at which may be interesting to your visitors :)

    • Tara Hornor

      Thanks for sharing this tutorial!

  • Valvaithenral

    It’s very good. Thanks for sharing this with us.

  • Mark Hoult

    Great list.

    I’m really looking forward to using the CSS Custom Fonts Tutorial as a way of injected a stronger visual identity into one of my sites via distinctive H1 headings for each page. Thanks.

  • Liam Carey

    Some really interesting new techniques here, thanks for sharing!

  • Leon Panjtar Web Design

    Nice graphic on websites became very good looking with the CSS3 era. Bandwith improvements are enormous compared to the old image design approach.

  • Jens

    Thanks for sharing that insirating list of sources. I will try to adapt some on my site too.

    Great collection indeed.
    Cheerio and have a nice weekend

  • JamieK

    Thanks for provide useful tutorials… :)

  • Tiyo Kamtiyono

    A lot of great tuts, thanks for sharing :)

  • rex

    This is very helpful thank you..

  • jb

    your work is awesome. thx pliz

Ending Soon
Free SitePoint Premium

Get one free year of unlimited book and course downloads on SitePoint Premium!