40 Tutorials And Tools That Will Make You A CSS3 Master

40 Tutorials And Tools That Will Make You A CSS3 Master 1

Table of Contents

Having a tough time in learning CSS? Well, not to worry as here we are presenting 40 excellent and extremely useful tutorials, tricks as well as some tools to make you a CSS3 master. With these resources, you can develop your CSS3 skills and can bring them into your work.

Without any further ado, here we are presenting a list of 40 awesome tutorials and tricks to help you become a CSS master and along with them you will also find some tools to help you with CSS. Here is the full collection after the jump. We hope that you will enjoy this collection. Feel free to share your opinions with us via comment section below. Enjoy!

Tutorials

Make a Stopwatch Using CSS3

This tutorial focuses on step based CSS3 keyframe animation, along with the usage of the animation-play-state property to start/stop/reset the stopwatch.

40 Tutorials And Tools That Will Make You A CSS3 Master 2

Create a flat bubble navigation

In this tutorial I’m going to show you how to create a flat bubble navigation with HTML and CSS3.

40 Tutorials And Tools That Will Make You A CSS3 Master 3

CSS3 Shapes

Here you’ll find a range off shapes all coded with just pure CSS3 code. Unfortunately not all shapes will render correctly in all browsers, currently only web browsers that support CSS3 will produce the correct geometric shapes.

40 Tutorials And Tools That Will Make You A CSS3 Master 4

Expanding Search Bar Deconstructed

A tutorial on how to create a mobile-friendly and responsive expanding search bar.

40 Tutorials And Tools That Will Make You A CSS3 Master 5

Caption Hover Effects

A tutorial on how to create some subtle and modern caption hover effects.

40 Tutorials And Tools That Will Make You A CSS3 Master 6

Using CSS3 Pseudo-Classes And Transitions

Hyperlinks and buttons are a functional yet in general boring aspect of a website or web application. They tend to provide very little feedback when you interact with them. This doesn’t have to be the case, it’s very easy to add some simple styling to let the user know that they have either interacted with or can interact with an element.

40 Tutorials And Tools That Will Make You A CSS3 Master 7

Using CSS3 To Provide Smooth Resize Effects

Ever noticed if you resize your browser window with Gmail open (or Asana or a host of other sites) the various elements on screen resize automatically in a smooth animation? This can be done using JavaScript or jQuery, but can also be achieved using CSS3 transitions and @media selectors.

40 Tutorials And Tools That Will Make You A CSS3 Master 8

Animating CSS3 Gradients

In this tutorial we will learn about animating CSS3 Gradients.

40 Tutorials And Tools That Will Make You A CSS3 Master 9

CSS3 Radial Gradients

Gradients are much-used on web sites: if you want to liven up pretty much any UI feature (buttons, panels, headers, etc.) you can use a gradient, although you should use them sparingly to avoid the “web site christmas tree effect”™. Traditionally we used CSS background images to add gradients to our UIs, and they worked ok, but they were rather inflexible. You’d have to go to your image editor and make changes to the image file every time you wanted to change the colours, size or direction of the gradient.

40 Tutorials And Tools That Will Make You A CSS3 Master 10

How To Create Gmail Logo With CSS3

In this post, I’m going to show you how to create not one, but two variations of Gmail logo using just CSS3.

40 Tutorials And Tools That Will Make You A CSS3 Master 11

Code an Awesome Animated Download Button

Follow along as we create a simple and fun download button using some fancy CSS3.

40 Tutorials And Tools That Will Make You A CSS3 Master 12

Mastering CSS Gradients in Under an Hour

If you’re just curious about how to use CSS Gradients, this is the place for you. We’ll start with the basics of syntax to very advanced effects with lots of tips and examples.

40 Tutorials And Tools That Will Make You A CSS3 Master 13

Semantic CSS With Intelligent Selectors

40 Tutorials And Tools That Will Make You A CSS3 Master 14

CSS Technique

Absolute Horizontal And Vertical Centering In CSS.

40 Tutorials And Tools That Will Make You A CSS3 Master 15

CSS Layouts

Designing CSS Layouts With Flexbox Is As Easy As Pie.

40 Tutorials And Tools That Will Make You A CSS3 Master 16

Building A Circular Navigation

In this tutorial I’m going to show you how to create a flat bubble navigation with HTML and CSS3.

40 Tutorials And Tools That Will Make You A CSS3 Master 17

Natural Language Form With Custom Input Elements

An experimental form that uses natural language instead of the usual form display. Values are entered using custom input elements.

40 Tutorials And Tools That Will Make You A CSS3 Master 18

Web Audio Stylophone

The mighty stylophone. One of the greatest musical instruments ever created. Used by the likes of David Bowie, Kraftwerk and pretty much no-one else inbetween, I’ll show you how to make this fantastic invention using the Web Audio API.

40 Tutorials And Tools That Will Make You A CSS3 Master 19

CSS3 Cookbook

Below you’ll find seven fun and attractive CSS tricks that you can grab and insert right into your own projects and customize at will. Keep in mind that since this stuff is still cutting edge, older browsers won’t support most of it. I’ve tried to ensure graceful degradation where possible so that you can provide a working experience to all users and a better experience to those with using webkit.

