• Create a Mac style CSS Dock Menu
  

  Really nice tutorial for creating a cool and fancy navigation using CSS and a Jquery Javascript library. Comes as complete Download, including a icon set.

• How to: CSS large Background
  

  Here you’ll find instructions how to integrate a large image as webpage background properly.

• Blurry Background Effect
  

  A very nice and eye teasing visual effect, unfortunately not working for Internet Explorer 6.

• 12 Useful Web Tools for Designers
  

  Several neat tools making a webdesigners daily work less miserable, a color schemer, tools for creating templates, favicons, background patterns or fonts.

• Creating scalable Layouts
  

  As the design of a site is confronted with a huge range of completly different screen resolutions, it should be pretty flexible. Should. Here’s ecplain how to achieve that.

• Massive collection of CSS hints
  

  Ok, this might be quite an old post, but it’s still very useful and just through it’s coverage and useful tricks, all the techniques are great helpers.

You are web designer and have to work full contact with the customer? Then you will know this situation, the customer wants that headline bold and purple – no, make it green or is blue a better choice? This goes back and forth, which would make you go crazy if you had to do the changes on thousands of subpages. Using CSS you do changes faster than the customer decides between green and yellow.

Ok, enough chit chat here are some tricks to get more effective:

• Assign multiple classes on one element

  This is a real saver, one simply creates a “virtual” class by combing several ones, which is highly flexible and lowers the amount classes you will have to use.

  Example:

  The text should be black, underlined and bold, now instead of using a single one containing all three attributes, you setup three with each single value (black, underlined, bold)

  <style type="text/css">
  .black {color: #000;}
  .underlined {text-decoration: underlined;}
  .bold {font-weight: bold;}
  </style>
  
  <span class="black underlined bold">the text</span>
  

  On the first hand this looks intricate, one could do this with a single class, but remember if you combine the three classes, you’ll get six “virtual” ones.

• Using multiple stylesheets

  Splitting up the a single stylesheet first of all makes it easier to maintain for the web programmer.

  <style type="text/css">
  @import "main.css";
  @import url("additional.css");
  </style>

  It’ also possible to embed further .css files into a specific .css file by integrating “@import url(“additional.css”); right at the top of the .css document.

• Abbreviations
  
  As there are always many roads to reach your destination, CSS is no exception. One can shorten the CSS code to increase the clearness of the structure.
  Example:
  Instead of:

  .classname{
  margin-top: 10px;
  margin-right: 15px;
  margin-bottom: 20px;
  margin-left: 25px;
  }

  the abbreviated version should be used:

  .classname{margin-top: 10px 15px 20px 25px;}

  The order of the values is important, they are arranged clock wise:
  top (12 o’clock), right (3 o’clock), bottom (6 o’clock), left (9 o’clock),
  That also works with the attributes padding and border.
  
  Compressing attribute values

  Several attributes can be concentrated in a single one.

  Example:
  Instead of:

  .classname{
  border-width: 10px;
  border-style: solid;
  border-color: #000;
  }

  Use:

  .classname{border: 10px solid #000;}

  This also works on “font” and “background”, i.e. .

http://www.hongkiat.com/blog/40-most-wanted-wordpress-tricks-and-hacks