Menu +

Category: Css

sprite rollover effect

Sprites eliminate the need for multiple images by using one graphic image which speeds up the loading of your website. The idea here is to define a height and width to the image then on the hover state move the position of the graphic. [code type=”css” title=”Sprite Rollover Effect”]a { background: url(sprite_image.png) no-repeat; height: 30px; […]

Writing Clean Organized Style Sheets

Here’s a few tips that will help make editing your css a little easier in the future. Using comments will help you quickly navigate to areas of interest in your document. Keep the text indent consistent.  Most text editors will allow you to set tabs which will help keep the text alignment the same throughout […]

Box Shadow with Css3

You can add multiple drop shadows to a box using a comma seperator.  Add 2-4 length values, a color (optional) and an optional inset shadow.  Here’s how… The first value defines the horizontal offset of the shadow.  A positive value will offset the shadow to the right of the element.  A negative value will offset […]