40 Tutorials And Tools That Will Make You A CSS3 Master 20

CSS Transitions

If you haven’t used transitions before, here’s a brief introduction. On the element you want to have animate, add the following CSS:

40 Tutorials And Tools That Will Make You A CSS3 Master 21

CSS3 Navigation Menu

Been a while since I posted an update as i’ve been working alot, so I think it’s time for another CSS3 navigation menu tutorial. The tutorial will walk you through the process of structuring a navigation menu in HTML. Once the HTML is complete you will use Photoshop to create a textured background, and then the menu will be brought to life using CSS.

40 Tutorials And Tools That Will Make You A CSS3 Master 22

Google Nexus Website Menu

A tutorial on how to re-create the slide out sidebar menu that can be seen on the Google Nexus 7 website.

40 Tutorials And Tools That Will Make You A CSS3 Master 23

Height Equals Width With Pure CSS

40 Tutorials And Tools That Will Make You A CSS3 Master 24

CSS3 And The Nth-Child

How many times have you seen a piece of JavaScript or PHP code that’s only purpose is to add a specific class to the first, alternate or last element of a list or row of table? With CSS3 you can easily get rid of all of that logic and replace it clean and simple CSS selectors. This will help tidy up your code and depending on what exactly the code is doing reduce CPU load by removing unnecessary recursions (This is of course a minimal gain, but every little bit counts)

40 Tutorials And Tools That Will Make You A CSS3 Master 25

How To Edit CSS Dotted Outline

By default, when an anchor tag element is in active or focus state, a dotted line appears around it, as shown in the image below.

40 Tutorials And Tools That Will Make You A CSS3 Master 26

Tools

Same Gradient Generator

The coveted CSS3 Gradient Generator has undergone a redesign and moved to its new home within the CSS3 Factory. It has maintained all of it’s tools and functions but looks even better now. The redesign enhances the generator’s usability and I will be adding even more advanced functions soon.

40 Tutorials And Tools That Will Make You A CSS3 Master 27

Border Radius

CSS border radius generator for lazy people.

40 Tutorials And Tools That Will Make You A CSS3 Master 28

CSS3.0 Maker

CSS Maker is a free tool to experiment with CSS properties and values and generate a simple stylesheet for your site.

40 Tutorials And Tools That Will Make You A CSS3 Master 29

CSS3 Generators

A fully customizable CSS3 generator to fit your needs. Now with older browser and Internet Explorer support!

40 Tutorials And Tools That Will Make You A CSS3 Master 30

HTML5 & CSS3 Support

40 Tutorials And Tools That Will Make You A CSS3 Master 31

cSS3Pie

PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features.

40 Tutorials And Tools That Will Make You A CSS3 Master 32

Css Sprit

Please, choose and upload the image files you want to use in your css sprite and click “Create CSS Sprite”. The application will join all your images files into a single file and will generate the corresponding CSS and HTML code along with the rollover effect if any choosen.

40 Tutorials And Tools That Will Make You A CSS3 Master 33

Css3 Button

40 Tutorials And Tools That Will Make You A CSS3 Master 34

Css Arrow Please

40 Tutorials And Tools That Will Make You A CSS3 Master 35

Css Trick Button Maker

40 Tutorials And Tools That Will Make You A CSS3 Master 36

Layer Styles

Just like your favorite graphics editor, but in your browser. And it creates CSS.

40 Tutorials And Tools That Will Make You A CSS3 Master 37

Gradients

40 Tutorials And Tools That Will Make You A CSS3 Master 38

Spritebox

Spritebox is a WYSIWYG tool to help web designers quickly and easily create CSS classes and IDs from a single sprite image. It is based on the principle of using the background-position property to align areas of a sprite image into block elements of a web page. It was made using a combination of JQuery, CSS3 and HTML5, and is totally free to use.

40 Tutorials And Tools That Will Make You A CSS3 Master 39

Fontdragr

A revolutionary way to test custom fonts in the browser. No coding, no uploading, just drag and drop.

40 Tutorials And Tools That Will Make You A CSS3 Master 40

CSS3 Cheat Sheet

40 Tutorials And Tools That Will Make You A CSS3 Master 41

Sizzle

A pure-JavaScript CSS selector engine designed to be easily dropped in to a host library.

40 Tutorials And Tools That Will Make You A CSS3 Master 42

HTML 5 Visual Cheat Sheet

HTML 5 Visual Cheat Sheet is an useful cheat sheet for web designers and developers designed by me. This cheat sheet is essentially a simple visual grid with a list of all HTML tags and of their related attributes supported by HTML versions 4.01 and/or 5. The simple visual style I used to design this sheet allows you to find at a glance everything you are looking for.

40 Tutorials And Tools That Will Make You A CSS3 Master 43

SmashingApps.com participates in various affiliate marketing programs and especially Amazon Services LLC Associates Program, which means we may get paid commissions on editorially chosen products purchased through our links to any of the linked sites from us.