25 Helpful CSS Code Snippets for Developers
admin
09/10/2019
0 Comment
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 >>