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
[cc lang=”css”].wrapper {
width:960px;
margin:auto;
}[/cc]
There’s nothing worse than going to a website that is aligned to the left.
[via]
2. Center Vertically
[cc lang=”css”].container {
min-height: 10em;
display: table-cell;
vertical-align: middle;
}[/cc]
This will vertically center content that’s in a container (like in a cell of a HTML table).
[via]
3. Sticky Footer
[cc lang=”css”]#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’);
}
[/cc]
Glue that footer to the bottom!
[via]
4. Image Loading
[cc lang=”css”]img {
background: url(loader.gif) no−repeat 50% 50%;
}
[/cc]
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
[cc lang=”css”]h1 {
text-indent:-9999px;
margin:0 auto;
width:400px;
height:100px;
background:transparent url(“images/logo.jpg”) no-repeat scroll;
}[/cc]
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
[cc lang=”css”]p:first-letter{
display:block;
margin:5px 0 0 5px;
float:left;
color:#000;
font-size:60px;
font-family:Georgia;
}[/cc]
Make the first letter in your article bigger. Very cool. Very classic.
[via]
7. Transparency
[cc lang=”css”].transparent {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity:0.5;
opacity:0.5;
}
Example:
[/cc]
Make any box on your website transparent. Just tweak the “opacity” to adjust accordingly.
[via]
8. Link Style Based on File Type
[cc lang=”css”]/* 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);
}[/cc]
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]
[…] 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 […]