25 Helpful CSS Code Snippets for Developers

25 Helpful CSS Code Snippets for Developers

Category: Coding,CSS - DHTML,
Date: 12-26-2013
CSS codes snippets are useful code blocks which can help you in your web development process. Plain and simple. You can save them and use them later on your projects. It’s recommended to have a strong database of css snippets to speed up your coding process. In this article from 9kDesigns you’ll find both, interesting css codes and basic ones from my personal collection. Note that most of them were used in different projects. Happy coding!

Here are the first 5 CSS code snippets from this article - but be sure to click link at bottom for all 25 CSS Code Snippets!

1. Style links depending on file format

/* external links */
a[href^="http://"]{
	padding-right: 20px;
	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: 20px;
	background: url(pdf.png) no-repeat center right;
}

2. Cross Browser Clearfix

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

.clearfix { display: inline-block; }

/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

3. Cross Browser Inline-Block

li {
     width: 200px;
     min-height: 250px;
     border: 1px solid #000;
     display: -moz-inline-stack;
     display: inline-block;
     vertical-align: top;
     margin: 5px;
     zoom: 1;
    *display: inline;
    _height: 250px;
}

4. Min-height in IE

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

5. Fullscreen Backgrounds with CSS3

html {   
    background: url('images/background.jpg') no-repeat center center fixed;   
    -webkit-background-size: cover;  
    -moz-background-size: cover;  
    -o-background-size: cover;  
    background-size: cover;  
}

...and there are 20 more CSS code snippets here for your toolbox - get all 25 CSS Code Snippets >>


loading..

Comments

Add New Comment

userpic

Featured Web Templates For Sale

Design Blog Categories


Recent Blog Posts

Locate the designer of your dreams in our Designer Portfolio area.
Submit your website designs to our moderated Design Gallery.

Over 25,000 incredible designs to choose from, instant download.

Tons of downloadable templates, logos, and design components - free and paid.