50 CSS Tutorials, Techniques and Resources

In this CSS (2 & 3) round-up article we have focused on highlighting as many varied techniques covering as many aspects of web, mobile and application development as possible. And believe me, it wasn’t easy!

Due to CSS3s current popularity, the volume of new tutorials and fresh ideas has jumped skywards. We simply could not highlight all of the articles and tutorials, there were far too many! What we have done is filtered the round-up down to our favorite 50 tutorials, resources and tools from recent months.

There is nothing more refreshing and stimulating than some fresh CSS techniques and tutorials…

Coding a Stylish Blog Design Layout in HTML & CSS

Coding a Stylish Blog Design Layout in HTML & CSS

In this in-depth tut, from Chris Spooner, you will learn how to take a blog layout that has been firstly designed in Photoshop and then take it and convert it to CSS & HTML.

Coding a Stylish Blog Design Layout in HTML & CSS →Demo →

Build a HTML5/CSS3 Website Layout Without Images

Build a HTML5/CSS3 Website Layout Without Images

Build a HTML5/CSS3 Website Layout Without Images →Demo →

Create Animated Price Grid Using CSS3

In this tutorial you will learn how to build an animated Price Grid using CSS3 only. No jQuery, no images and with no Flash.

Create Animated Price Grid Using CSS3 →Demo →

Create a Vibrant Digital Poster Design with CSS3

Create a Vibrant Digital Poster Design with CSS3

Follow this walkthrough of the making of Circlicious, a vibrant and abstract digital poster design made purely of HTML and CSS.

Create a Vibrant Digital Poster Design with CSS3 →Demo →

How To Develop CSS3 Border Radius Tool

How To Develop CSS3 Border Radius Tool

In this article you will be walked through the process of how to adapt your web app to look and feel more like a native application that makes use of CSS media queries to change the layout when the device is rotated between horizontal and portrait modes.

How To Develop CSS3 Border Radius Tool → Demo →

Getting Started With (and Gotchas of) CSS Media Queries

In this article you will be shown how to adapt your web app to look and feel more like a native application that makes use of CSS media queries to change the layout when the mobile device is rotated between horizontal and portrait modes.

Getting Started With (and Gotchas of) CSS Media Queries →Demo →

Bulletproof CSS3 Media Queries

CSS3 media queries are very handy to target various devices with various monitor (screen) size. With the help of the CSS3 media queries we can have site optimized for iPhone and other mobile devices, with the same solution we can have site optimized for iPad and all other tablets .

Bulletproof CSS3 Media Queries →Demo →

How To Use CSS3 Media Queries To Create a Mobile Version of Your Website

How To Use CSS3 Media Queries To Create a Mobile Version of Your Website

In this article, with a few CSS rules, you will learn how to create an iPhone version of your site using CSS3, that will work now. You’ll have a look at a very simple example and it discusses the process of adding a small screen device stylesheet to a site to show how easily you can add stylesheets for mobile devices to existing websites.

How To Use CSS3 Media Queries To Create a Mobile Version of Your Website →

Mastering the 960 Grid System

Mastering the 960 Grid System

In this article, you’ll master the 960 grid system by dissecting the 24-column version demo. By the end of this article, you’ll be able to convert your designs to HTML and CSS in no time at all.

Mastering the 960 Grid System →

Pure CSS Reflections

Pure CSS Reflections

Many might not be aware that, with CSS, we can achieve reflections quite easily in all webkit-based browsers, which represent roughly 20% of all browser usage. The key is in the vendor-specific, -webkit-box-reflect property.

Pure CSS Reflections →Demo →

How To Beat Form Spam With Just CSS

In this article the author shares his method for beating spam bots that he has been using for nearly 3 years and works consistently. It’s been incredibly effective, doesn’t carry the usability issues and implementation hassles of something like CAPTCHA, and uses nothing more than a bit of CSS!

How To Beat Form Spam With Just CSS →

4 Ideas For Styling Link Hovers With CSS

Usually you’ll see an underline, or an underline removed, or a different color. But there are many ways to show people that they can click and in this article the author shares his favorites.

4 Ideas For Styling Link Hovers With CSS →

The CSS white-space Property Explained

This article will attempt to describe, in a very practical, no-nonsense way, the different values for the CSS white-space property, and how each one can be used.

The CSS white-space Property Explained →

Sexy Tooltips with Just CSS

Sexy Tooltips with Just CSS

Sexy Tooltips with Just CSS →Demo →

Getting to Work with CSS3 Power Tools

CSS3 is one of the coolest new web technologies available to web developers right now. Using some of its many features, it is possible to reproduce the effects that you might have previously done in Photoshop, with CSS code that is more maintainable, faster to load, and hip with the latest trends. Read on to learn about the power tools available to you and how to combine them to produce the ultimate graphical effects.

Getting to Work with CSS3 Power Tools →

Word-Wrap: A CSS3 Property That Works in Every Browser

Okay, this is not exactly the kind of CSS property that’s going to be used in every design. But it is a very useful one when you need it, and some might say it’s much more practical than some of the fluffy new CSS3 features like transitions and whatnot.
The property I’m talking about is the CSS3 word-wrap property, and believe it or not, it works in every single browser, including all versions of IE. In fact, it was even supported as far back as IE5.

