More Tasty Bits of CSS Snippets

tasty-bits-css-friesthumb

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

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

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

[via]

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

[via]

3. Sticky Footer

#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

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.

[via]

5. Replace Text with an Image – Keep Your SEO

h1 {
   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

p:first-letter{
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

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

/* external links
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]

Eric Dye

I am an entrepreneur and human rights advocate. I spend most of my time as writer and editor for ChurchMag and Finding Justice, but you can also find me working on Live Theme and for the International Human Rights Group. All while enjoying my family and sipping espresso in Italy.

Trackbacks

What would you like to say?

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>