About The Author

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. When he is not writing or speaking at a conference, he’s most probably running … More about Vitaly Friedman

Powerful CSS-Techniques For Effective Coding

      Sometimes being a web-developer is just damn hard. Particularly coding is often responsible for slowing down our workflow, reducing the quality of our work and sleepless nights with pizza and coffee laying around the laptop. Reason: with a number of incompatibility issues and quite creative rendering engines it sometimes takes too much time to find a workaround for some problem without addressing browsers with quirky hacks. And that’s where ready-to-use solutions developed by other designers come in handy.

      Sometimes being a web-developer is just damn hard. Particularly coding is often responsible for slowing down our workflow, reducing the quality of our work and sleepless nights with pizza and coffee laying around the laptop. Reason: with a number of incompatibility issues and quite creative rendering engines it sometimes takes too much time to find a workaround for some problem without addressing browsers with quirky hacks. And that’s where ready-to-use solutions developed by other designers come in handy.

      One year ago we’ve published the post with 53 CSS-Techniques You Couldn’t Live Without where we provided references to the most useful CSS-techniques which are often used in almost every project. Over the last year we’ve been observing what’s happening with the CSS-based web-development, and we collected most useful CSS-techniques we’ve stumbled upon — for us and for our readers.

      Further Reading on SmashingMag:

      In this post we present 50 new CSS-techniques, ideas and ready-to-use solutions for effective coding. You definitely know some of them, but definitely not all of them. Some technique is missing? Let us know in the comments to this post.

      Thanks to all developers who contributed to the CSS-based design over the last year. The community appreciates it.

      CSS-Techniques

      1. CSS Server-Side Pre-Processor
      CSS-Technique
      1. Advanced CSS Menu
      CSS-techniques - Advanced CSS Menu
      1. Styling File Inputs with CSS and the DOM

      File inputs (<input type=“file” />) are the bane of beautiful form design. No rendering engine provides the granular control over their presentation designers desire. This simple, three-part progressive enhancement provides the markup, CSS, and JavaScript to address the long-standing irritation.

      CSS-Technique
      1. A Savvy Approach to Copyright Messaging

      Derek Powazek suggests adding a copyright message to a photo and use CSS to crop its view. This is supposed to accomplish the goal of adding robust copyright information without defacing your own work.

      Screenshot
      1. Advanced CSS Menu Trick

      What we want to do here, is instead of simply altering the state of the navigation item the user is currently rolling over, we want to alter the non navigation items as well.

      Screenshot
      1. CSS hover effect
      CSS-techniques - CSS hover effect | Veerle's blog
      1. Creating a table with dynamically highlighted columns like Crazy Egg’s pricing table
      CSS-techniques - Creating a table with dynamically highlighted columns like Crazy Egg's pricing table
      1. Rediscovering the Button Element
      CSS-techniques - Particletree » Rediscovering the Button Element
      1. A CSS styled table version 2
      CSS-techniques - A CSS styled table version 2 | Veerle's blog
      1. CSS Step Menu

      A method of designing the so-called step-menus, which have some steps users have to go through in order to achieve some aim. This menu offers a varying amount of steps, dependent upon the type of user accessing the application.

      Stepmenu

      1. Creating bulletproof graphic link buttons with CSS | 456 Berea Street
      CSS-techniques - Creating bulletproof graphic link buttons with CSS | 456 Berea Street
      1. Better Ordered Lists (Using Simple PHP and CSS)

      Ordered lists are boring! Sure you can apply background images and do quite a bit of sprucing up to a regular ordered list, but you just don’t get enough control over the number itself.

      Screenshot
      1. CSS Dock Menu
      CSS-techniques - CSS Dock Menu
      1. Fade Out Bottom

      This is a demonstration of the effect where the bottom of the page seems to fade out. The technique makes use of an fixed position div (bottom: 0%) with a transparent PNG image and a high z-index value.

      CSS-techniques - Fade Out Bottom
      1. How to Style an A to Z Index with CSS
      CSS-techniques - How to Style an A to Z Index with CSS | Smiley Cat Web Design
      1. CSS List Boxes

      Using a simple unordered list this experiment aligns the boxes across the page with the end result being to showcase items like services, products, or specials. One of cool thing about this — if you turn off styles — is the extractable semantics with the headings and paragraphs used.

      List Boxes

      1. How-to create a “Table of Contents” Navigation

      In as little as 8 lines of HTML, and 5 lines of CSS, the Table Of Contents Navigation block can be integrated in your site ready for even more styling.

      Table of Contents

      1. CSS Recipe for Success
      CSS-techniques - CSS - A Recipe for Success
      1. Partial Opacity
      CSS-techniques - Stu Nicholls | CSSplay | Partial Opacity
      1. CSS Double Lists
      CSS-techniques - CSS: Double Lists | Mike’s Experiments | MikeCherim.com
      1. Perspective Text with CSS
      CSS-techniques - Mike’s Experiments: Archives Page | A Record of My Madness | Powered by the GreenBeast CMS RSS Newsmaker - -
      1. Better Email Links: Featuring CSS Attribute Selectors

      Learn how to generate code for displaying the e-mail automatically once mailto is used. CSS Attribute Selectors in action which is not supported by Internet Explorer 6 and 7.

      Screenshot
      1. CSS: Menu Descriptions

      This is a CSS technique that could be useful if you want to give users accessible added content such as tool-tips, notifications, or alerts, without adding unnecessary clutter to your page. And since it doesn’t rely of JavaScript, it should be useful to everyone, even disabled users.

      Screenshot

      Further Techniques

      1. CSS Transparency Settings for All Browsers
      CSS-techniques - CSS Transparency Settings for All Browsers
      1. Custom Reading Containers

      This amazing little script allows the user to resize any container.

      1. Eric Meyer’s CSS Reset
      CSS-techniques - CSS Tools: Reset CSS
      1. PNG Overlay

      Create a transparent PNG overlay which can be used as a mask / frame around regular JPEG or GIF so users can upload photos without having to worry about using any graphics program to apply filters, plus it saves time.

      1. Turning Lists into Trees
      CSS-techniques - odyniec.net
      1. Create Resizable Images With CSS
      CSS-techniques - Create Resizable Images With CSS | Smiley Cat Web Design