"Goto" a useful CSS snippet

From: Web Resource Network

Links: http://webres.wang/31-css-code-snippets-to-make-you-a-better-coder/

Original: http://www.designyourway.net/blog/resources/31-css-code-snippets-to-make-you-a-better-coder/

It's almost impossible to collect all of the CSS snippets in an article, but we've listed some of the more useful pieces of code relative to the rest of the code, not to be intimidated by the length of these codes, because they are easy to implement and have good documentation. In addition to solving common annoying problems, there are a number of new technologies to solve the problems.

1. Vertical alignment

If you have encountered this problem before, you should know how annoying it is, fortunately, now you can use the CSS3 transform to solve this problem:

. vc{position:relative;    top:50%;    -webkit-transform:translatey (-50%);    -o-transform:translatey (-50%); Transform:translatey (-50%);}

  2. With projection only on one or both side

. Box-shadow {background-color: #AC92EC;    width:160px;    height:90px;    Margin-top: -45px;    Margin-left: -80px;    Position:absolute;    top:50%; left:50%;}.    Box-shadow:after {content: "";    width:150px;    height:1px;    margin-top:88px;    Margin-left: -75px;    Display:block;    Position:absolute;    left:50%;    Z-index:-1;       -webkit-box-shadow:0px 0px 8px 2px #000000;            -moz-box-shadow:0px 0px 8px 2px #000000; box-shadow:0px 0px 8px 2px #000000;}

  3. Gradient Background animation effectFrom the beginning of the CSS3, animations have become very cool, but they must not be used too much. The following technique subtly moves the background position so that it looks like an animation:

button {padding:15px;    Background-image:linear-gradient (#FC6E51, #FFF);    Background-size:auto 200%;    Background-position:0 100%;    Transition:background-position 0.5s;} Button:hover {background-position:0 0;}

  4. Dividing text into multiple columns

div{-moz-column-count:3;/* Firefox */-webkit-column-count:3;/* Safari and Chrome */column-count:3;}

  5. Automatic width of table

td {White-space:nowrap;}

  6. Like a publication, the first word becomes larger

p:first-child::first-letter{font-family: "Papyrus";  font-size:28px; Font-weight:bold;}

  7. Full list of CSS hacks for a particular browserSometimes solving cross-browser compatibility can be tricky, but these specific browser tips may help you solve the problem.

/***** 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-chil D #cinco {color:red}  /* Safari 2-3 */html[xmlns*= ""] body:last-child #seis {color:red}  /* Safari, CHR ome 1+, opera9+, FF 3.5+ */body:nth-of-type (1) #siete {color:red}  /* Safari, Chrome 1+, opera9+, FF 3.5+ */bod  Y: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) {#vein Tiseis {color:red  }  /* Safari 2-3.1 */html[xmlns*= "]:root #trece  {color:red  }  /* Saf Ari 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-lin K, X:default  {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 */

  8. Create fuzzy text

. blurry-text {color:transparent; text-shadow:0 0 5px Rgba (0,0,0,0.5);}

  9. Do not use the table to vertically center the image horizontally across the browser

This code can vertically center an unknown size picture in a known wide container, which is a hack of IE:

<figure class= ' logo ' > <span></span> </figure>.logo {Display:blo  ck  Text-align:center;  Display:block;  Text-align:center;  Vertical-align:middle;  BORDER:4PX solid #dddddd;  padding:4px;  height:74px; width:74px;    }. logo * {display:inline-block;    height:100%; Vertical-align:middle;    }. Logo. photo {height:auto;    Width:auto;    max-width:100%; max-height:100%; }

  10. Highlight selected input

Html<input id= "Mycheck1" type= "checkbox"/><label for= "mycheck1" >check box label here</label>< BR/><input id= "Mycheck2" type= "checkbox" Checked/><label for= "mycheck2" >check box label Here</label ><BR/><input id= "Mycheck3" type= "checkbox"/><label for= "mycheck3" >check box label here</  label>//cssinput:checked + label{background:yellow; }

  11. Cross-browser transparency

selector {filter:alpha (OPACITY=50);/* Internet Explorer */-khtml-opacity:0.5;       /* khtml, Old safari */-moz-opacity:0.5;           /* Mozilla, Netscape */opacity:0.5; /* FX, Safari, Opera */}

css Projection

External projection. Shadow {-moz-box-shadow:5px 5px 5px #ccc;  -webkit-box-shadow:5px 5px 5px #ccc; box-shadow:5px 5px 5px #ccc;}   Internal projection. Shadow {-moz-box-shadow:inset 0 0 10px #000000;   -webkit-box-shadow:inset 0 0 10px #000000; Box-shadow:inset 0 0 10px #000000;}

  13. Cross-browser minimum height

#div {min-height:500px;   Height:auto!important; height:500px;}

  14. 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 ');}

  15. Clear Floating Clearfix

/* Slightly enhanced, universal Clearfix hack */.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 */

  16. Add a hand cursor to a clickable element

A[HREF], input[type= ' submit '], input[type= ' image '], label[for], select, button,. pointer {cursor:pointer;}

　 The IPad-oriented CSS

<!--CSS-@media only screens and (max-device-width:1024px) and (orientation:portrait) {  . Landscape {DISPL Ay:none; }} @media only screens and (max-device-width:1024px) and (Orientation:landscape) {  . portrait {Display:none;}} < ;! --Example markup-->
 
  

  text wrapping in Pre tags

pre{height:120px;overflow:auto;font-family: "Consolas", Monospace;font-size:9pt;text-align:left;background-color : #FCF7EC; overflow-x: auto; /* Use horizontal scroller if needed; For Firefox 2, Notwhite-space:pre-wrap; /* css-3 */white-space:-moz-pre-wrap!important; /* Mozilla, since 1999 */word-wrap:break-word; /* Internet Explorer 5.5+ */margin:0px 0px 0px 0px;padding:5px 5px 3px 5px;white-space:normal; /* Crucial for IE 6, maybe 7? */}

  CSS3 Media Enquiry

/* Smartphones (Portrait and Landscape)-----------*/@media only Screenand (min-device-width:320px) and (Max-device-wid th:480px) {/* Styles *}/* Smartphones (Landscape)-----------*/@media only Screenand (min-width:321px) {/* Styles *  /}//* Smartphones (Portrait)-----------*/@media only Screenand (max-width:320px) {/* Styles */}/* IPads (Portrait and Landscape)-----------*/@media only Screenand (min-device-width:768px) and (max-device-width:1024px) {/* Styles */} /* IPads (Landscape)-----------*/@media only Screenand (min-device-width:768px) and (max-device-width:1024px) and (O Rientation:landscape) {/* Styles *}/* IPads (Portrait)-----------*/@media only Screenand (min-device-width:768px) and (MAX-DEVICE-WIDTH:1024PX) and (orientation:portrait) {/* Styles */}/* Desktops and laptops-----------*/@media o nly Screenand (min-width:1224px) {/* Styles */}/* Large screens-----------*/@media only Screenand (min-width:1824px ) {/* Styles */}/* IPhONE 4-----------*/@mediaonly screens and (-webkit-min-device-pixel-ratio:1.5), only screens and (Min-device-pixel-ratio: 1.5) {/* Styles */}

  20. Reset the Load

HTML, body, Div, span, applet, object, IFRAME,H1, H2, H3, H4, H5, H6, p, blockquote, PRE,A, ABBR, acronym, address, Big, C Ite, Code,del, DFN, EM, Font, IMG, ins, KBD, Q, S, Samp,small, Strike, strong, sub, SUP, TT, VAR,DL, DT, DD, OL, UL, Li,fi Eldset, form, label, Legend,table, Caption, Tbody, TFOOT, THEAD, tr, TH, td {   margin:0;    padding : 0;    border:0;    outline:0;    font-weight:inherit;    font-style:inherit;    font-size:100%;    font-family:inherit;    vertical-align:baseline;} /* Remember to define focus styles! */:focus {   outline:0;} Body {   line-height:1;    color:black;    background:white;} OL, ul {   list-style:none;} /* Tables still need ' cellspacing= "0" ' in the markup */table {   border-collapse:separate;    border -spacing:0;} caption, Th, TD {   text-align:left;    fonT-weight:normal;} Blockquote:before, Blockquote:after,q:before, q:after {   content: "";} BLOCKQUOTE, Q {   quotes: "" ";}

  21. Multi-border

The element must be relatively positioned and have enough padding to display the extra border:

#borders {position:relative;   Z-index:1;   padding:30px;   border:5px solid #f00; Background: #ff9600;}   #borders: Before {content: "";   Position:absolute;   Z-index:-1;   top:5px;   left:5px;   right:5px;   bottom:5px;   border:5px solid #ffea00; Background: #4aa929;}   #borders: After {content: "";   Position:absolute;   Z-index:-1;   top:15px;   left:15px;   right:15px;   bottom:15px;   border:5px solid #00b4ff; Background: #fff;}

  22. Remove the textarea scroll bar in IE

textarea {Overflow:auto;}

　 23. Simple but good-looking reference style

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;}

  -moz-placeholder.:

<!doctype html> 
  

  25. Another way to fix footer

 * {margin:0; padding:0;} HTML, body, #wrap {height:100%;} body > #wrap {height:auto; min-height:100%;} #main {padding-bottom:150px;} &nb sp;/* must be same height as the footer */#footer {       position:relative;      / Nbsp;margin-top: -150px; /* Negative value of footer height */       height:150px;         clear:both;}  /* CLEAR fix*/.clearfix:after {content: ".";        display:block;        height: 0;        clear:both;        visibility:hidden;}. Clearfix {display:inline-block;} /* Hides from Ie-mac \*/* html. clearfix {height:1%;}. Clearfix {display:block;}  /* End hide from Ie-mac */<div id= "wrap" >        <div id= "main" class= "Clearfix" >        </div> </div> <div id= "Footer" > </div> 

  26. Transparent Background

. rgba {background-color:transparent;  Background-color:rgba (200,200,200,0.8);  Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= #99dddddd, endcolorstr= #99dddddd); -ms-filter: "Progid:DXImageTransform.Microsoft.gradient (startcolorstr= #99dddddd, endcolorstr= #99dddddd)";}

  27. Center the div element with unknown width

. content {margin:0 auto 8px;    display:table;    }. Content div {Display:table-cell;    } <!--[if ie]>.content {display:block;    Text-align:center;    }.content Div {display:inline; Zoom:1;} <! [endif]-->

  28. Set style based on file type

/* External links */a[href^= "/http"]{padding-right:13px;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:18px;background:url (acrobat.png) no-repeat Center right;}

  29. Solve IE6/7 double margin/padding problem

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 */

  30. Change the style of the selected text

:: selection{color:white;background-color:red;}::-moz-selection/* Firefox needs an extra attention for this */{color: white;background-color:red;}

  31. Drop Cap

p:first-letter{Display:block;        margin:5px 0 0 5px;        Float:left;        Color: #FF3366;        font-size:60px;    Font-family:georgia; }

"Goto" a useful CSS snippet