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 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!
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; }
6. Triangular List Bullets
ul { margin: 0.75em 0; padding: 0 1em; list-style: none; } li:before { content: ""; border-color: transparent #111; border-style: solid; border-width: 0.35em 0 0.35em 0.45em; display: block; height: 0; width: 0; left: -1em; top: 0.9em; position: relative; }
7. Responsive Background-Images
.background { display: block; height: 0; padding-bottom: 80%; background: url(images/bg.jpg) no-repeat; background-size: 100%; text-indent: -9999px; }
8. Eric Meyer’s Reset Reloaded + HTML 5 from Boilerplate
/* html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline) v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark html5doctor.com/html-5-reset-stylesheet/*/ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } article, aside, figure, footer, header, hgroup, nav, section { display:block; } nav ul { list-style:none; } blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; } ins { background-color:#ff9; color:#000; text-decoration:none; } mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; } /* tables still need cellspacing="0" in the markup */ table { border-collapse:collapse; border-spacing:0; } hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; } input, select { vertical-align:middle; } /* END RESET CSS */
9. CSS3 @media queries
/* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ } /* Large screens ----------- */ @media only screen and (min-width : 1824px) { /* Styles */ } /* iPhone 4 ----------- */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ }
10. CSS3 Opacity to all browser
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity:1; -khtml-opacity: 1; opacity: 1;
11. Cross browser input styling
.input.default { appearance: none; width: 180px; height: 30px; background-color: white; border: 1px solid #c9c9c9; border-radius: 3px; box-shadow: none; outline: none; padding: 4px; transition: all .2s ease-in-out } .input.default:focus { outline: none; box-shadow: 0 0 5px 0 #ffcc00 } .input.default:-ms-input-placeholder { color: #A9A9A9 } .input.default::-moz-placeholder { opacity: 1; color: #A9A9A9 } .input.default::-ms-clear { display: none } .textarea.default { min-height: 80px; max-height: 200px } .textarea.default::-webkit-resizer { width: 0; height: 0; border-bottom: 15px solid #c9c9c9; border-left: 15px solid transparent }
12. Responsive images cross browser hack
img { border: none; max-width: 100%; height: auto; width: auto \9; /* Old IE */ } .image-container { width: 100%; }
13. CSS base64 SVG Backgroundimage
background-image:url(data:image/svg+xml;base64,XXXXXX);
14. CSS3 Gradients
/* Gradient for Chrome / Safari */ background: -webkit-gradient(linear, center top, center bottom, from(#fbfdfd), to(#dde1e3)); /* Gradient for Firefox */ background: -moz-linear-gradient(center top, #fbfdfd, #dde1e3); /* IE10 Gradient */ background: -ms-linear-gradient(#fbfdfd, #dde1e3); /* O Gradient */ background: -o-linear-gradient(#fbfdfd, #dde1e3); /* W3C working draft Gradient */ background: linear-gradient(#fbfdfd, #dde1e3); /* Gradient for IE 9/8/7 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbfdfd', endColorstr='#dde1e3');
15. CSS3 – box-sizing
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
16. CSS3 Background image transparency
.foo { position:relative; z-index:1; } .foo:before { content:""; position:absolute; z-index:-0; top:0; bottom:0; left:0; right:0; background:url("path-to-image.jpg"); opacity:0.5; }
17. Fake Pixel Perfect
/* A nice way to overlay a PSD over the HTML for pixel perfect styling */ .yourdiv { background: url("/images/image.png") no-repeat scroll 0 0 transparent; height: 1010px; left: 0; opacity: 0.5; position: absolute; top: 0; width: 1280px; z-index: 9999; }
18. CSS3 Media Query Reporter
body:after { content: "less than 320px"; font-size: 300%; font-weight: bold; position: fixed; bottom: 100px; width: 100%; text-align: center; background-color: hsla(1,60%,40%,0.4); color: #fff; } @media only screen and (min-width: 320px) { body:after { content: "320 to 480px"; background-color: hsla(90,60%,40%,0.4); } } @media only screen and (min-width: 480px) { body:after { content: "480 to 768px"; background-color: hsla(180,60%,40%,0.4); } } @media only screen and (min-width: 768px) { body:after { content: "768 to 1024px"; background-color: hsla(270,60%,40%,0.4); } } @media only screen and (min-width: 1024px) { body:after { content: "1024 and up"; background-color: hsla(360,60%,40%,0.4); } }
19. CSS break/wrap long text
a { -ms-word-break: break-all; word-break: break-all; // Non standard for webkit word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; }
20. Target only Firefox with CSS
@-moz-document url-prefix() { ul.nav li a { padding:0 15px 2px 15px; } }
21. CSS3 box shadow on bottom of an element only
-webkit-box-shadow:0 4px 4px -4px #000; box-shadow:0 4px 4px -4px #000;
22. Replacing the -9999px hack
.hide-text { text-indent: 100%; white-space: nowrap; overflow: hidden; }
23. Twitter style like for glowing box
/* Twitter-like glowing box */ input[type=text], textarea { transition: all 0.30s ease-in-out; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; border:#fff 1px solid; outline:none; padding: 3px 0px 3px 3px; margin: 5px 1px 3px 0px; border: 1px solid #DDDDDD; } input[type=text]:focus, textarea:focus { box-shadow: 0 0 5px rgba(81, 203, 238, 1); -webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1); -moz-box-shadow: 0 0 5px rgba(81, 203, 238, 1); padding: 3px 0px 3px 3px; margin: 5px 1px 3px 0px; border: 1px solid rgba(81, 203, 238, 1);; }
24. Nice CSS3 hover link effect
a { color: #f65e0f; text-decoration: none; border-bottom: 1px solid transparent; transition: all .15s ease-in-out; -o-transition: all .15s ease-in-out; -moz-transition: all .15s ease-in-out; -webkit-transition: all .15s ease-in-out; } a:hover { border-bottom-color: #f65e0f; transition: all .15s ease-in-out; -o-transition: all .15s ease-in-out; -moz-transition: all .15s ease-in-out; -webkit-transition: all .15s ease-in-out; }
25. CSS3 Webkit & Opera only
// Webkit based only
@media screen and (-webkit-min-device-pixel-ratio:0) // Opera only @media all and (-webkit-min-device-pixel-ratio:10000), not all
and (-webkit-min-device-pixel-ratio:0)
Comment With The Topic