Vitaly Friedman

About The Author

Vitaly Friedman Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex UX, front-end and performance problems in large companies. Get in touch.

53 CSS-Techniques You Couldn't Live Without

Coding 498 CSS 212 Techniques 230

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

Make your first API call
Make your first API call

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 you should always have ready to hand if you develop web-sites. Links checked: Dec 2015.

You might want to take a look at the article Powerful CSS-Techniques For Effective Coding.

  1. CSS Based Navigation
CSS-Technique
  1. Navigation Matrix Reloaded
CSS-Technique
  1. CSS Tabs
CSS-Technique
  1. CSS For Bar Graphs
CSS-Technique
  1. Collapsing Tables: An Example
CSS-Technique
  1. CSS Image Replacement
CSS-Technique
  1. CSS Shadows (CSS Shadows Roundup)
CSS-Technique
  1. CSS Rounded Corners Roundup (Nifty Corners)
CSS-Technique
  1. Drop Cap - Capital Letters with CSS

CSS-Technique

  1. Define Image Opacity with CSS

CSS-Technique

  1. How to Create a Block Hover Effect for a List of Links
CSS-Technique

14.CSS Diagrams

CSS-Technique

  1. CSS Curves
CSS-Technique
  1. Footer Stick allows for the footer of a Web page to appear either at the bottom of the browser window or the bottom of the Web page content – whichever is visually lowest.
CSS-Technique
  1. CSS Image Map
CSS-Technique
  1. CSS Image Preloader
CSS-Technique
  1. CSS Image Replacement for Buttons
CSS-Technique
  1. CSS Map Pop
CSS-Technique
  1. PHP-based CSS Style Switcher
CSS-Technique
  1. CSS Unordered List Calender (CSS Styled Calender)
CSS-Technique
  1. Printing Web-Documents and CSS
CSS-Technique
  1. Improved Links-Display for Print-Layouts with CSS
CSS-Technique

  1. CSS-Submit Buttons CSS-Technique

  2. CSS Teaser Box

CSS-Technique
  1. CSS Tricks for Custom Bullets
CSS-Technique
  1. Ticked Off Links Reloaded
CSS-Technique
  1. CSS Zooming
CSS-Technique
  1. Creating a Star Rater using CSS
CSS-Technique
  1. The ways to style visited Links
CSS-Technique
  1. PDF, ZIP, DOC Links Labeling
CSS-Technique
  1. Image Floats without the Text Wrap
CSS-Technique
  1. Let visitors decide, whether or not will they open link in a new window
CSS-Technique
  1. Simple accessible external links
CSS-Technique
  1. Zebra Table with JavaScript and CSS
CSS-Technique
  1. Vertical Centering with CSS (Horizontal and Vertical Centering with CSS
CSS-Technique
  1. Dynamic Piechart with CSS
CSS-Technique
  1. Format Footnotes with CSS
CSS-Technique
  1. Snook’s Resizable Underlines
CSS-Technique
  1. Switchy McLayout: An Adaptive Layout Technique
CSS-Technique
  1. StyleMap: CSS+HTML Visual Sitemap
CSS-Technique
  1. Custom Reading Width
CSS-Technique
  1. CSS Alert Message
CSS-Technique
  1. CSS Production Notes
CSS-Technique

More Articles on Coding

(X)HTML template systems in PHP

by Sven Lennartz

Web developers find themselves sooner or later in a dire situation: their scripts become an entangled mess of code. Program logic, presentation logic and in a worst case scenario even layout and design are so interconnected with each other that the further development becomes difficult. Would one have thought ahead and had created a clear structure for the code - the so-called...

→ Read more

List of CSS Tools

by Sven Lennartz

What can be better than simple, useful and handy tools you can use "on the fly" in the development process? Whether you'd like to test font size, generate online-forms, create rollover-navigation, create a slide-show, format CSS code or optimize your code - you can use dozens of tools to make your life easier. We've collected them. At least most of them, and compiled them in a brief and...

→ Read more

Diagrams: Tools and Tutorials

by Vitaly Friedman

Being a web-developer means not only being able to design web-sites or program their functionality. Sometimes it also means to be able to explain complex issues clearly and be able to present to your potential customers reasonable and convincing arguments - in order to find the best compromise between the customer's wishes and the standards you respect. In fact, it is essential to make sure...

→ Read more