Many people wonder how to create a dotted line effect that automatically adjusts its length based on the content around it.

Click to enlarge

1. The HTML:

   <div class="food_menu">
       <div class="product">
           <div class="dotted"></div>
           <div class="item">Chocolate Moose Cake</div>
           <div class="price">$7.99</div>
       </div>
       <div class="product">
           <div class="dotted"></div>
           <div class="item">Molten Chocolate Brownie With Blue Bell® Ice Cream</div>
           <div class="price">$11.99</div>
       </div>
       <div class="product">
           <div class="dotted"></div>
           <div class="item">Apple Pie</div>
           <div class="price">$5.99</div>
       </div>
   </div>      
   

2. The CSS:

   .food_menu{
           float: left;
   	width: 560px;
   	background: #F4F4F4;
   	padding: 20px;
   }
   .product{
   	clear: both;
   	float: left;
   	width: 100%;
   	position: relative;
   }
   .dotted{
           position: absolute;
           left: 0;
           top: 0;
           width: 100%;
   	height: 16px;
           border-bottom: 1px dotted #AAA;
   	z-index: 1;
   }
   .item{
   	display: block;
   	float: left;
   	width: auto;
   	height: 20px;
   	position: relative;
   	background: #F4F4F4;
   	padding-right: 10px;
   	z-index: 2;
   }
   .price{
   	display: block;
   	float: right;
   	width: auto;
   	height: 20px;
   	text-align: right;
   	background: #F4F4F4;
   	z-index: 2;
   	position: relative;
   	padding-left: 10px;
   }
   

3. The result:

Easy as pie! ‐ See what I did there?

1. Create an anchor tag:

   <a title="Home" href="index.php">Home</a>

2. Next, turn it into a block (with the same dimensions as the background image) and position the text offscreen:

   a[title="Home"]{
     display: block;
     width: 20px;
     height: 20px;
     text-indent: -9999px;
     overflow: hidden;
   }
   

3. Give it a background in css:

   background: url('images/home.png') no-repeat;

4. Next, give it a different background for when you hover:

   a[title="Home"]:hover{ 
     background: url('images/home-hover.png') no-repeat;
   }
   

   You’ll notice that even though the text is offscreen, the area where it would be is still an active link. However, it swaps the background image everytime you hover. Hence, creating an image rollover with just css. Have fun!

P.S. You could also use a sprite to accomplish this using the x and y coordinates.

If you want a really cool looking box shadow then check out this one:

div#content{
  -moz-box-shadow: 1px 1px #CCCCCC, 2px 2px #CCCCCC, 3px 3px #CCCCCC, 4px 4px #CCCCCC, 5px 5px #CCCCCC, 6px 6px #CCCCCC, 7px 7px #CCCCCC, 8px 8px #CCCCCC, 9px 9px #CCCCCC, 10px 10px #CCCCCC, 11px 11px #CCCCCC, 12px 12px #CCCCCC, 13px 13px #CCCCCC, 14px 14px #CCCCCC, 15px 15px #CCCCCC;
  -webkit-box-shadow: 1px 1px #CCCCCC, 2px 2px #CCCCCC, 3px 3px #CCCCCC, 4px 4px #CCCCCC, 5px 5px #CCCCCC, 6px 6px #CCCCCC, 7px 7px #CCCCCC, 8px 8px #CCCCCC, 9px 9px #CCCCCC, 10px 10px #CCCCCC, 11px 11px #CCCCCC, 12px 12px #CCCCCC, 13px 13px #CCCCCC, 14px 14px #CCCCCC, 15px 15px #CCCCCC;
  box-shadow: 1px 1px #CCCCCC, 2px 2px #CCCCCC, 3px 3px #CCCCCC, 4px 4px #CCCCCC, 5px 5px #CCCCCC, 6px 6px #CCCCCC, 7px 7px #CCCCCC, 8px 8px #CCCCCC, 9px 9px #CCCCCC, 10px 10px #CCCCCC, 11px 11px #CCCCCC, 12px 12px #CCCCCC, 13px 13px #CCCCCC, 14px 14px #CCCCCC, 15px 15px #CCCCCC;
}

Try it out and look at the result!

There is a cool css effect known as the box-shadow and it is cool!

This is the basic one:

div#content{
  -moz-box-shadow: 2px 2px 2px #333;
  -webkit-box-shadow: 2px 2px 2px #333;
  box-shadow: 2px 2px 2px #333;
}

The first value is the x-axis, the second is the y-axis and the third is the spread. Then you just set the colour.