Word-Wrap: A CSS3 Property That Works in Every Browser →

Subtle CSS3 Typography that you’d Swear was Made in Photoshop (Video)

Subtle CSS3 Typography that you’d Swear was Made in Photoshop (Video)

Thanks to text shadows, outlines, transitions, and even text gradients, we can now create cool typography that you’d swear had to be made with a program like Photoshop. Nope, all CSS3 baby!

Subtle CSS3 Typography that you’d Swear was Made in Photoshop (Video) →

Sleek Card Pockets using CSS Only

Sleek Card Pockets using CSS Only

In this CSS3 tutorial, you’ll learn how to create web card pockets using some great new CSS3 techniques.

Sleek Card Pockets using CSS Only →Demo →

Animated Wicked CSS3 3d Bar Chart

Animated Wicked CSS3 3d Bar Chart

Animated Wicked CSS3 3d Bar Chart →Demo →

Start Experimenting With CSS3 Keyframe Animations

Start Experimenting With CSS3 Keyframe Animations

Start Experimenting With CSS3 Keyframe Animations →Demo →

Animated Sprites with CSS3 Transitions

Animated Sprites with CSS3 Transitions

This technique is not really anything new, it just combines two concepts (sprites and animations) that most CSS developers should be fairly well familiar with by now. Combining the two methods, you can create a simple animated rollover effect with endless possibilities.

Animated Sprites with CSS3 Transitions →Demo →

Super Cool CSS Flip Effect with Webkit Animation

Super Cool CSS Flip Effect with Webkit Animation

In this article you will take a quick look at how the rotateY property can produce a flip effect, and how it can be used to create a super cool Transformers themed top trumps design.

Super Cool CSS Flip Effect with Webkit Animation →Demo →

Create A Clean and Stylish CSS3 Contact Form

Create A Clean and Stylish CSS3 Contact Form

Building stylish contact forms typically requires the use of images (and maybe some JavaScript) to create something that looks professional. However, with CSS3 it’s now much easier to create some nice effects that don’t require the use of any images, yet can still look clean and stylish.

Create A Clean and Stylish CSS3 Contact Form →Demo →

iPhone Style Checkboxes With CSS3

iPhone Style Checkboxes With CSS3

Here’s some form input checkboxes styled with CSS3 to look like iPhone style on/off buttons. There’s some -webkit- animations for Chrome and Safari. The clever bit is using the label to switch the checkbox off and on using the ‘for’ attribute whick targets the ‘id’ of the checkbox.

iPhone Style Checkboxes With CSS3 →Demo →

Form Design with CSS3

Form Design with CSS3

Form Design with CSS3 →Demo →

Menu, Navigation & Button CSS Tutorials

Fun Animated Navigation Menu with Pure CSS

Fun Animated Navigation Menu with Pure CSS

CSS3 offers a glimpse into a possible future where basic animations are performed with straight CSS completely independent of scripting. In this tutorial you’ll take a look at how to use CSS3 to create a fun and unique navigation menu that uses @font-face, transforms and transitions.

Fun Animated Navigation Menu with Pure CSS →Demo →

iPhone “slide to unlock” Text in WebKit/CSS3

iPhone “slide to unlock” Text in WebKit/CSS3

If you made a horizontal gradient that faded in a gray-white-gray pattern, then animated it from left to right, you could make the iPhone/iPad’s slide to unlock screen with no images at all.

iPhone “slide to unlock” Text in WebKit/CSS3 →Demo →

CSS3 Flying Menu

CSS3 Flying Menu

In this tutorial you will learn how to create a simple menu that has a flying effect when the user hovers over them using only CSS.

CSS3 Flying Menu →Demo →

Fading Button Background Images With CSS3 Transitions

Fading Button Background Images With CSS3 Transitions

CSS3 transitions with another CSS3 property, RGBa, will allows y to animate an element’s opacity without affecting contained elements.

Fading Button Background Images With CSS3 Transitions →Demo →

Simple CSS3 Dropdown Menu

Simple CSS3 Dropdown Menu

Simple CSS3 Dropdown Menu →Demo →

Popout Details on Hover w/ CSS

Popout Details on Hover w/ CSS

Popout Details on Hover w/ CSS →Demo →

Styling Pretty Buttons with only CSS3

Styling Pretty Buttons with only CSS3

What you will be showing here, is how you can use some CSS3 properties to create lightweight, good looking buttons. The code will be very easy to adjust, will have complete flexiblity, so the buttons can be any size, ratio, color, font and you only need to edit the CSS file.

Styling Pretty Buttons with only CSS3 →Demo →

Pure CSS Collapsible Tree Menu

Pure CSS Collapsible Tree Menu

In this tut you will learn how to build a collapsible tree menu using only CSS.

Pure CSS Collapsible Tree Menu →Demo →

CSS3 Minimalistic Navigation Menu

CSS3 Minimalistic Navigation Menu

