Yesterday, we fed you 8 tasty bits of CSS snippets. I hope you enjoyed them.
Here are 8 more tasty bits of CSS snippets to fill your coding appetite.
Enjoy!
1. Center Your Website Horizontally
width:960px;
margin:auto;
}
There’s nothing worse than going to a website that is aligned to the left.
[via]
2. Center Vertically
min-height: 10em;
display: table-cell;
vertical-align: middle;
}
This will vertically center content that’s in a container (like in a cell of a HTML table).
[via]
3. Sticky Footer
position:fixed;
left:0px;
bottom:0px;
height:32px;
width:100%;
background:#333;
}
/* 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');
}
Glue that footer to the bottom!
[via]
4. Image Loading
background: url(loader.gif) no−repeat 50% 50%;
}
Instead of staring at a blank screen while a high-res image loads, add an animated GIF image that gives a visual confirmation that everything’s okay and the image is on its way.
[via]
5. Replace Text with an Image – Keep Your SEO
text-indent:-9999px;
margin:0 auto;
width:400px;
height:100px;
background:transparent url("images/logo.jpg") no-repeat scroll;
}
This will allow you to replace the title text in your header with an image, while keeping the text alive for SEO.
[via]
6. Drop Cap
display:block;
margin:5px 0 0 5px;
float:left;
color:#000;
font-size:60px;
font-family:Georgia;
}
Make the first letter in your article bigger. Very cool. Very classic.
[via]
7. Transparency
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity:0.5;
opacity:0.5;
}
Example:
<div class="box transparent">Your content</div>
Make any box on your website transparent. Just tweak the “opacity” to adjust accordingly.
[via]
8. Link Style Based on File Type
The ^= specifies that we want to match links that begin with the http://
*/
a[href^="http://"]{
padding-right: 20px;
background: url(external.gif) no-repeat center right;
}
/* emails
The ^= specifies that we want to match links that begin with the mailto:
*/
a[href^="mailto:"]{
padding-right: 20px;
background: url(email.png) no-repeat center right;
}
/* pdfs
The $= specifies that we want to match links whose hrefs end with ".pdf".
*/
a[href$=".pdf"]{
padding-right: 20px;
background: url(pdf.png) no-repeat center right;
}
/* zip
Same as above but for zip files and it adds an icon at the right of the link. Therefore the :after
*/
a[href$=".zip"]:after{
content: url(icons/zip.png);
}
This is really cool. I can’t think of how I could use this on any current projects … yet 
[via]
I hope this saves you some time. I know that I’ve looked and looked for some of these, before. It’s nice to know where you can find them!
Look for a last few bits, tomorrow!
[via SpeckyBoy]
Trackbacks/Pingbacks:
[...] hope these snippets come in handy. I’ve used a few myself, and they’re golden.More, tomorrow.[via SpeckyBoy]Related PostsAbout the Author /**/ Eric Dye I believe in media that matters. I have [...]
[...] you enjoyed any of these morsels, be sure to check-out these Tasty Bits of CSS Snippets and More Tasty Bits of CSS Snippets!Also, don’t forget to drop any of your own favorite CSS snippets in the comments [...]