More Tasty Bits of CSS Snippets


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.


1. Center Your Website Horizontally

.wrapper {

There’s nothing worse than going to a website that is aligned to the left.


2. Center Vertically

.container {
   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).


3. Sticky Footer

#footer {
/* IE 6 */
* html #footer {
   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!


4. Image Loading

img {
   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.


5. Replace Text with an Image – Keep Your SEO

h1 {
   margin:0 auto;
   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.


6. Drop Cap

margin:5px 0 0 5px;

Make the first letter in your article bigger. Very cool. Very classic.


7. Transparency

.transparent {
<div class="box transparent">Your content</div>

Make any box on your website transparent. Just tweak the “opacity” to adjust accordingly.


8. Link Style Based on File Type

/* external links
The ^= specifies that we want to match links that begin with the 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:

    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".

    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

    content: url(icons/zip.png);

This is really cool. I can’t think of how I could use this on any current projects … yet :-)


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]


Eric Dye

I am a blogger, business owner and lover of coffee. I spend most of my time as Programs Director for Open Church, but you'll also find me as a writer and editor for ChurchMag, as well as working on Live Theme and ChurchMag Press. All while enjoying my family and sipping espresso in Italy.


What would you like to say?

Your email address will not be published. Required fields are marked *