In this tutorial you will be making something practical – a simple CSS3 animated navigation menu, which degrades gracefully in older browsers and is future-proofed to work with the next generation of browsers.

CSS3 Minimalistic Navigation Menu →Demo →

Images Effects & Galleries

Fancy Inset CSS Image Borders

Fancy Inset CSS Image Borders

In this article you will be exploring how to add a nice, styled, inset double border to any image. This effect works in all modern browsers and degrades gracefully for Internet Explorer.

Fancy Inset CSS Image Borders →

Fancy Image Hover Using CSS3

Fancy Image Hover Using CSS3

Here you will learn how to create a fancy image hover effect with CSS3 that is typically achieved with jQuery, but now using the transform and the transition properties you can have the same effect.

Fancy Image Hover Using CSS3 →

Pure CSS Sliding Image Gallery

Pure CSS Sliding Image Gallery

The idea of this image gallery is to get one image to slide in while the current image slides out. There’s a lot of z-index going on as well so the new image always appears to be at the top.

Pure CSS Sliding Image Gallery →Demo →

CSS Border Tricks – Pressed, Beveled, Shadows, Intented Borders

CSS Border Tricks - Pressed, Beveled, Shadows, Intented Borders

The author shares some simple border style tricks to get various effects for your next project.

CSS Border Tricks – Pressed, Beveled, Shadows, Intented Borders →Demo →

Semantic CSS3 Lightboxes

Semantic CSS3 Lightboxes

This tutorial aims to showcase a method of displaying content based on the lightbox, which is web accessible and (excluding Internet Explorer) will require no scripting at all.

Semantic CSS3 Lightboxes →Demo →

Fresh CSS Tools & Resources

Primary CSS

Primary CSS

Primary is a simple open-source CSS Framework, designed for Developers and Designers in order to make using CSS as easy as possible.

Primary CSS →

CSS3 PIE

CSS3 PIE

CSS3 Pie is a set of CSS “behaviors” that can be attached to any CSS file by way of the behavior element in order to add rendering support to Internet Explorer 6, 7 or 8 for the more popular CSS3 rendering features.

CSS3 PIE →

IE-CSS3 – CSS3 Support in IE 6, 7, and 8

IE-CSS3 is a script to provide Internet Explorer support for some new styles available in the upcoming CSS3 standard.

IE-CSS3 – CSS3 Support in IE 6, 7, and 8 →

Gridulator

Gridulator

Gridulator →

Toucan CSS Reset

Toucan CSS Reset is a reset stylesheet, unlike Meyer’s or YUI’s, it not only removes the default styling of HTML elements, but also rebuilds the new generic rules for the typography, headings, paragraphs, lists, forms, tables etc. It’s light-weight, flexible and browser-friendly.

Toucan CSS Reset →

CSS Reset – a simpler option

CSS Reset – a simpler option

CSS Reset – a simpler option →

HTML5 Readiness

HTML5 Readiness

The idea of this visualization is to show how much support exists for each new HTML/CSS feature. It shows support for 8 browsers (IE 7, 8, 9, Opera 10.10, Safari 4, Chrome 4, Firefox 3.5, and Firefox 3.7). The browsers are grouped into color schemes based on their underlying rendering engine – e.g. all Firefox versions are shades of blue, Chrome/Safari – yellow, IE – pink. Each ray also has a different background color if it is a CSS3 feature.

HTML5 Readiness →

FontFonter

FontFonter

FontFonter uses custom CSS and other techniques to temporarily replace a site’s font styles with Web FontFonts.

FontFonter →

Typedsgn

Typedsgn

Typedsgn.com is a website to showcase the natural curiosities of typography on the web using the most advanced coding techniques via CSS3, HTML5, @font-face and other markup languages.

Typedsgn →

Font Dragr

Font Dragr

Drag and drop your truetype (ttf), opentype (otf), scalable vector graphics (svg) or Web Open Font Format (WOFF) fonts onto the page and it will be added to the font list. The last font dropped will change the font-family of the pages text and the title.

Font Dragr →

ColorBlendy

ColorBlendy

Ever fire up Photoshop just to multiply a couple of colors? No more. Blend colors with different modes like multiply, overlay, dodge, within the convenience of your browser.

ColorBlendy →

CSS3 Button Maker

CSS3 Button Maker

To use this Button Maker thing, you just adjust the settings until you have a nice looking button, then press the button and it will give you the CSS. Copy and paste at your leisure. Now you can use the class name “button” on HTML elements to make them look like buttons.

CSS3 Button Maker →

CSS3.0 Maker

CSS3.0 Maker

CSS3.0 Maker →

CSS3 Click Chart

CSS3 Click Chart

Each example on the CSS3 Click Chart, visually displays the CSS3 feature, with a clickable heading that opens a box at the bottom of the page for information on that particular feature.

CSS3 Click Chart →

CSS3 Watch

CSS3 Watch

CSS3 Watch is fantastic resource for everything CSS3 related. You will find tutorials, concepts and plenty of inspiration.

CSS3 Watch →

Author: (588 Posts)

Paul Andrew is the editor and founder of Speckyboy Design Magazine.

Comments