By Akhter on January 24, 2014

40 Tutorials And Tools That Will Make You A CSS3 Master

Don't Forget to participate in a contest where you can win custom logo design package from LogoDesignBundle.

  Advertisement

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.

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.

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.

Expanding Search Bar Deconstructed

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

Caption Hover Effects

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

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.

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.

Animating CSS3 Gradients

In this tutorial we will learn about animating CSS3 Gradients.

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.

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.

Code an Awesome Animated Download Button

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

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.

Semantic CSS With Intelligent Selectors

CSS Technique

Absolute Horizontal And Vertical Centering In CSS.

CSS Layouts

Designing CSS Layouts With Flexbox Is As Easy As Pie.

Building A Circular Navigation

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

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.

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.

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.

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:

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.

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.

Height Equals Width With Pure CSS

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)

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.

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.

Border Radius

CSS border radius generator for lazy people.

CSS3.0 Maker

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

CSS3 Generators

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

HTML5 & CSS3 Support

cSS3Pie

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

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.

Css3 Button

Css Arrow Please

Css Trick Button Maker

Layer Styles

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

Gradients

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.

Fontdragr

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

CSS3 Cheat Sheet

Sizzle

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

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.





If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.

Comments

[…] 40 Tutorials And Tools That Will Make You A CSS3 Master – 1 freebie(s)? […]

[…] 40 Tutorials And Tools That Will Make You A CSS3 Master – 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. […]

[…] Continued here: 40 Tutorials And Tools That Will Make You A CSS3 Master | Free … […]

You have a done a fantastic job. I am impressed of your work. Keep it up.

[…] 40 Tutorials And Tools That Will Make You A CSS3 Master “Without any fur­ther ado, here we are pre­sent­ing a list of 40 awe­some tuto­ri­als and tricks to help you become a CSS mas­ter and along with them you will also find some tools to help you with CSS. Here is the full col­lec­tion after the jump. We ho… […]

Sorry, the comment form is closed at this time.