About The Author

The Smashing team loves high-quality content and cares about the little details. Through our online articles, Smashing Books, eBooks as well as Smashing … More about The Smashing Editorial…

53 CSS-Techniques You Couldn't Live Without

Quick Summary

CSS is important. And it is being used more and more often. Cascading Style Sheets offer many advantages you don’t have in table-layouts - and first of all a strict separation between layout, or design of the page, and the information, presented on the page. Thus the design of pages can be easily changed, just replacing a css-file with another one. Isn’t it great? Well, actualy, it is. Over the last few years web-developers have written many articles about CSS and developed many useful techniques, which can save you a lot of time - of course, if you are able to find them in time. Below you’ll find a list of techniques we , as web-architects, really couldn’t live without. They are essential and they indeed make our life easier. Let’s take a look at 53 CSS-based techniques you should always have ready to hand if you develop web-sites. Thanks to all developers who contributed to accessible and usable css-based design over the last few years. We really appreciate it. Thanks! You might want to take a look at the article Powerful CSS-Techniques For Effective Coding.

Table of Contents
Membership counter

Members support Smashing

Wonderful, friendly people who keep this lil' site alive — and get smarter every day.

Are you smashing, too? →

CSS is important. And it is being used more and more often. Cascading Style Sheets offer many advantages you don’t have in table-layouts - and first of all a strict separation between layout, or design of the page, and the information, presented on the page. Thus the design of pages can be easily changed, just replacing a css-file with another one. Isn’t it great? Well, actually, it is.

Over the last few years web-developers have written many articles about CSS and developed many useful techniques, which can save you a lot of time - of course, if you are able to find them in time. Below you’ll find a list of techniques we , as web-architects, really couldn’t live without. They are essential and they indeed make our life easier.

Let’s take a look at 53 CSS-based techniques here at Smashing Mag you should always have ready to hand if you develop web-sites. 

  1. Sneak Peek Into The Future: CSS Selectors, Level 4
CSS-Technique
  1. Getting Started With CSS calc()
CSS-Technique
  1. The Problem Of CSS Form Elements
CSS-Technique
  1. 5 Powerful Tips And Tricks For Print Style Sheets
CSS-Technique
  1. How To Benefit From CSS Generated Content And Counters
Generated content was first introduced in the CSS2 specification. For several years, the feature was used by relatively few Web authors due to inconsistent browser support.
  1. CSS3 Transitions: Thank God We Have A Specification!
CSS-Technique
  1. Flexbox Is As Easy As Pie – Designing CSS Layouts
CSS-Technique
  1. Simple Responsive Images With CSS Background Images
CSS-Technique
  1. Absolute Horizontal And Vertical Centering In CSS
Stephen Shaw introduces a technique for perfect horizontal and vertical centering in CSS, at any width or height. The techniques works with percentage-based width/height, min-/max- width, images, position: fixed and even variable content heights.
  1. Semantic CSS With Intelligent Selectors

CSS-Technique

  1. Designing For Emotion With CSS Hover Effects
CSS-Technique
  1. Challenging CSS Best Practices
CSS-Technique
  1. Killer Responsive Layouts With CSS Regions
CSS-Technique
  1. Understanding CSS Timing Functions
CSS-Technique
  1. CSS-Only Solution For UI Tracking
The web is growing up. We are building applications that work entirely in the browser. They are responsive; they have tons of features and work under many devices. We enjoy providing high-quality code that is well structured and tested.
  1. Designing For Print With CSS
CSS-Technique
  1. Creating Responsive Shapes With Clip-Path And Breaking Out Of The Box
CSS-Technique
  1. The Making Of “In Pieces”: Designing an Interactive Exhibition With CSS Clip Paths
CSS-Technique
  1. Quantity Ordering With CSS
CSS-Technique
  1. Designing Flexible, Maintainable Pie Charts With CSS And SVG
CSS-Technique
  1. Constructing CSS Quantity Queries On The Fly
CSS-Technique
  1. Understanding Critical CSS
CSS-Technique
  1. Laying Out A Flexible Future For Web Design With Flexbox
CSS-Technique
  1. An Introduction To PostCSS
CSS-Technique
  1. Variables: The Backbone Of CSS Architecture
CSS-Technique
  1. An Ultimate Guide To CSS Pseudo-Classes And Pseudo-Elements
CSS-Technique
  1. Truly Fluid Typography With vh And vw Units
CSS-Technique
  1. Understanding The CSS Property Value Syntax
CSS-Technique
  1. CSS 3D Cube
CSS-Technique
  1. Element Queries, And How You Can Use Them Today
CSS-Technique
  1. Upgrading CSS Animation With Motion Curves
CSS-Technique
  1. CSS Inheritance, The Cascade And Global Scope: Your New Old Worst Best Friends
CSS-Technique
  1. Let’s Play With Hardware-Accelerated CSS
CSS-Technique
  1. A Pure CSS3 Cycling Slideshow
CSS-Technique
  1. Beercamp: An Experiment With CSS 3D
CSS-Technique
  1. Adventures In The Third Dimension: CSS 3D Transforms
CSS-Technique
  1. PrefixFree: Break Free From CSS Prefix Hell
CSS-Technique
  1. The Guide To CSS Animation: Principles and Examples
CSS-Technique
  1. An Introduction To CSS3 Keyframe Animations
CSS-Technique
  1. CSS3 vs. CSS: A Speed Benchmark
CSS-Technique
  1. How To Use CSS3 Pseudo-Classes
CSS-Technique
  1. Coding Q&A With Chris Coyier: Responsive Sprites And Media Query Efficiency
CSS-Technique
  1. CSS Baseline: The Good, The Bad And The Ugly
CSS-Technique
  1. Why Coding Style Matters
CSS-Technique
  1. Classes? Where We’re Going, We Don’t Need Classes!
CSS-Technique
  1. Coding Q&A With Chris Coyier: Box-Sizing and CSS Sprites
CSS-Technique
  1. Decoupling HTML From CSS
CSS-Technique
  1. CSS Sprites Revisited
CSS-Technique
  1. An Introduction To Object Oriented CSS (OOCSS)
CSS-Technique
  1. Houdini: Maybe The Most Exciting Development In CSS You’ve Never Heard Of
CSS-Technique
  1. Styling And Animating SVGs With CSS
CSS-Technique
  1. CSS-Driven Internationalization In JavaScript
CSS-Technique
Smashing Editorial (sl)