20 HANDY CSS SNIPPETS FOR WEB DESIGNERS

Below I have rounded up 20 Handy CSS Snippets for you to use in your Web Designs, these can come in very handy, so make sure you keep a copy of them!
AJAX LIKE IMAGE PRELOADER IN CSS

Grab a loader image and try this on one of your pages (preferably large images):

img { background: url(loader.gif) no−repeat 50% 50%; }

MULTIPLE BACKGROUND IMAGES

#multiple-images {
background: url(image_1.png) top left no-repeat,
url(image_2.png) bottom left no-repeat,
url(image_3.png) bottom right no-repeat;
}

CSS TOOLTIPS

a:hover {
background:#ffffff; /*BG color is a must for IE6*/
text-decoration:none;
}
a.tooltip span {
display:none;
padding:2px 3px;
margin-left:8px;
width:130px;
}
a.tooltip:hover span {
display:inline;
position:absolute;
background:#ffffff;
border:1px solid #cccccc;
color:#6c6c6c;
}

…and the HTML

This is a <a class="tooltip" href="#">Tooltip<span>This is the CSS Tooltip text.</span></a>.

HANDY CSS DEBUG SCRIPT

* { outline: 2px dotted red }
* * { outline: 2px dotted green }
* * * { outline: 2px dotted orange }
* * * * { outline: 2px dotted blue }
* * * * * { outline: 1px solid red }
* * * * * * { outline: 1px solid green }
* * * * * * * { outline: 1px solid orange }
* * * * * * * * { outline: 1px solid blue }

HIDE TEXT WITH TEXT-INDENT

h1 {
text-indent:-9999px; /*Hide Text, keep for SEO*/
margin:0 auto;
width:960px;
}

HIGHLIGHT LINKS THAT OPEN IN NEW WINDOW

a[target="_blank"]:before,
a[target="new"]:before {
margin:0 5px 0 0;
padding:1px;
outline:1px solid #333;
color:#333;
background:#ff9;
font:12px Verdana;
content: "\279C"; }

FIXED FOOTER

#footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}

/* IE 6 */
* html #footer {
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

CHANGE MOUSE CURSOR IN CSS

.element {
cursor:defaul;
}

.element {
cursor:pointe;
}

.element {
cursor:crosshai;
}

.element {
cursor:hel;
}

.element {
cursor:mov;
}

.element {
cursor:e-resiz;
}

.element {
cursor:n-resiz;
}

.element {
cursor:ne-resiz;
}

.element {
cursor:nw-resiz;
}

.element {
cursor:se-resiz;
}

.element {
cursor:sw-resiz;
}

.element {
cursor:progres;
}

.element {
cursor:tex;
}

.element {
cursor:wai;
}

REMOVE TEXTAREA SCROLLBAR IN IE

textarea {
overflow:auto;
}

STYLING LINKS BY FILE TYPE

/* external links */
a[href^="http://"]
{
padding-right: 13px;
background: url(external.gif) no-repeat center right;
}

/* emails */
a[href^="mailto:"]
{
padding-right: 20px;
background: url(email.png) no-repeat center right;
}

/* pdfs */
a[href$=".pdf"]
{
padding-right: 18px;
background: url(acrobat.png) no-repeat center right;
}

CROSS-BROWSER TRANSPARENCY

.element {
filter: alpha(opacity=50); /* internet explorer */
-khtml-opacity: 0.5; /* khtml, old safari */
-moz-opacity: 0.5; /* mozilla, netscape */
opacity: 0.5; /* fx, safari, opera */
}

CROSS-BROWSER MIN HEIGHT

.element {
min-height: 500px;
height:auto !important;
height: 500px;
}

ADDING SHADOWS TO YOUR CSS ELEMENTS

.element{
box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
}

ADDING ROUNDED CORNERS TO YOUR CSS ELEMENTS

.round{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
}

BEAUTIFUL BLOCKQUOTES

blockquote {
background:#f9f9f9;
border-left:10px solid #ccc;
margin:1.5em 10px;
padding:.5em 10px;
quotes:"\201C""\201D""\2018""\2019";
}
blockquote:before {
color:#ccc;
content:open-quote;
font-size:4em;
line-height:.1em;
margin-right:.25em;
vertical-align:-.4em;
}
blockquote p {
display:inline;
}

PRETTY AMPERSANDS

.amp {
font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;
font-style: italic;
font-weight: normal;
}

ADD AN IMAGE NEXT TO ALL EMAIL LINKS WITH CSS

a[href^="mailto:"] {
background: url(images/email.png) no-repeat rightright top;
padding-right:10px;
}

FLIP AN IMAGE IN DIFFERENT DIRECTIONS

img {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}

DROP CAP

p:first-letter{
display:block;
margin:5px 0 0 5px;
float:left;
color:#FF3366;
font-size:60px;
font-family:Georgia;
}

CENTER A WEBSITE

.wrapper {
width:960px;
margin:0 auto;
}

…and there we have it! I shall be adding a part 2 with many more snippets very soon.