CSS Snippets for Your Coding

Posted byProsoxi.com Webmaster Leave a comment on CSS Snippets for Your Coding

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.

view plaincopy to clipboardprint?

  1. /*
  3. Reset Default Browser Styles
  4. – Place first in the listing of external style sheets for cascading.
  5. – Be sure to explicitly set margin/padding styles.
  6. – Styles are not reset that have to do with display (block, inline) are not reset.
  8. By: Chris Poteet & various influences
  10. */
  12. * { 
  13. vertical-align: baselinebaseline; 
  14. font-family: inherit; 
  15. font-style: inherit; 
  16. font-size: 100%; 
  17. border: none; 
  18. padding: 0; 
  19. margin: 0; 
  20. } 
  21. body { 
  22. padding: 5px; 
  23. } 
  24. h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl { 
  25. margin: 20px 0; 
  26. } 
  27. li, dd, blockquote { 
  28. margin-left: 40px; 
  29. } 
  30. dt { 
  31. font-weight: bold; 
  32. } 
  33. table { 
  34. border-collapse: collapse; 
  35. border-spacing: 0; 
  36. } 

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.

view plaincopy to clipboardprint?

  1. /* http://meyerweb.com/eric/tools/css/reset/
  2.    v2.0 | 20110126
  3.    License: none (public domain)
  4. */
  6. html, body, div, span, applet, object, iframe, 
  7. h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
  8. a, abbr, acronym, address, big, cite, code, 
  9. del, dfn, em, img, ins, kbd, q, s, samp, 
  10. small, strike, strong, sub, sup, tt, var, 
  11. b, u, i, center, 
  12. dl, dt, dd, ol, ul, li, 
  13. fieldset, form, label, legend, 
  14. table, caption, tbody, tfoot, thead, tr, th, td, 
  15. article, aside, canvas, details, embed, 
  16. figure, figcaption, footer, header, hgroup, 
  17. menu, nav, output, ruby, section, summary, 
  18. time, mark, audio, video { 
  19. margin: 0; 
  20. padding: 0; 
  21. border: 0; 
  22. font-size: 100%; 
  23. font: inherit; 
  24. vertical-align: baselinebaseline; 
  25. } 
  26. /* HTML5 display-role reset for older browsers */
  27. article, aside, details, figcaption, figure, 
  28. footer, header, hgroup, menu, nav, section { 
  29. display: block; 
  30. } 
  31. body { 
  32. line-height: 1; 
  33. } 
  34. ol, ul { 
  35. list-style: none; 
  36. } 
  37. blockquote, q { 
  38. quotes: none; 
  39. } 
  40. blockquote:before, blockquote:after, 
  41. q:before, q:after { 
  42. content: ”; 
  43. content: none; 
  44. } 
  45. table { 
  46. border-collapse: collapse; 
  47. border-spacing: 0; 
  48. } 

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.

view plaincopy to clipboardprint?

  1. box-shadow: 
  2.     0 0 0 2px #000, 
  3.     0 0 0 3px #999, 
  4.     0 0 0 9px #fa0, 
  5.     0 0 0 10px #666, 
  6.     0 0 0 16px #fd0, 
  7.     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.

