50 Excellent CSS3 Techniques and Tutorials for Beautiful Design

  •  1 Comment

Slide Down Box Menu with jQuery and CSS3

Mary Lou explains a mechanism of creating a non-standard sliding navigation menu with a boxy vibe, accompanying images and a lovely bouncing effect. The latter is achieved through jQuery Easing Plugin. As befits the tutorial is broken into three parts that clear up the markup, styling, and JavaScript role.

Awesome Cufonized Fly-out Menu with jQuery and CSS3

The author formulates vital steps of the method. She provides detailed explanations, helpful remarks and code snippets. You will prototype a full-screen menu that is based on a simple typography. Each link has a bold appearance and an accompanying panel with extra content that slides out. Here, CSS3 is used for the styling, and JavaScript is for adding effects.

Beautiful Photo Stack Gallery with jQuery and CSS3

The walkthrough guides through the routine of creating nice and sleek image gallery with a twist. You are going to build a sophisticated template that lays out the content (both images and text) into a grid structure and add smooth eye-pleasing transitions between slides. The component is charged with some magic produced by PHP. There are plenty of moments that need to be taken into account, so that the post is quite extensive, be ready to spend some precious time.

Speed Up with CSS3 Gradients

This original idea was brought to life by the guru of CSS3, Chris Coyier. The author dives into several types of gradients such as radial, linear and intricate repeated to achieve impressive results. The article was updated three times to comply with the changes. You can freely grab code snippets for each kind, get acquainted with browser support and explore a possible fallback.

CSS3 Progress Bars

This is another masterpiece from Chris Coyier. The artist has prototyped four lively progress bars that have a candy appearance and breathe with dynamics. They are also flexible; it means that they look great on different screen sizes. Follow the instructions to know how to create them from scratch or just download a source file.

CSS3 Loading Spinner

CSS3 Loading Spinner is an alternative way of tracking and visualizing progress status. It leverages looped circle and CSS3 potential. The author just quickly skips through the main points, giving you some hints how to achieve the same result at home. Read carefully and you will manage to get your mind around the concept.

Bubble Point Tooltips with CSS3 & jQuery

The tutorial focuses on imitating a tooltip design inspired by the contextual menus from OS X dock that gives off elegance and subtlety. By carefully following author’s steps that are clearly described in the article you will be able to create a dynamic replica. CSS, HTML, and JavaScript are the leading tools of the workflow.

CSS3-Only Tabbed Area

Chris Coyier ditches JavaScript and goes for CSS3. Although the solution seems to be a bit bold, yet the potential of the style sheet language allows achieving the desired result without sacrificing functionality. In just several steps you will be able to create a live version of a tab that works well in various browsers.

Bokeh with CSS3 Gradients

Divya Manian gets the most out of transparency property that is available in CSS3 gradients. The artist has conducted several experiments in order to obtain such a stunning outcome. An accompanying tutorial comprises a concise guideline that is broken into five major points. The demo runs without problems in the majority of the modern browsers.

Shiny Knob Control with jQuery and CSS3

Shiny Knob Control with jQuery and CSS3 looks highly realistic because of shiny surfaces and professionally treated textures. The supporting effects that let users twiddle it around strengthen the impression. The concept also works in mobile devices and tablets. To get to the bottom of the idea examine the walkthrough prepared by Martin Angelov. He thoroughly explains all the unclear moments.

Having Fun With CSS3: Spinning Newspapers

The post is aimed to stimulate readers on achieving the greatest output from the new possibilities of CSS3. The developer leverages Google web fonts, keyframe animation, a rendering of newspaper saved in PNG/JPEG formats, canvas elements, and JavaScript. You will find an accurate guide that shows you how to put all the stated above components together.

Creating a PHP and CSS3 Powered About Page

Creating a PHP and CSS3 Powered About Page is not so challenging and difficult when you follow the step-by-step instructions written by Martin Angelov. He explains how to build a template with some extra functionality and excellent design using a powerful and time-tested trio of PHP, HTML5, and CSS3. He highlights details and important factors.

Making a CSS3 Animated Menu

This is a quite short tutorial that touches basics of the web development. The artist delves into possibilities of CSS3 regarding transitions and effects in order to avoid utilization of JavaScript. While the method strongly relies on a ‘:target’ pseudo-class and several ‘:after’ elements, the design aesthetics is constructed through skillful manipulations with gradients, box shadows, multiple backgrounds and a solid HTML5 backbone.

Photobooth with PHP, jQuery and CSS3

The author illuminates an advanced technique that is based on jQuery, PHP, and Flash. Since the project enables visitors to take snapshots via camera, it simply can’t do without a helping hand of flash API and a wrapper provided by webcam.js. The article is quite interesting and informative; it is well-suited for newbies with some core competencies.

Better Check Boxes with jQuery and CSS

Martin Angelov offers a substitute for the boring and primitive default browser checkboxes that should work across various devices and platforms and use a fallback for saving the day when JavaScript fails. He carefully walks you through a regular procedure of sprucing up the UI components and a transformation of code snippet into an actual jQuery plugin.

Coding a Rotating Image Slideshow w/ CSS3 and jQuery

The tutorial exemplifies the rotation features available in CSS3. Not only does the article include explanations and pieces of code but also some visual clues presented via screenshots. Just by following explicit instructions, you are going to create a marvelous and dynamic component for displaying multimedia in less than an hour. The solution is based on a relatively plain HTML layout and a bunch of styling tricks.

Making Better Select Elements with jQuery and CSS3

The article is centered around the idea that drop-down lists should be elaborate and informative and look consistent across various devices. You will start with HTML part, then proceed to jQuery and finish with some CSS styling that puts everything in order.

CSS3 Animated Bubble Buttons

The effect is obtained with the help of advanced CSS3 features such as multiple backgrounds and animations. It does not require any JavaScript, so that if you want to make this pack of button resistant to any situations, you should take care of a fallback. You can thoroughly examine the post or just download source and use it in your projects just by assigning the class name. The download file comprises buttons with four predefined skins and three sizes.

Page 1 Page 2 Page 3


1 Comment
  1. Kamil Jan 18, 9:02 pm

    Nice article but I don’t get why in the introduction you say: “present day internet browsers like Internet Explorer 7 & 8”. First IE7 and 8 are not present day browsers, it is 2012 remember? IE9 is present day browser and you don’t even mention it. We, as developers, should encourage people to upgrade. Second: IE7 and even 8 cannot render even basic CSS3 styles like border-radius.
    Once again, I do not want to be rude, I just don’t understand why you written your intro like that.
    Otherwise thanks very much for your hard work and sharing valuable information with us.


Leave a Reply

* Minimum length: 20 characters

Download Web Design Freebies & Resources


Please Confirm Your Email!