A useful CSS snippet for the

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 effect

From 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 browser

Sometimes 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:r Ed}/* IE7, FF, SAF, opera */html>body #tres {color:red}/* IE8, FF, SAF, Opera (Everything but IE 6,7) */html& Gt;/**/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, Chrome 1+, opera9+, FF 3.5+ */body:nth-of-type (1 ) #siete {color:red}/* Safari, Chrome 1+, opera9+, ff 3.5+ */body:first-of-type #ocho {color:red}//saf3+, C hrome1+ */@media screen and (-webkit-min-device-pixel-ratio:0) {#diez {color:red}}/* iphone/mobile WebKit */@med  IA 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 */:r Oot *> #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}/***** 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:block;  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 {display: None }} @media only screens and (max-device-width:1024px) and (Orientation:landscape) {     . portrait {Display:none;}} <!- -Example Markup--><H1 class= "Portrait" >your Device orientation is "portrait" 
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;} /  * Must be same height as the footer */#footer {        position:relative;        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& Gt <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 bu G */
30. Change the style of the selected text
:: selection{color:white;background-color:red;}::-moz-selection/  * Firefox needs an extra attention for this */{col or: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;    }
A useful CSS snippet for the