view plaincopy to clipboardprint?

  1. div.tucked-corners { 
  2. background: #f6f6f6; 
  3. height: 380px; 
  4. margin: 50px auto; 
  5. padding: 10px; 
  6. position: relative; 
  7. width: 580px; 
  8.         -webkit-box-shadow: 0 1px 7px hsla(0,0%,0%,.2); 
  9.            -moz-box-shadow: 0 1px 7px hsla(0,0%,0%,.2); 
  10.                 box-shadow: 0 1px 7px hsla(0,0%,0%,.2); 
  11.     } 
  12.     span.tucked-corners { 
  13. background: #c4453c; 
  14. display: block; 
  15. height: 380px; 
  16. position: relative; 
  17. width: 580px; 
  18.         -webkit-box-shadow: inset 0 0 10px hsla(0,0%,0%,.25); 
  19.            -moz-box-shadow: inset 0 0 10px hsla(0,0%,0%,.25); 
  20.                 box-shadow: inset 0 0 10px hsla(0,0%,0%,.25); 
  21.     } 
  23. /* Top Corner Effect */
  25.     .top-corners:after, 
  26.     .top-corners:before { 
  27. background: #e6e6e6; 
  28. content: ”; 
  29. height: 50px; 
  30. position: absolute; 
  31. top: -25px; 
  32. width: 100px; 
  33. z-index: 10; 
  34.         -webkit-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5); 
  35.            -moz-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5); 
  36.                 box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5); 
  37.     } 
  38.     .top-corners:after { 
  39. left: -50px; 
  40.         -webkit-transform: rotate(-45deg); 
  41.            -moz-transform: rotate(-45deg); 
  42.             -ms-transform: rotate(-45deg); 
  43.              -o-transform: rotate(-45deg); 
  44.                 transform: rotate(-45deg); 
  45.     } 
  46.     .top-corners:before { 
  47. rightright: -50px; 
  48.         -webkit-transform: rotate(45deg); 
  49.            -moz-transform: rotate(45deg); 
  50.             -ms-transform: rotate(45deg); 
  51.              -o-transform: rotate(45deg); 
  52.                 transform: rotate(45deg); 
  53.     } 
  55. /* Bottom Corner Effect */
  57.     .bottombottom-corners:after, 
  58.     .bottombottom-corners:before { 
  59. background: #e6e6e6; 
  60. content: ”; 
  61. height: 50px; 
  62. position: absolute; 
  63. bottombottom: -25px; 
  64. width: 100px; 
  65.         -webkit-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5); 
  66.            -moz-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5); 
  67.                 box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5); 
  68.     } 
  69.     .bottombottom-corners:after { 
  70. left: -50px; 
  71.         -webkit-transform: rotate(-135deg); 
  72.            -moz-transform: rotate(-135deg); 
  73.             -ms-transform: rotate(-135deg); 
  74.              -o-transform: rotate(-135deg); 
  75.                 transform: rotate(-135deg); 
  76.     } 
  77.     .bottombottom-corners:before { 
  78. rightright: -50px; 
  79.         -webkit-transform: rotate(135deg); 
  80.            -moz-transform: rotate(135deg); 
  81.             -ms-transform: rotate(135deg); 
  82.              -o-transform: rotate(135deg); 
  83.                 transform: rotate(135deg); 
  84.     } 

5. iPad-Specific CSS

Change the general layout of ipad screens and portrait and landscape modes.

view plaincopy to clipboardprint?

  1. @media only screen and (device-width: 768px) { 
  2. /* For general iPad layouts */
  3. } 
  5. @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) { 
  6. /* For portrait layouts only */
  7. } 
  9. @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) { 
  10. /* For landscape layouts only */
  11. } 

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.

view plaincopy to clipboardprint?

  1. /* external links */
  2. a[href^="http://"]{ 
  3. padding-right: 20px; 
  4. background: url(external.gif) no-repeat center rightright; 
  5. } 
  7. /* emails */
  9. a[href^="mailto:"]{ 
  10. padding-right: 20px; 
  12. background: url(email.png) no-repeat center rightright; 
  14. } 
  16. /* pdfs */
  18. a[href$=".pdf"]{ 
  19. padding-right: 20px; 
  20. background: url(pdf.png) no-repeat center rightright; 

7. Drop Caps

A great cross-browser snippet that lets you make the first letter of a paragraph stand out.

view plaincopy to clipboardprint?

  1. .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.

view plaincopy to clipboardprint?

  1. 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

view plaincopy to clipboardprint?

  1. /*
  2. Sticky Footer Solution
  3. by Steve Hatcher
  5. http://stever.ca
  7. http://www.cssstickyfooter.com
  9. */
  11. * {margin:0;padding:0;}  
  13. /* must declare 0 margins on everything, also for main layout components use padding, not
  14. vertical margins (top and bottom) to add spacing, else those margins get added to total height
  15. and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */
  17. html, body {height: 100%;} 
  19. #wrap {min-height: 100%;} 
  21. #main {overflow:auto; 
  22. padding-bottom: 150px;}  /* must be same height as the footer */
  24. #footer {position: relative; 
  25. margin-top: -150px; /* negative value of footer height */
  26. height: 150px; 
  27. clear:both;}  
  29. /*Opera Fix*/
  30. body:before {/* thanks to Maleika (Kohoutec)*/
  31. content:""; 
  32. height:100%; 
  33. float:left; 
  34. width:0; 
  35. margin-top:-32767px;/* thank you Erik J – negate effect of float*/
  36. } 
  38. /* IMPORTANT
  40. 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.
  42. <!–[if !IE 7]>
  43. <style type="text/css">
  44.         #wrap {display:table;height:100%}
  45.     </style>
  47. < ![endif]–>
  49. */

