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

          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.

          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

          2. Getting Started With CSS calc()

          CSS-Technique

          3. The Problem Of CSS Form Elements

          CSS-Technique

          4. 5 Powerful Tips And Tricks For Print Style Sheets

          CSS-Technique

          5. 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.

          7. CSS3 Transitions: Thank God We Have A Specification!

          CSS-Technique

          8. Flexbox Is As Easy As Pie – Designing CSS Layouts

          CSS-Technique

          9. Simple Responsive Images With CSS Background Images

          CSS-Technique

          10. 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.

          11. Semantic CSS With Intelligent Selectors

          CSS-Technique

          12. Designing For Emotion With CSS Hover Effects

          CSS-Technique

          13. Challenging CSS Best Practices

          CSS-Technique

          14. Killer Responsive Layouts With CSS Regions

          CSS-Technique

          15. Understanding CSS Timing Functions

          CSS-Technique

          16. 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.

          17. Designing For Print With CSS

          CSS-Technique

          18. Creating Responsive Shapes With Clip-Path And Breaking Out Of The Box

          CSS-Technique

          19. The Making Of “In Pieces”: Designing an Interactive Exhibition With CSS Clip Paths

          CSS-Technique

          20. Quantity Ordering With CSS

          CSS-Technique

          21. Designing Flexible, Maintainable Pie Charts With CSS And SVG

          CSS-Technique

          22. Constructing CSS Quantity Queries On The Fly

          CSS-Technique

          23. Understanding Critical CSS

          CSS-Technique

          24. Laying Out A Flexible Future For Web Design With Flexbox

          CSS-Technique

          25. An Introduction To PostCSS

          CSS-Technique

          26. Variables: The Backbone Of CSS Architecture

          CSS-Technique

          27. An Ultimate Guide To CSS Pseudo-Classes And Pseudo-Elements

          CSS-Technique

          28. Truly Fluid Typography With vh And vw Units

          CSS-Technique

          29. Understanding The CSS Property Value Syntax

          CSS-Technique

          30. CSS 3D Cube

          CSS-Technique

          31. Element Queries, And How You Can Use Them Today

          CSS-Technique

          32. Upgrading CSS Animation With Motion Curves

          CSS-Technique

          33. CSS Inheritance, The Cascade And Global Scope: Your New Old Worst Best Friends

          CSS-Technique

          34. Let’s Play With Hardware-Accelerated CSS

          CSS-Technique

          35. A Pure CSS3 Cycling Slideshow

          CSS-Technique

          36. Beercamp: An Experiment With CSS 3D

          CSS-Technique

          37. Adventures In The Third Dimension: CSS 3D Transforms

          CSS-Technique

          38. PrefixFree: Break Free From CSS Prefix Hell

          CSS-Technique

          39. The Guide To CSS Animation: Principles and Examples

          CSS-Technique

          40. An Introduction To CSS3 Keyframe Animations

          CSS-Technique

          41. CSS3 vs. CSS: A Speed Benchmark

          CSS-Technique

          42. How To Use CSS3 Pseudo-Classes

          CSS-Technique

          43. Coding Q&A With Chris Coyier: Responsive Sprites And Media Query Efficiency

          CSS-Technique

          44. CSS Baseline: The Good, The Bad And The Ugly

          CSS-Technique

          45. Why Coding Style Matters

          CSS-Technique

          46. Classes? Where We’re Going, We Don’t Need Classes!

          CSS-Technique

          47. Coding Q&A With Chris Coyier: Box-Sizing and CSS Sprites

          CSS-Technique

          48. Decoupling HTML From CSS

          CSS-Technique

          49. CSS Sprites Revisited

          CSS-Technique

          50. An Introduction To Object Oriented CSS (OOCSS)

          CSS-Technique

          51. Houdini: Maybe The Most Exciting Development In CSS You’ve Never Heard Of

          CSS-Technique

          52. Styling And Animating SVGs With CSS

          CSS-Technique

          53. CSS-Driven Internationalization In JavaScript

          CSS-Technique
          Smashing Editorial (sl)