CSS is a beautiful language but it can also be frustrating at times. Certain CSS solutions don’t work on certain browsers (cough Internet Explorer cough) and much of your time can be spent debugging code.
Thankfully there are lots of great CSS snippets available online that fix common problems and design issues. In this article we have listed 30 CSS snippets that we think you will find very useful.
The Code
1. Chris Poteet’s CSS Browser Reset
Resetting your CSS style allows you to stop cross browser differences. Chris Proteet’s reset code doesn’t work in IE6 however this shouldn’t be a concern any more with use of the browser dropping below 1% in the USA.
/*
Reset Default Browser Styles
- Place first in the listing of external style sheets for cascading.
- Be sure to explicitly set margin/padding styles.
- Styles are not reset that have to do with display (block, inline) are not reset.
By: Chris Poteet & various influences
*/
* {
vertical-align: baseline;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: none;
padding: 0;
margin: 0;
}
body {
padding: 5px;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {
margin: 20px 0;
}
li, dd, blockquote {
margin-left: 40px;
}
dt {
font-weight: bold;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
2. Eric Meyer’s CSS Reset
Eric Meyer’s CSS code resets is one of the most popular CSS snippets. It even found it’s way into the Blueprint CSS Framework.
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
3. How to Create Multiple Borders in CSS3
A cool technique using the box-shadow property that allows you to create multiple borders around an object.
box-shadow:
0 0 0 2px #000,
0 0 0 3px #999,
0 0 0 9px #fa0,
0 0 0 10px #666,
0 0 0 16px #fd0,
0 0 0 18px #000;
4. Tucked Corners
This CSS code will give you the cool ‘tucked corners’ effect that is used on the Gravatar home page.
div.tucked-corners {
background: #f6f6f6;
height: 380px;
margin: 50px auto;
padding: 10px;
position: relative;
width: 580px;
-webkit-box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
-moz-box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
}
span.tucked-corners {
background: #c4453c;
display: block;
height: 380px;
position: relative;
width: 580px;
-webkit-box-shadow: inset 0 0 10px hsla(0,0%,0%,.25);
-moz-box-shadow: inset 0 0 10px hsla(0,0%,0%,.25);
box-shadow: inset 0 0 10px hsla(0,0%,0%,.25);
}
/* Top Corner Effect */
.top-corners:after,
.top-corners:before {
background: #e6e6e6;
content: '';
height: 50px;
position: absolute;
top: -25px;
width: 100px;
z-index: 10;
-webkit-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
-moz-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
}
.top-corners:after {
left: -50px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.top-corners:before {
right: -50px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
/* Bottom Corner Effect */
.bottom-corners:after,
.bottom-corners:before {
background: #e6e6e6;
content: '';
height: 50px;
position: absolute;
bottom: -25px;
width: 100px;
-webkit-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
-moz-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
}
.bottom-corners:after {
left: -50px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.bottom-corners:before {
right: -50px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
5. iPad-Specific CSS
Change the general layout of ipad screens and portrait and landscape modes.
@media only screen and (device-width: 768px) {
/* For general iPad layouts */
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
/* For portrait layouts only */
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
/* For landscape layouts only */
}
6. Style links depending on file format
A short CSS snippet that changes the styling of external links, email links and links to pdf documents.
/* 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;
7. Drop Caps
A great cross-browser snippet that lets you make the first letter of a paragraph stand out.
.firstcharacter { float: left; color: #903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }
This can also be achieved using CSS3 however it doesn’t work on IE9.
p:first-child:first-letter { float: left; color: #903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }
8. CSS Sticky Footer
Create a sticky footer for your page. The solution works on all major browsers including Google Chrome and IE8.
CSS
/*
Sticky Footer Solution
by Steve Hatcher
http://stever.ca
http://www.cssstickyfooter.com
*/
* {margin:0;padding:0;}
/* must declare 0 margins on everything, also for main layout components use padding, not
vertical margins (top and bottom) to add spacing, else those margins get added to total height
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto;
padding-bottom: 150px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
/* IMPORTANT
You also need to include this conditional style in the of your HTML file to feed this style to IE 6 and lower and 8 and higher.
*/
HTML
<div id="wrap">
<div id="main">
</div>
</div>
<div id="footer">
</div>
9. Image Replacement Technique
A handy way of replacing a text page element with an image. The snippet addresses a problem from another solution in which Firefox users noticed a dotted border that goes to the left of the screen.
a.replacement
{
background: url(dotted-border.png) no-repeat;
height: 44px;
width: 316px;
display: block;
text-indent: -9999px;
overflow: hidden; /*Add this line to the image replacement method*/
}
10. Set body font-size to 62.5% for Easier em Conversion
If you want to have a more flexible layout, you should use em instead of pixels or points. By setting your font size at 62.5% you can easily set your font using em as the value will be a tenth of pixel value.
body {
font-size: 62.5%; /* font-size 1em = 10px */
}
p {
font-size: 1.2em; /* 1.2em = 12px */
}
11. Vertically Align Text
If you set the line-height of your paragraph as the same size as it’s parent division you can easily center the text vertically.
div { width:100px; height:100px; }
div p { line-height:100px; }
12. How to Create 3D Text With CSS3
Using the text-shadow property, this snippet will help you create 3D text using CSS only.
p.threeD
{
text-shadow:
-1px 1px 0 #ddd,
-2px 2px 0 #c8c8c8,
-3px 3px 0 #ccc,
-4px 4px 0 #b8b8b8,
-4px 4px 0 #bbb,
0px 1px 1px rgba(0,0,0,.4),
0px 2px 2px rgba(0,0,0,.3),
-1px 3px 3px rgba(0,0,0,.2),
-1px 5px 5px rgba(0,0,0,.1),
-2px 8px 8px rgba(0,0,0,.1),
-2px 13px 13px rgba(0,0,0,.1)
;
}
13. Wrapping Long URLs and Text Content with CSS
This snippet will stop long lines of text extending over the content area by making sure the content wraps to fit the content width.
pre {
white-space: pre; /* CSS 2.0 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3.0 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP Printers */
word-wrap: break-word; /* IE 5+ */
}
14. Fancy Ampersand
Make your ampersands stand out using this short snippet. Simply change the font-family to suit your preference.
.amp {
font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;
font-style: italic;
font-weight: normal;
}
15. Pull Quotes for Improved Reading
Make your quotes stand out more by floating them to the right or left hand side of your content and wrapping content around it.
.pullquote {
width: 300px;
float: right;
margin: 5px;
font-family: Georgia, "Times New Roman", Times, serif;
font: italic bold #ff0000 ; }
16. Rounded Borders Around Images
With CSS3 you can easily place rounded borders around your images using this snippet.
img {
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
}
17. Image Preloader
Load a small gif in the background of an image first so that it is showed before the main image loads.
img
{
background: url(img/preloader.gif) no-repeat 50% 50%;
}
18. CSS3 Opacity
By using the opacity property, which lets you see through an element, you can create a layered textured background.
div.L1 { background:#036; opacity:0.2; height:20px; }
div.L2 { background:#036; opacity:0.4; height:20px; }
div.L3 { background:#036; opacity:0.6; height:20px; }
div.L4 { background:#036; opacity:0.8; height:20px; }
div.L5 { background:#036; opacity:1.0; height:20px; }
19. Highlight links that open in a new window
This snippet allows you to easily distinguish links that open in new browser/tab windows by styling them different from other links.
a[target="_blank"]:before,
a[target="new"]:before {
margin:0 5px 0 0;
padding:1px;
outline:1px solid #333;
color:#333;
background:#ff9;
font:12px "Zapf Dingbats";
content: "\279C";
}
20. The New Bulletproof @Font-Face Syntax
A cross-browser CSS snippet that lets you define your font faces.
@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}
21. Flip an Image
A CSS snippet that lets you flip an image. This is particularly useful if you want to flip icons such as arrows.
img {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
22. Email Link With An Image
A quick way of automatically adding a mail image to all of your email links.
a[href^="mailto:"] {
background: url(images/email.png) no-repeat right top;
padding-right:10px;
}
23. Beautiful Blockquotes
A neat way of styling your blockquotes to add a bit more punch to them.
blockquote {
background:#f9f9f9;
border-left:10px solid #ccc;
margin:1.5em 10px;
padding:.5em 10px;
quotes:"\201C""\201D""\2018""\2019";
}
blockquote:before {
color:#ccc;
content:open-quote;
font-size:4em;
line-height:.1em;
margin-right:.25em;
vertical-align:-.4em;
}
blockquote p {
display:inline;
}
24. Browser CSS hacks
A large list of browser hacks to make sure your website looks consistent across all browsers.
/***** Selector Hacks ******/
/* IE6 and below */
* html #uno { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
/* IE7, FF, Saf, Opera */
html>body #tres { color: red }
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }
/* Everything but IE6-8 */
:root *> #quince { color: red }
/* IE7 */
*+html #dieciocho { color: red }
/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }
/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }
/* FF 3.5+ */
body:not(:-moz-handler-blocked) #cuarenta { color: red; }
/***** Attribute Hacks ******/
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
/* IE8, IE9 */
#anotherone {color: blue\0/;} /* must go at the END of all rules */
25. How To Change The Default Text Selection Color on your Blog
Change the color of highlighted text by adding this little CSS snippet to your stylesheet.
::selection {
background: #ffb7b7; /* Safari */
color: #ffffff;
}
::-moz-selection {
background: #ffb7b7; /* Firefox */
color: #ffffff;
}
26. Clearfix
Clear floated elements easily by creating a CSS clear class.
.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 */
27. Hide Logo Text With Text Indent
Make your logo is SEO friendly by using this snippet for your h1 tag. The snippet ensures that the logo text is not displayed on the page.
h1 {
text-indent:-9999px;
margin:0 auto;
width:400px;
height:100px;
background:transparent url("images/logo.jpg") no-repeat scroll;
}
28. Reset all Text Colors and Background Colors
Reset all text and background colours. The snippet sets everything back to black text on a white background though you can change these colours accordingly.
* {
color: black !important;
background-color: white !important;
background-image: none !important;
}
29. Multiple Background Images
Use multiple background images with this useful CSS3 snippet.
#multiple-images {
background: url(image_1.png) top left no-repeat,
url(image_2.png) bottom left no-repeat,
url(image_3.png) bottom right no-repeat;
}
30. Linear Gradient
This CSS code will allow you to create a linear gradient in the background of an element. This works on all major browsers however some older browsers don’t display it properly (particularly older versions of IE).
background-image: -webkit-linear-gradient(top, #F0ECE8 0%, #D8D3C8 100%);
background-image: -moz-linear-gradient( top, #F0ECE8 0%, #D8D3C8 100%);
background-image: -o-linear-gradient( top, #F0ECE8 0%, #D8D3C8 100%);
background-image: linear-gradient( top, #F0ECE8 0%, #D8D3C8 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F0ECE8), color-stop(1, #D8D3C8) );
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#F0ECE8?, endColorstr=’#D8D3C8?,GradientType=0 );
We hope that you enjoyed the post and found it as useful as we’d hoped. If you know of any other useful CSS snippets that you keep handy that we neglected, please share them with us in the comment area.
(rb)
