30 developers useful CSS snippet collation worth learning from

css reset by eric meyer 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,  font, 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 { margin: 0; padding: 0;  border: 0; outline: 0; font-size: 100%; vertical-align: baseline;  background: transparent; } body { line-height: 1; } ol, ul {  list-style: none; }  blockquote, q { quotes: none; } blockquote:before, blockquote:after,  q:before, q:after { content:  '; content: none; } /*  remember to define focus styles! */ :focus { outline: 0; }  /* remember to highlight inserts somehow! */ ins {  text-decoration: none; } del { text-decoration: line-through; } /*  tables still need  ' cellspacing= ' 0 " in the markup */ table  { border-collapse: collapse; border-spacing: 0; } /*  display different link styles based on file format    */ /* external links */ a[href^= "/http"]{ padding-right: 20px;  background: url (external.gif)  no-repeat center right; } /* emails  */ a[href^= "mailto:"]{&NBsp;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; } //Delete textarea scroll bar textarea{ overflow in IE browser: auto; } //Browser-specific  hacks /* ie 6 */ * html .yourclass {  } /* ie 7 */ *+html .yourclass{ } /* ie 7 and  modern browsers */ html>body .yourclass { } /* Modern  browsers  (not ie 7)  */ html>/**/body .yourclass { } /*  opera 9.27 and below */ html:first-child .yourclass { } /*  Safari */ html[xmlns*= ""] body:last-child .yourclass { } /* safari  3+, chrome 1+,&Nbsp;opera 9+, fx 3.5+ */ body:nth-of-type (1)  .yourclass { } /*  safari 3+, chrome 1+, opera 9+, fx 3.5+ */ body: first-of-type .yourclass { } /* safari 3+, chrome 1+ */ @ media screen and  (-webkit-min-device-pixel-ratio:0)  { .yourclass { } }  //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 */ //Fixed width and center  .wrapper  { width:960px; margin:0 auto; } //rounded corners – border-radius .round{ - moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; /*  future proofing */ -khtml-border-radius: 10px; /* for old  konqueror browsers */ } //Pseudo-Elements add a special style to the first letter of the text  p:first-letter{ display:block;  margin:5px 0 0 5px; float:left; color: #000; font-size:60px;  font-family:georgia; } //using   @fontface   @font-face { font-family:  ' Myfontfamily ';  src: url (' Myfont-webfont.eot? ')  format (' EoT '),  url (' Myfont-webfont.woff ')  format (' Woff '),  url (' Myfont-webfont.ttf ')   Format (' TrueType '),  url (' Myfont-webfont.svg#svgfontname ')  format (' svg ');  } // 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; }  //Fixed Footer  #footer  { position:fixed; left:0px; bottom:0px; height : 30px; width:100%; background: #999;  } /* ie 6 */ * html # Footer { position:absolute; top:expression ((0-(footer.offsetheight) + ( document.documentelement.clientheight ? document.documentelement.clientheight :  Document.body.clientHeight) + (ignoreme = document.documentelement.scrolltop ?  document.documentelement.scrolltop : document.body.scrolltop)) + ' px ')  } //change the size of the content area  # Content { width: 100%; margin: 0; float: none; } css3 media  Queries  (This is not commonly used primarily for smart device judgments to display different media)   copy code code as follows:/* 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&NBSP;:&NBSP;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 */ }   Multi-background image   Copy code code as follows: #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; }  Multi-column   copy code code as follows: #columns -3 { text-align: justify;  -moz-column-count: 3; -moz-column-gap: 12px; -moz-column-rule: 1px solid   #c4c8cc;  -webkit-column-count: 3; -webkit-column-gap: 12px; -webkit-column-rule : 1px solid  #c4c8cc; }  in IE minimum height   Copy code code as follows:.box { min-height:500px;  height:auto !important; height:500px; }  Highlight text styles   copy code as follows::: selection {  color:  #000000; background-color:  #FF0000;  } ::-moz-selection { color :  #000000;  background:  #FF0000; } box shadow  Copy the Code code as follows: Box-shadow: 0px 3px 3px rgba ( 0,0,0,0.2);  -moz-box-shadow: 0px 3px 3px rgba (0,0,0,0.2);  -webkit-box-shadow:  0px 3px 3px rgba (0,0,0,0.2);  placeholder Text style   Copy code code as follows:::-webkit-input-placeholder  { color:  #ccc; font-style:italic } :-moz-placeholder { color:  #ccc;  font-style:italic } css3 3d text effects   Copy code code as follows: h1 { text-shadow: 0 1px  0  #ccc, 0 2px 0  #c9c9c9, 0 3px 0  #bbb,  0 4px  0  #b9b9b9, 0 5px 0  #aaa,  0 6px 1px rgba (0,0,0,.1),  0  0 5px rgba (0,0,0,.1),  0 1px 3px rgba (0,0,0,.3),  0 3px 5px  rgba (0,0,0,.2),  0 5px 10px rgba (0,0,0,.25),  0 10px 10px rgba ( 0,0,0,.2), 0 20px 20px rgba (0,0,0,.15);  } webkit boundary radius correction   Copy code code is as follows:-webkit-background-clip: padding-box;  xbrowser's Border-radius (css3pie)   Copy code code is as follows:. roundbox { -moz-border-radius:8px; - Webkit-border-radius:8px; -khtml-border-radius:8px; border-radius:8px; behavior: url (/ PIE.HTC); }  better compatible with IE browser   copy code code as follows:<!--[if ie]> <script src= "/HTTP// Html5shim.googlecode.com/svn/trunk/html5.js "></script> <! [Endif]--> css3 Tool Tips (This is very useful, see my Site Navigation tooltips effect)   Copy code code as follows:a { color:  #900;  text-decoration: none; } a:hover { color: red; position: relative;  } a[title]:hover:after { content: attr (title); padding: 4px 8px;  color:  #333;  position: absolute; left: 0; top: 100%; white-space :  nowrap; z-index: 20px; -moz-border-radius: 5px; -Webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0px 0px 4px   #222; -webkit-box-shadow: 0px 0px 4px  #222;  box-shadow: 0px 0px  4px  #222  background-image: -moz-linear-gradient (top,  #eeeeee,  #cccccc);  Background-image: -webkit-gradient (Linear,left top,left bottom,color-stop (0,  #eeeeee), Color-stop (1,  #cccccc)) &NBSP;}&NBSP;CSS3 background size   Copy code code below:body { background:  #000   URL (http://birdoflight.files.wordpress.com/2009/10/frida-kahlo-1.jpg)  center center fixed  no-repeat; -moz-background-size: cover; background-size: cover; }  @media   only all and  (max-width: 1024px)  and  (max-height: 768px)  { body  { -moz-background-size: 1024px 768px; background-size: 1024px 768px;  } }  Cross-browser CSS page Curl shadow   Copy code code below:.page-curl { position: relative; background:  #ffffff;  Background: -moz-linear-gradient (top,  #ffffff  0%,  #e5e5e5  100%);  background:  -webkit-gradient (Linear, left top, left bottom, color-stop (0%, #ffffff),  Color-stop (100%, #e5e5e5));  filter: progid:dximagetransform.microsoft.gradient ( startColorstr= ' # FFFFFF ',  endcolorstr= ' #e5e5e5 ',gradienttype=0 );  -webkit-box-shadow: 0px 0px 3px  rgba (0, 0, 0, 0.3);  -moz-box-shadow: 0px 0px 3px rgba (0, 0,  0, 0.3); } .page-curl:after { z-index: -1; position: absolute;  background: transparent; width: 70%; height: 55%; content:  ';  Right: 10px; bottom: 10px; -webkit-transform: skew (15deg)  rotate (5deg);  - Webkit-box-shadow: 8Px 12px 10px rgba (0, 0, 0, 0.3);  -moz-transform: skew (15deg)   Rotate (5deg);  -moz-box-shadow: 8px 12px 10px rgba (0, 0, 0, 0.3);  } .page-curl:before { z-index: -2; position: absolute; background:  transparent; width: 70%; height: 55%; content:  '; left: 10px;  Bottom: 10px; -webkit-transform: skew ( -15deg)  rotate ( -5deg);  -webkit-box-shadow:  -8px 12px 10px rgba (0, 0, 0, 0.3);  -moz-transform: skew ( -15DEG)  rotate ( -5deg);  -moz-box-shadow: -8px 12px 10px rgba (0, 0, 0, 0.3 );  } css3 fuzzy text   Copy code code as follows:. blur { color: transparent; text-shadow: 0  0 5px rgba (0,0,0,0.5); }  fix  ie6/7 margin/padding double   pitch error   copy code code below : ul li { float: right; margin-right: 10px; *display: inline; /*Target IE7 and  Bellow*/ _display: inline; /*target ie6 and bellow*/ } /* this  example fixes the double right margin bug */  link pseudo-Class order   Copy the code code as follows: A:link {color: blue;}  a:visited {color: purple;}  a:hover {color: red;}  a:active {color: yellow;} The Html meta label   copy code code for the   response layout is as follows: <meta name= "viewport"  content= "Width=device-width, Initial-scale=1,maximum-scale=1,user-scalable=no "> <meta http-equiv=" X-UA-Compatible "  Content= "ie=edge,chrome=1" > <meta name= "handheldfriendly"  content= "true" >

30 developers useful CSS snippet collation worth learning from