HTML

view plaincopy to clipboardprint?

  1. <div id="wrap">
  3. <div id="main">
  5. </div>
  7. </div>
  10. <div id="footer">
  12. </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.

view plaincopy to clipboardprint?

  1. a.replacement 
  2. { 
  3. background: url(dotted-border.png) no-repeat; 
  4. height: 44px; 
  5. width: 316px; 
  6. display: block; 
  7. text-indent: -9999px; 
  8. overflow: hidden;  /*Add this line to the image replacement method*/
  9. } 

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.

view plaincopy to clipboardprint?

  1. body { 
  2. font-size: 62.5%; /* font-size 1em = 10px */
  3. } 
  4. p { 
  5. font-size: 1.2em; /* 1.2em = 12px */
  6. } 

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.

view plaincopy to clipboardprint?

  1. div { width:100px; height:100px; } 
  2. 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.

view plaincopy to clipboardprint?

  1. p.threeD 
  2. { 
  3. text-shadow: 
  4.         -1px 1px 0 #ddd, 
  5.         -2px 2px 0 #c8c8c8, 
  6.         -3px 3px 0 #ccc, 
  7.         -4px 4px 0 #b8b8b8, 
  8.         -4px 4px 0 #bbb, 
  9. 0px 1px 1px rgba(0,0,0,.4), 
  10. 0px 2px 2px rgba(0,0,0,.3), 
  11.         -1px 3px 3px rgba(0,0,0,.2), 
  12.         -1px 5px 5px rgba(0,0,0,.1), 
  13.         -2px 8px 8px rgba(0,0,0,.1), 
  14.         -2px 13px 13px rgba(0,0,0,.1) 
  15.         ; 
  16. } 

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.

view plaincopy to clipboardprint?

  1. pre { 
  2. whitewhite-space: pre;           /* CSS 2.0 */
  3. whitewhite-space: pre-wrap;      /* CSS 2.1 */
  4. whitewhite-space: pre-line;      /* CSS 3.0 */
  5. whitewhite-space: -pre-wrap;     /* Opera 4-6 */
  6. whitewhite-space: -o-pre-wrap;   /* Opera 7 */
  7. whitewhite-space: -moz-pre-wrap; /* Mozilla */
  8. whitewhite-space: -hp-pre-wrap;  /* HP Printers */
  9.     word-wrap: break-word;      /* IE 5+ */
  10.     } 

14. Fancy Ampersand

Make your ampersands stand out using this short snippet. Simply change the font-family to suit your preference.

view plaincopy to clipboardprint?

  1. .amp { 
  2. font-family: Baskerville, ‘Goudy Old Style’, Palatino, ‘Book Antiqua’, serif; 
  3. font-style: italic; 
  4. font-weight: normal; 
  5. } 

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.

