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, 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](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c3e36b0b-ca28-4f2d-867c-7c98b594943a/css4.jpg)
2. Getting Started With CSS calc()
![CSS-Technique](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5d66b0ca-bc40-4c34-8ba1-3823407bc651/08-rotated-simple-cubes-preview-2.png)
3. The Problem Of CSS Form Elements
![CSS-Technique](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d9ca37d0-0bef-4e5d-8f2f-ea32abf15ad1/vertical-grid1.jpg)
4. 5 Powerful Tips And Tricks For Print Style Sheets
![CSS-Technique](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/18e8fa32-4262-44af-a1eb-38d279d769e5/logo-black-background-300x105.png)
5. How To Benefit From CSS Generated Content And Counters
7. CSS3 Transitions: Thank God We Have A Specification!
![CSS-Technique](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/652936cf-6590-4889-831f-d1a214c903df/css-start-image.gif)
8. Flexbox Is As Easy As Pie – Designing CSS Layouts
9. Simple Responsive Images With CSS Background Images
![CSS-Technique](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0c37db9f-8140-45d2-a8d6-d6055d69b204/simple-resp-images.png)
10. Absolute Horizontal And Vertical Centering In CSS
11. Semantic CSS With Intelligent Selectors
12. Designing For Emotion With CSS Hover Effects
![CSS-Technique](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/877079b4-a842-4a4d-8a39-ca077768c48d/sport-car-front-mini.jpg)
13. Challenging CSS Best Practices
![CSS-Technique](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f7fd599c-c918-470d-9968-9e63173f823a/class-stop-mini.jpg)
14. Killer Responsive Layouts With CSS Regions
![CSS-Technique](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8cbb72fd-f2c1-4230-a8de-fc781c55da79/css-regions-adobe-html.png)
15. Understanding CSS Timing Functions
![CSS-Technique](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/515e0bc0-3932-4286-aab5-662ce6399143/01-bezier-curve-ease.jpg)
16. CSS-Only Solution For UI Tracking
17. Designing For Print With CSS
![CSS-Technique](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5415bca9-ef4d-439e-b3e4-13ae2813b2d4/print-css-example-opt.jpg)
18. Creating Responsive Shapes With Clip-Path And Breaking Out Of The Box
![CSS-Technique](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/04ab445b-5af6-47f8-8439-98ed3f9aca0d/diamond4-opt.jpg)
19. The Making Of “In Pieces”: Designing an Interactive Exhibition With CSS Clip Paths
![CSS-Technique](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/047a7471-8eaa-4b7a-8538-539d206fc2e1/1-in-pieces-opt.png)
20. Quantity Ordering With CSS
![CSS-Technique](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1b2721f5-6f5f-4d5a-ac91-870c62b7b82e/css.jpg)
21. Designing Flexible, Maintainable Pie Charts With CSS And SVG
![CSS-Technique](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/550931a3-57b7-4a7d-a9a1-af472ba2a0f0/pie-charts.png)
22. Constructing CSS Quantity Queries On The Fly
![CSS-Technique](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a77b3889-e9e9-445e-a893-90a9eed31d56/qq-tool-opt.png)
23. Understanding Critical CSS
![CSS-Technique](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3e502def-874f-44ab-8a99-e65043018baa/02-browser-opt-small.jpg)
24. Laying Out A Flexible Future For Web Design With Flexbox
![CSS-Technique](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bd9167aa-bdd3-4639-bd48-cb383882df26/05-nested-horizontal-opt.png)
25. An Introduction To PostCSS
![CSS-Technique](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3426185f-6807-452d-a391-819adbac4ec5/post-css-opt.png)
26. Variables: The Backbone Of CSS Architecture
![CSS-Technique](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/56002798-3c1e-48a1-8ab7-b7a1a332aeca/preprocessors-opt-84x84.jpg)
27. An Ultimate Guide To CSS Pseudo-Classes And Pseudo-Elements
![CSS-Technique](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/20244df4-8e57-4bb1-8abe-ef4319b21662/pseudo-classes-pseudo-elements-opt.jpg)
28. Truly Fluid Typography With vh And vw Units
![CSS-Technique](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8ea565a2-2b88-4350-830d-e035c241e796/fluid-type-opt.png)
29. Understanding The CSS Property Value Syntax
![CSS-Technique](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/885cb3de-1faa-4aaf-bdf0-72918b37f226/understanding-syntax-image-opt.jpg)
30. CSS 3D Cube
![CSS-Technique](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/293d1241-845f-4452-8912-5e25764b9801/browsers-axes-preview-opt.png)
31. Element Queries, And How You Can Use Them Today
![CSS-Technique](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cacb94e7-80d2-4035-8879-67de370c7f40/eqcss-logo-opt.png)
32. Upgrading CSS Animation With Motion Curves
![CSS-Technique](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/128c3b65-7a3c-4a3c-9b0e-6eed2f955313/bezier-animation-demo-opt.png)
33. CSS Inheritance, The Cascade And Global Scope: Your New Old Worst Best Friends
![CSS-Technique](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b468a3c3-2ca4-4eae-abc0-3e89ab57e204/rainbow-slinky-opt.png)
34. Let’s Play With Hardware-Accelerated CSS
![CSS-Technique](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8060e7e0-1b24-4050-a149-77de0678569e/5-gpu.png)
35. A Pure CSS3 Cycling Slideshow
![CSS-Technique](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/67f239f8-7fe5-482b-a53e-0d00f261ec5b/css3-slider-frontpage.jpg)
36. Beercamp: An Experiment With CSS 3D
![CSS-Technique](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e015068d-56d9-464f-9385-1ca0a806e637/animated-vector.gif)
37. Adventures In The Third Dimension: CSS 3D Transforms
![CSS-Technique](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cf312bc3-9702-4961-b178-22b76f094fcd/fig0739.jpg)
38. PrefixFree: Break Free From CSS Prefix Hell
![CSS-Technique](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/606cb0af-fa8d-47d5-81fd-abe9a5b69b20/prefixfree-main.jpg)
39. The Guide To CSS Animation: Principles and Examples
![CSS-Technique](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9a313ed1-da29-4ed1-ae13-34425e455099/motion.jpg)
40. An Introduction To CSS3 Keyframe Animations
![CSS-Technique](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/990557bf-f758-4d94-8885-b1763c43f968/css3-styling.jpg)
41. CSS3 vs. CSS: A Speed Benchmark
![CSS-Technique](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/184a6c9e-2403-47a7-9ad4-77847dfffaeb/mercury-full.jpg)
42. How To Use CSS3 Pseudo-Classes
![CSS-Technique](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e476b570-dabe-4d53-af4f-f448efcd65fe/css3.jpg)
43. Coding Q&A With Chris Coyier: Responsive Sprites And Media Query Efficiency
![CSS-Technique](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8e44ce85-a9cb-4fcc-b0da-129a3b57a79e/questions.jpg)
44. CSS Baseline: The Good, The Bad And The Ugly
![CSS-Technique](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/61cc9c63-2360-4762-8dac-26e006b33225/baseline.jpg)
![CSS-Technique](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/21b2f74e-fd89-4212-b034-0eb724286627/coding-500.jpg)
46. Classes? Where We’re Going, We Don’t Need Classes!
![CSS-Technique](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7796d7e9-755b-4090-87ef-e9038161c1a5/class-stop.jpg)
47. Coding Q&A With Chris Coyier: Box-Sizing and CSS Sprites
![CSS-Technique](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8e127a1c-6e76-49a1-835c-71820c53cb08/2666030594-e0e4782b0c-z.jpeg)
![CSS-Technique](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/01279eef-868c-423e-9118-1b0267bf0759/decoupling.png)
![CSS-Technique](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/72e3088d-d434-4acc-9e03-f419b9bcd928/sprite-ref.jpg)
50. An Introduction To Object Oriented CSS (OOCSS)
![CSS-Technique](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b58f9ca8-f975-4a2d-85d4-0497e395c21c/oocss-splash1.jpg)
51. Houdini: Maybe The Most Exciting Development In CSS You’ve Never Heard Of
![CSS-Technique](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/28c2fb4d-c26c-4381-886b-e4317431d40e/houdini-overview-opt.png)
52. Styling And Animating SVGs With CSS
![CSS-Technique](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f9af8598-3fdf-4f18-9e30-035d5eb58068/styling-and-animating-svgs-with-css-opt.png)
53. CSS-Driven Internationalization In JavaScript
![CSS-Technique](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2c71637e-d98c-4365-94fd-d6a8be08971e/js-screen-preview-opt.jpg)
![Smashing Editorial](https://www.smashingmagazine.com/images/logo/logo--red.png)
— Comments 373
fantastic list. some of these are techniques that I didn't know existed but should have been using all along...
Excellent work! My del.icio.us account just became 10x more valuable to me! Thanks