view plaincopy to clipboardprint?

  1. .pullquote { 
  2. width: 300px; 
  3. float: rightright; 
  4. margin: 5px; 
  5. font-family: Georgia, "Times New Roman", Times, serif; 
  6. font: italic bold #ff0000 ; } 

16. Rounded Borders Around Images

With CSS3 you can easily place rounded borders around your images using this snippet.

view plaincopy to clipboardprint?

  1. img { 
  2. -webkit-border-radius: 25px; 
  3. -moz-border-radius: 25px; 
  4. border-radius: 25px; 
  5. } 

17. Image Preloader

Load a small gif in the background of an image first so that it is showed before the main image loads.

view plaincopy to clipboardprint?

  1. img 
  2. { 
  3. background: url(img/preloader.gif) no-repeat 50% 50%; 
  4. } 

18. CSS3 Opacity

By using the opacity property, which lets you see through an element, you can create a layered textured background.

view plaincopy to clipboardprint?

  1. div.L1 { background:#036; opacity:0.2; height:20px; } 
  2. div.L2 { background:#036; opacity:0.4; height:20px; } 
  3. div.L3 { background:#036; opacity:0.6; height:20px; } 
  4. div.L4 { background:#036; opacity:0.8; height:20px; } 
  5. 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.

view plaincopy to clipboardprint?

  1. a[target="_blank"]:before, 
  2. a[target="new"]:before { 
  3. margin:0 5px 0 0; 
  4. padding:1px; 
  5. outline:1px solid #333; 
  6. color:#333; 
  7. background:#ff9; 
  8. font:12px "Zapf Dingbats"; 
  9. content: "\279C"; 
  10. } 

20. The New Bulletproof @Font-Face Syntax

A cross-browser CSS snippet that lets you define your font faces.

view plaincopy to clipboardprint?

  1. @font-face { 
  2. font-family: ‘MyFontFamily’; 
  3. src: url(‘myfont-webfont.eot?#iefix’) format(’embedded-opentype’), 
  4. url(‘myfont-webfont.woff’) format(‘woff’), 
  5. url(‘myfont-webfont.ttf’)  format(‘truetype’), 
  6. url(‘myfont-webfont.svg#svgFontName’) format(‘svg’); 
  7.     } 

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.

view plaincopy to clipboardprint?

  1. img { 
  2.         -moz-transform: scaleX(-1); 
  3.         -o-transform: scaleX(-1); 
  4.         -webkit-transform: scaleX(-1); 
  5.         transform: scaleX(-1); 
  6.         filter: FlipH; 
  7.         -ms-filter: "FlipH"; 
  8. } 

22. Email Link With An Image

A quick way of automatically adding a mail image to all of your email links.

view plaincopy to clipboardprint?

  1. a[href^="mailto:"] { 
  2. background: url(images/email.png) no-repeat rightright top; 
  3. padding-right:10px; 
  4. } 

23. Beautiful Blockquotes

A neat way of styling your blockquotes to add a bit more punch to them.

view plaincopy to clipboardprint?

  1. blockquote { 
  2. background:#f9f9f9; 
  3. border-left:10px solid #ccc; 
  4. margin:1.5em 10px; 
  5. padding:.5em 10px; 
  6. quotes:"\201C""\201D""\2018""\2019"; 
  7. } 
  8. blockquote:before { 
  9. color:#ccc; 
  10. content:open-quote; 
  11. font-size:4em; 
  12. line-height:.1em; 
  13. margin-right:.25em; 
  14. vertical-align:-.4em; 
  15. } 
  16. blockquote p { 
  17. display:inline; 
  18. } 

24. Browser CSS hacks

A large list of browser hacks to make sure your website looks consistent across all browsers.

view plaincopy to clipboardprint?

  1. /***** Selector Hacks ******/
  3. /* IE6 and below */
  4. * html #uno  { color: red } 
  6. /* IE7 */
  7. *:first-child+html #dos { color: red }  
  9. /* IE7, FF, Saf, Opera  */
  10. html>body #tres { color: red } 
  12. /* IE8, FF, Saf, Opera (Everything but IE 6,7) */
  13. html>/**/body #cuatro { color: red } 
  15. /* Opera 9.27 and below, safari 2 */
  16. html:first-child #cinco { color: red } 
  18. /* Safari 2-3 */
  19. html[xmlns*=""] body:last-child #seis { color: red } 
  21. /* safari 3+, chrome 1+, opera9+, ff 3.5+ */
  22. body:nth-of-type(1) #siete { color: red } 
  24. /* safari 3+, chrome 1+, opera9+, ff 3.5+ */
  25. body:first-of-type #ocho {  color: red } 
  27. /* saf3+, chrome1+ */
  28. @media screen and (-webkit-min-device-pixel-ratio:0) { 
  29. #diez  { color: red  } 
  30. } 
  32. /* iPhone / mobile webkit */
  33. @media screen and (max-device-width: 480px) { 
  34. #veintiseis { color: red  } 
  35. } 
  37. /* Safari 2 – 3.1 */
  38. html[xmlns*=""]:root #trece  { color: red  } 
  40. /* Safari 2 – 3.1, Opera 9.25 */
  41. *|html[xmlns*=""] #catorce { color: red  } 
  43. /* Everything but IE6-8 */
  44. :root *> #quince { color: red  } 
  46. /* IE7 */
  47. *+html #dieciocho {  color: red } 
  49. /* Firefox only. 1+ */
  50. #veinticuatro,  x:-moz-any-link  { color: red } 
  52. /* Firefox 3.0+ */
  53. #veinticinco,  x:-moz-any-link, x:default  { color: red  } 
  55. /* FF 3.5+ */
  56. body:not(:-moz-handler-blocked) #cuarenta { color: red; } 
  58. /***** Attribute Hacks ******/
  60. /* IE6 */
  61. #once { _color: blue } 
  63. /* IE6, IE7 */
  64. #doce { *color: blue; /* or #color: blue */ } 
  66. /* Everything but IE6 */
  67. #diecisiete { color/**/: blue } 
  69. /* IE6, IE7, IE8 */
  70. #diecinueve { color: blue\9; } 
  72. /* IE7, IE8 */
  73. #veinte { color/*\**/: blue\9; } 
  75. /* IE6, IE7 — acts as an !important */
  76. #veintesiete { color: blue !ie; } /* string after ! can be anything */
  78. /* IE8, IE9 */
  79. #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.

view plaincopy to clipboardprint?

  1. ::selection { 
  2. background: #ffb7b7; /* Safari */
  3. color: #ffffff; 
  4.    } 
  5. ::-moz-selection { 
  6. background: #ffb7b7; /* Firefox */
  7. color: #ffffff; 
  8.    } 

26. Clearfix

Clear floated elements easily by creating a CSS clear class.

view plaincopy to clipboardprint?

  1. .clearfix:after { 
  2. visibility: hidden; 
  3. display: block; 
  4. font-size: 0; 
  5. content: " "; 
  6. clear: both; 
  7. height: 0; 
  8. } 
  10. .clearfix { display: inline-block; } 
  12. /* start commented backslash hack \*/
  13. * html .clearfix { height: 1%; } 
  14. .clearfix { display: block; } 
  15. /* 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.

view plaincopy to clipboardprint?

  1. h1 { 
  2. text-indent:-9999px; 
  3. margin:0 auto; 
  4. width:400px; 
  5. height:100px; 
  6. background:transparent url("images/logo.jpg") no-repeat scroll; 
  7. } 

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.

view plaincopy to clipboardprint?

  1. * { 
  2. color: black !important; 
  3. background-color: white !important; 
  4. background-image: none !important; 
  5. } 

29. Multiple Background Images

Use multiple background images with this useful CSS3 snippet.

view plaincopy to clipboardprint?

  1. #multiple-images { 
  2. background: url(image_1.png) top left no-repeat, 
  3. url(image_2.png) bottombottom left no-repeat, 
  4. url(image_3.png) bottombottom rightright no-repeat; 
  5. } 

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).

view plaincopy to clipboardprint?

  1. background-image: -webkit-linear-gradient(top, #F0ECE8 0%, #D8D3C8 100%); 
  2. background-image: -moz-linear-gradient( top, #F0ECE8 0%, #D8D3C8 100%); 
  3. background-image: -o-linear-gradient( top, #F0ECE8 0%, #D8D3C8 100%); 
  4. background-image: linear-gradient( top, #F0ECE8 0%, #D8D3C8 100%); 
  5. background-image: -webkit-gradient(linear, left top, left bottombottom, color-stop(0, #F0ECE8), color-stop(1, #D8D3C8) ); 
  6. 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)

Leave a comment