Common CSS Tips for code snippet collation

1, vertical alignment

If you use CSS, you'll be confused: how do I vertically align elements in a container? Now, using CSS3 's transform, you can solve this puzzle gracefully:

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

Using this technique, you will align vertically from one line of text, paragraph to box. The current browser support for transform is a concern, with Chrome 4, Opera, Safari 3, Firefox 3, and Internet Explorer 9. All support this property.

2. Stretch an element to the window height

In a specific scenario, you might want to extend an element to the height of the window, the adjustment of the base element can only resize the container, so to extend an element to the window height, we need to extend the top element: HTML and Body:

html,body{
height:100%;
}
Then apply 100% to the height of any element:

div{height:100%;}

3. Use different styles based on file format

To make it easier to know the target of a link, sometimes you want some links to look different than others. The following fragment adds an icon to the text link and uses a different icon or picture for the different resources:

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

4. Create a cross-browser image grayscale

Gray-scale sometimes looks simple and elegant, for the site to show a deeper tone. In the example, we'll add grayscale filtering to an SVG image:

<svg xmlns= "Http://www.w3.org/2000/svg" >
<filter id= "Grayscale" >
<fecolormatrix type= "Matrix" values= "0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0 "/>
</filter>
</svg>

In order to cross browser, the Filter property is used:

IMG {
Filter:url (Filters.svg#grayscale); * * Firefox 3.5+ * *
Filter:gray; * ie6-9 * *
-webkit-filter:grayscale (1); /* Google Chrome, Safari 6+ & Opera 15+ * *
}

5. Background Gradient Animation

One of the most tempting features of CSS is the ability to add animation effects, and you can animate the background color, transparency, and element size in addition to gradients. Currently, you can't animate a gradient, but the following code may be helpful. It makes it look animated by changing the background position.

button{
Background-image:linear-gradient (#5187c4, #1c2f45);
Background-size:auto 200%;
Background-position:0 100%;
Transition:background-position 0.5s;
}

button:hover{
background-position:0 0;
}

6, CSS: Table Grekon Self-application

For tables, it is more painful when it comes to adjusting the column widths. Then, here's a trick to use: Add White-space:nowrap to TD elements; Make text wrap correctly

Td{white-space:nowrap;} 1.

7. Show box shadow only on one side or both sides

If you want a box shadow, try this technique to add shadows to either side. To achieve this, first define a box with a specific width and height, and then position correctly: after Pseudo class. The code that implements the bottom shadow is as follows:

. box-shadow{
Background-color: #FF8020;
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;
}

8, Parcel Long text

If you come across a text that is longer than your own container, this technique is useful to you. In this example, the text is padded horizontally regardless of the width of the container, by default.
Css
Simple CSS code can adjust text in a container:

pre{
White-space:pre-line;
Word-wrap:break-word;
}

The effect looks as follows:
Css

9, the manufacture of fuzzy text

Want to blur the text? You can use color transparency and Text-shadow implementations.

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

10, with CSS animation to achieve ellipsis animation

This fragment will help you create a ellipsis animation that is useful for simple load states without having to use GIF images.

. loading:after {
Overflow:hidden;
Display:inline-block;
Vertical-align:bottom;
animation:ellipsis 2s infinite;
Content: "\2026"; /* ASCII code for the ellipsis character * *
}

@keyframes ellipsis {
from {
width:2px;
}
to {
width:15px;
}
}

11. Style Reset

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;outline:none;-webkit-box-sizing:border-box;- Moz-box-sizing:border-box;box-sizing:border-box}
html{height:101%}
Body{font-size:62.5%;line-height:1;font-family:arial,tahoma,sans-serif}
Article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
Ol,ul{list-style:none}
Blockquote,q{quotes:none}
Blockquote:before,blockquote:after,q:before,q:after{content: '; Content:none}
Strong{font-weight:bold}
table{border-collapse:collapse;border-spacing:0}
img{border:0;max-width:100%}
P{font-size:1.2em;line-height:1.0em;color: #333}

12, the typical CSS clear floating

. clearfix:after {content: "."; display:block; clear:both; visibility:hidden; line-height:0; height:0;}
. clearfix {Display:inline-block}
HTML[XMLNS]. clearfix {display:block;}
* HTML. Clearfix {height:1%}

13, the new Clean Float (2011)

. Clearfix:before,. Container:after {content: ""; display:table; }
. clearfix:after {Clear:both}

/* IE 6/7 * *
. clearfix {Zoom:1}

14. Cross-browser transparency

. Transparent {
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 * *
}

15, CSS Reference template

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}

16. Rounded corners of the individual

#container {
-webkit-border-radius:4px 3px 6px 10px;
-moz-border-radius:4px 3px 6px 10px;
-o-border-radius:4px 3px 6px 10px;
border-radius:4px 3px 6px 10px;
}

/* Alternative syntax broken into each line * *
#container {
-webkit-border-top-left-radius:4px;
-webkit-border-top-right-radius:3px;
-webkit-border-bottom-right-radius:6px;
-webkit-border-bottom-left-radius:10px;

-moz-border-radius-topleft:4px;
-moz-border-radius-topright:3px;
-moz-border-radius-bottomright:6px;
-moz-border-radius-bottomleft:10px;
}

17. General Media Inquiries

/* Smartphones (Portrait and Landscape)-----------* *
@media only
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 screens and (min-device-width:768px) and (max-device-width:1024px) and (Orientation:landscape) {
* Styles * *
}

/* IPads (Portrait)-----------* *
@media only screens 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:1824px) {
* Styles * *
}

* * IPhone 4-----------* *
@media only screens and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {
* Styles * *
}

18. Modern Font stacks

* Times New roman-based Serif * *
Font-family:cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", Serif

/* A Modern georgia-based serif * *
Font-family:constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "Dejavu Serif," "Bitstream Vera Serif", "L Iberation Serif ", Georgia, Serif;

/*a more traditional garamond-based serif * *
font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century schoolbook", "C Entury schoolbook "," Century schoolbook L ", Georgia, serif;

/*the helvetica/arial-based Sans Serif * *
Font-family:frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "Dejavu S Ans Condensed "," Liberation Sans "," Nimbus Sans L ", Tahoma, Geneva," Helvetica neue ", Helvetica, Arial, Sans-serif;

/*the verdana-based Sans Serif * *
Font-family:corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Dejavu Sans", "Bitstream Vera Sans", "Liberat Ion Sans ", Verdana," Verdana Ref ", Sans-serif;

/*the trebuchet-based Sans Serif * *
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "Dejavu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "V Erdana Ref ", Sans-serif;

/*the heavier "Impact" sans serif * *
Font-family:impact, Haettenschweiler, "Franklin Gothic Bold", charcoal, "Helvetica inserat", "Bitstream Vera Sans Bold", "Arial Black", Sans-serif;

/*the monospace * *
Font-family:consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans typewriter," "Dejavu Sans Mono", "B Itstream Vera Sans Mono "," Liberation Mono "," Nimbus Mono L ", Monaco," Courier New ", Courier, monospace;

19. Custom Text Selection

:: Selection {background: #e2eae2;}
::-moz-selection {background: #e2eae2;}
::-webkit-selection {background: #e2eae2;}

20. Hide H1 for logo

H1 {
text-indent:-9999px;
margin:0 Auto;
width:320px;
height:85px;
Background:transparent URL ("images/logo.png") no-repeat scroll;
}

21, the picture borders polarized

img.polaroid {
Background: #000; /*change this to a background image or remove*/
Border:solid #fff;
border-width:6px 6px 20px 6px;
box-shadow:1px 1px 5px #333; /* Standard Blur at 5px. Increase for more depth * *
-webkit-box-shadow:1px 1px 5px #333;
-moz-box-shadow:1px 1px 5px #333;
height:200px; /*set to your image or desired div*/
width:200px; /*set to width of your image or desired div*/
}

22, the chain connection pseudo class

A:link{color:blue}
A:visited{color:purple}
A:hover{color:red}
A:active{color:yellow}1.
2.
3.
4.

23, the peculiar CSS reference

. has-pullquote:before {
/* Reset metrics. */
padding:0;
Border:none;

/* Content * *
Content:attr (Data-pullquote);

/* Pull out of the right, modular scale based margins. */
Float:right;
width:320px;
margin:12px-140px 24px 36px;

/* Baseline Correction * *
position:relative;
top:5px;

/* Typography (30px line-height equals 25% incremental leading) * *
font-size:23px;
line-height:30px;
}
. pullquote-adelle:before {
font-family: "Adelle-1", "adelle-2";
font-weight:100;
top:10px!important;
}
. pullquote-helvetica:before {
font-family: "Helvetica neue", Arial, Sans-serif;
Font-weight:bold;
TOP:7PX!important;
}
. pullquote-facit:before {
font-family: "Facitweb-1", "facitweb-2", Helvetica, Arial, Sans-serif;
Font-weight:bold;
TOP:7PX!important;
}

24, CSS3: Full screen background

HTML {
Background:url (' images/bg.jpg ') no-repeat Center Center fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
Background-size:cover
}

25, the content is vertically centered

. container {
Min-height:6.5em;
Display:table-cell;
Vertical-align:middle;
}

26, forced to appear vertical scroll bar

HTML {height:101%}1.

27. CSS3 Gradient Template

#colorbox {
Background: #629721;
Background-image:-webkit-gradient (linear, left top, left bottom, from (#83b842), to (#629721));
Background-image:-webkit-linear-gradient (Top, #83b842, #629721);
Background-image:-moz-linear-gradient (Top, #83b842, #629721);
Background-image:-ms-linear-gradient (Top, #83b842, #629721);
Background-image:-o-linear-gradient (Top, #83b842, #629721);
Background-image:linear-gradient (Top, #83b842, #629721);
}

28. @font-face Template

@font-face {
font-family: ' Mywebfont ';
Src:url (' Webfont.eot '); /* IE9 compat Modes * *
Src:url (' Webfont.eot #iefix ') format (' Embedded-opentype '),/* IE6-IE8 * * * URL (' webfont.woff ') format (' Woff '),/* Modern Browsers */url (' Webfont.ttf ') format (' TrueType '),/* Safari, Android, IOS/url (' webfont.svg#svgfontname ') format (' SVG '); /* Legacy IOS * *
}
Body {
font-family: ' Mywebfont ', Arial, Sans-serif;
}

29. Suture CSS3 Elements

p {
position:relative;
Z-index:1;
padding:10px;
margin:10px;
font-size:21px;
Line-height:1.3em;
Color: #fff;
Background: #ff0030;
-webkit-box-shadow:0 0 0 4px #ff0030, 2px 1px 4px 4px rgba (10,10,0,.5);
-moz-box-shadow:0 0 0 4px #ff0030, 2px 1px 4px 4px rgba (10,10,0,.5);
box-shadow:0 0 0 4px #ff0030, 2px 1px 6px 4px rgba (10,10,0,.5);
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
}
P:before {
Content: "";
Position:absolute;
Z-index:-1;
top:3px;
bottom:3px;
left:3px;
right:3px;
border:2px dashed #fff;
}
P a {
Color: #fff;
Text-decoration:none;
}
P a:hover, P A:focus, p a:active {
Text-decoration:underline;
}

33.

30. CSS3 Zebra Crossing

Tbody Tr:nth-child (Odd) {background-color: #ccc;} 1.

31. Interesting &

. amp {
Font-family:baskerville, ' Goudy old Style ', Palatino, ' book Antiqua ', serif;
Font-style:italic;
Font-weight:normal;
}

32, big characters paragraph

P:first-letter {
Display:block;
margin:5px 0 0 5px;
Float:left;
Color: #ff3366;
Font-size:5.4em;
Font-family:georgia, Times New Roman, serif;
}

33, Interior CSS3 Box Shadow

#mydiv {
-moz-box-shadow:inset 2px 0 4px #000;
-webkit-box-shadow:inset 2px 0 4px #000;
Box-shadow:inset 2px 0 4px #000;
}

34, External CSS3 box shadow

#mydiv {
-webkit-box-shadow:0 2px 2px-2px rgba (0, 0, 0, 0.52);
-moz-box-shadow:0 2px 2px-2px rgba (0, 0, 0, 0.52);
box-shadow:0 2px 2px-2px rgba (0, 0, 0, 0.52);
}

35. Triangle List Item Symbol

UL {
Margin:0.75em 0;
padding:0 1em;
List-style:none;
}
Li:before {
Content: "";
Border-color:transparent #111;
Border-style:solid;
Border-width:0.35em 0 0.35em 0.45em;
Display:block;
height:0;
width:0;
Left: -1em;
Top:0.9em;
position:relative;
}

36, fixed width of the center layout

#page-wrap {
width:800px;
margin:0 Auto;
}1.
2.
3.
4.

37. CSS3 Column Text

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

38. CSS Fixed Footer

#footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
Background: #444;
}

/* 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 ');
}

39, IE6 PNG transparent repair

. BG {
width:200px;
height:100px;
Background:url (/folder/yourimage.png) no-repeat;
_background:none;
_filter:progid:dximagetransform.microsoft.alphaimageloader (src= '/folder/yourimage.png ', sizingMethod= ' crop ');
}
/* 1px gif method * *
IMG,. png {
position:relative;
Behavior:expression ((this.runtimestyle.behavior= "None") && (this.pngset?this.pngset=true: (This.nodename = = "IMG" && this.src.toLowerCase (). IndexOf ('. png ') >-1? (This.runtimeStyle.backgroundImage = "None", This.runtimeStyle.filter = "progid:d XImageTransform.Microsoft.AlphaImageLoader (src= ' + this.src + "', sizingmethod= ' image ')", this.src = "images/ Transparent.gif "):(THIS.ORIGBG = THIS.ORIGBG?  This.origBg:this.currentStyle.backgroundImage.toString (). replace (' url ("', ') '. Replace ('") ', '), This.runtimeStyle.filter = "Progid:DXImageTransform.Microsoft.AlphaImageLoader (src= '" + THIS.ORIGBG + "", sizingmethod= ' crop ') ", This.runtimeStyle.backgroundImage =" None "), this.pngset=true));
}

40. Set minimum height across browsers

#container {
min-height:550px;
Height:auto!important;
height:550px;
}

41, CSS3 Vivid input

Input[type=text], textarea {
-webkit-transition:all 0.30s ease-in-out;
-moz-transition:all 0.30s ease-in-out;
-ms-transition:all 0.30s ease-in-out;
-o-transition:all 0.30s ease-in-out;
Outline:none;
padding:3px 0px 3px 3px;
margin:5px 1px 3px 0px;
border:1px solid #ddd;
}
Input[type=text]:focus, Textarea:focus {
box-shadow:0 0 5px Rgba (81, 203, 238, 1);
padding:3px 0px 3px 3px;
margin:5px 1px 3px 0px;
border:1px Solid Rgba (81, 203, 238, 1);
}

42. Link 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;
}

43, forced line wrapping

pre{
White-space:pre-wrap; * css-3 * *
White-space:-moz-pre-wrap; * Mozilla, since 1999 * *
White-space:-pre-wrap; /* Opera 4-6 * *
White-space:-o-pre-wrap; /* Opera 7 * *
Word-wrap:break-word; /* Internet Explorer 5.5+ * *
}

44, in the clickable item to force the hand type

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

45, the top of the page box shadow

Body:before {
Content: "";
position:fixed;
Top: -10px;
left:0;
width:100%;
height:10px;
-webkit-box-shadow:0px 0px 10px Rgba (0,0,0,.8);
-moz-box-shadow:0px 0px 10px Rgba (0,0,0,.8);
box-shadow:0px 0px 10px Rgba (0,0,0,.8);
z-index:100;
}

46, CSS3 Dialogue bubble

. chat-bubble {
Background-color: #ededed;
border:2px solid #666;
font-size:35px;
Line-height:1.3em;
margin:10px Auto;
padding:10px;
position:relative;
Text-align:center;
width:300px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
-moz-box-shadow:0 0 5px #888;
-webkit-box-shadow:0 0 5px #888;
font-family: ' Bangers ', Arial, serif;
}
. chat-bubble-arrow-border {
Border-color: #666 transparent transparent transparent;
Border-style:solid;
border-width:20px;
height:0;
width:0;
Position:absolute;
Bottom: -42px;
left:30px;
}
. chat-bubble-arrow {
Border-color: #ededed transparent transparent transparent;
Border-style:solid;
border-width:20px;
height:0;
width:0;
Position:absolute;
Bottom: -39px;
left:30px;
}

47, H1-H5 Default Style

H1, H2, H3, H4, h5 {color: #005a9c;}
h1 {font-size:2.6em;line-height:2.45em;}
h2 {Font-size:2.1em;line-height:1.9em;}
h3 {font-size:1.8em;line-height:1.65em;}
h4 {Font-size:1.65em;line-height:1.4em;}
h5 {font-size:1.4em;line-height:1.25em;}

48, Pure CSS background noise

Body {
Background-image:url (Data:image/png;base64, ivborw0kggoaaaansuheugaaadiaaaaycamaaaap4xidaaaauvbmvewfhywdg4n3d3dtbw17e3t1dxwbgyghh4d5exlzc3oli4ubm5uvlzwpj4+ njy19fx2jiyl/ F39ra2urkzgzmzlpawmxl5dvb29xcxgtk5nnz2c8tv1maaaag3rstlnaqebaqebaqebaqebaqebaqebaqebaqebaqeaveowtaaafvkleqvr4xpwwb67c2bufb 3g557t/hro9/wumzhlgr4bg8z4qqgqjlhi4a8szfvrapvmtf9o7dmyrfz60yibhjrcgh1fyhilamdvx0cztopne77me0zty/ nwwzchdtiqrmqdeuv3powq5ta2en0fy0inkqdd73lt9c9lezwunqgfhs9vqce3tvclfcqrstfoiykvjqbmpbq2l6izavpnapcou0dsw0sutqz/ gtrguxfbyybnikykowqwgqwwma7qiyaxi+ilpdqo+hyhnut5zpfnshjynidtnpjyaynbkf6cwoygamy92u2hxhf/c1m8up/ ztydiuj26udadqqsxqerwsomzt/xwrwaz5gusbikwg1h3fabj2osuouhgc6tk4emtjo0ttc6ibd3km0ve0tjwmdsfjzo+ eeisaetr9p3wyrgjxqyc1krckdhmpxent5jetoulscpyzhxn5frpuphvbeqakxfaeb6en+ cyn6xd7rygpxpnndmmzgm5dcs3ysnfdhuo2lgfzuukswyuyirjadybf3mfqekmjm+i2efha94ig3l7ukrr+gdwd73ydlib+ 6hgref1qtlmgmbm3/lex5gi1ux1rwpgxpluz2+i+ijzz8wqe4nilvqdkudfhzi5qdwy+ Kw5wgg2pgpeevecca7b85bo3f9dzxb3cdqvbzwcmzbymiqhzuyqthrvg2y4x+kolnyqla8aowwpuboyrxzxrfkuill6sfiwcbjxozjuacbj1cjh7giadbc9kqby3w/rgjda1iqqcoju2ww+76pzc9qg7m00dffe9hnnseupfl53r8f7yhswjwukp2q+ k7rdsxyob11n0xtovnw4irmmfnv4h0uqws5exsmp9axbdtc9jwgneat5vtiusm1e7bsflst3bfa1tv8di3r8n3af7mnwzs49hmaue2wp+ttrq+ aswpfg2awvsuoqbipwhgtuvuaae+a1z/7gc9hesnr+7wqcwg8c5yag3al1fm8t9aztp/bbjgwl1pnre7ruox7pemruervappes+ Yqeosmuolokqw49pgomjleh7ichnlg19yjs6xxomedym5xh2yxpv2tc0ro2jjfxc50apuxgob7lmsxftbeuv07tyyxpeluceh1gnd4ikh2lag5tdvhlcafzvp skfnccfx8pohjzd76bjweyfnfciwcyfubrc12ip/ppiha1/msz/rxjfdrjc5xiffjjpy2xl5zxdgufqyytr1zsp1y9p+ tktdyysnflcxi0iyo4tpbdlrcpeqjk/pif5bklq77vseaa+z8qmjtfziwiitbnzr794uskbuat0ntesvjzqlafvqjopn9odg70ipbfbhkk+/q/ awr0tjzyhruloa4mp+w/hfgadzubfw177g7j/ogbis8tahlyynl4x4rinf793oz+bu0saxtuhrvbft/dna3ctnpogbs4hrijtok8i+ algt1lthi4sxfvonknrgqfaq2/gfnwmxgwffgymjpikykmw3ttg3zq9jq+f8xn+a5eeukhwvjwj2sgj1sop+ wwhqfvijqwajhwtd8mnlsbewnnwta5z5kpzw5+lbvt99wqtdx29lmuh4oig/d86rukeaubjvh5xy6um/ Sfj7ei6uuvk4ail3myd4msstofgswsh/qjwaq5as7zcmgbzkzjju1urq74ci1gwbcsghtuv1h2mhsno3wp/3fev5a+4wz//6qy8jxjzsmxxy5+4w9cdnjy09t072ikg0enos0areygxqynxcyhwjttunacmelod4xpkoqityicwfq0jsipfpdqdnt+4/ wuqcxy47qilbgaaaabjru5erkjggg==);
Background-color: #0094d0;
}

49. Persistent list Ordering

ol.chapters {
List-style:none;
margin-left:0;
}
Ol.chapters > Li:before {
Content:counter (chapter) ".";
Counter-increment:chapter;
Font-weight:bold;
Float:left;
width:40px;
}
Ol.chapters Li {
Clear:left;
}
Ol.start {
Counter-reset:chapter;
}
ol.continue {
Counter-reset:chapter 11;
}

50, CSS floating hint text

A
border-bottom:1px solid #bbb;
Color: #666;
Display:inline-block;
position:relative;
Text-decoration:none;
}
A:hover, A:focus {
Color: #36c;
}
a:active {
top:1px;
}
/* Tooltip Styling * *
A[data-tooltip]:after {
border-top:8px solid #222;
border-top:8px solid Hsla (0,0%,0%,.85);
border-left:8px solid Transparent;
border-right:8px solid Transparent;
Content: "";
Display:none;
height:0;
width:0;
left:25%;
Position:absolute;
}
A[data-tooltip]:before {
Background: #222;
Background:hsla (0,0%,0%,.85);
Color: #f6f6f6;
Content:attr (Data-tooltip);
Display:none;
Font-family:sans-serif;
font-size:14px;
height:32px;
left:0;
line-height:32px;
Padding:0 15px;
Position:absolute;
text-shadow:0 1px 1px hsla (0,0%,0%,1);
White-space:nowrap;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;
}
A[data-tooltip]:hover:after {
Display:block;
Top: -9px;
}
A[data-tooltip]:hover:before {
Display:block;
Top: -41px;
}
A[data-tooltip]:active:after {
Top: -10px;
}
A[data-tooltip]:active:before {
Top: -42px;
}

60.

51, dark gray round button

. graybtn {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
Box-shadow:inset 0px 1px 0px 0px #ffffff;
Background:-webkit-gradient (linear, left top, left bottom, color-stop (0.05, #ffffff), Color-stop (1, #d1d1d1));
Background:-moz-linear-gradient (center top, #ffffff 5, #d1d1d1 100%);
Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #ffffff ', endcolorstr= ' #d1d1d1 ');
Background-color: #ffffff;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #dcdcdc;
Display:inline-block;
Color: #777777;
font-family:arial;
font-size:15px;
Font-weight:bold;
PADDING:6PX 24px;
Text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
}
. graybtn:hover {
Background:-webkit-gradient (linear, left top, left bottom, color-stop (0.05, #d1d1d1), Color-stop (1, #ffffff));
Background:-moz-linear-gradient (center top, #d1d1d1 5, #ffffff 100%);
Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #d1d1d1 ', endcolorstr= ' #ffffff ');
Background-color: #d1d1d1;
}
. graybtn:active {
position:relative;
top:1px;
}

52. Display URLs in printable Web pages

@media Print {
A:after {content: "[attr (HREF)]";}
}1.
2.
3.

53, disable the choice of mobile WebKit highlight

Body {
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
User-select:none;
}

54, CSS3 dot Pattern

Body {
Background:radial-gradient (Circle, white 10%, transparent 10%), radial-gradient (Circle, White 10%, black 10%) 50px 50px;
background-size:100px 100px;
}

55, CSS3 Square pattern

Body {
Background-color:white;
Background-image:linear-gradient (45deg, black 25%, transparent 25%, transparent 75%, black 75%, Black), Linear-gradient ( 45deg, black 25%, transparent 25%, transparent 75%, black 75%, Black);
background-size:100px 100px;
background-position:0 0, 50px 50px;
}

56, GitHub Fork Ribbon

. Ribbon {
Background-color: #a00;
Overflow:hidden;

/* Top Left corner * *
Position:absolute;
Left: -3em;
Top:2.5em;

* DEG CCW Rotation * *
-moz-transform:rotate ( -45DEG);
-webkit-transform:rotate ( -45DEG);

* Shadow * *
-moz-box-shadow:0 0 1em #888;
-webkit-box-shadow:0 0 1em #888;
}
. Ribbon a {
border:1px solid #faa;
Color: #fff;
Display:block;
Font:bold 81.25% ' Helvetiva neue ', Helvetica, Arial, Sans-serif;
Margin:0.05em 0 0.075em 0;
Padding:0.5em 3.5em;
Text-align:center;
Text-decoration:none;
* Shadow * *
text-shadow:0 0 0.5em #444;
}

57. CSS Font Property abbreviation

P{font:italic small-caps Bold 1.2em/1.0em Arial, Tahoma, Helvetica; 1.

58, the paper page curl effect

Ul.box {
position:relative;
Z-index:1; /* Prevent shadows falling behind containers with backgrounds * *
Overflow:hidden;
List-style:none;
margin:0;
padding:0;
}
Ul.box li{
position:relative;
Float:left;
width:250px;
height:150px;
padding:0;
border:1px solid #efefef;
margin:0 30px 30px 0;
Background: #fff;
-webkit-box-shadow:0 1px 4px rgba (0, 0, 0, 0.27), 0 0 40px rgba (0, 0, 0, 0.06) inset;
-moz-box-shadow:0 1px 4px rgba (0, 0, 0, 0.27), 0 0 40px rgba (0, 0, 0, 0.06) inset;
box-shadow:0 1px 4px rgba (0, 0, 0, 0.27), 0 0 40px rgba (0, 0, 0, 0.06) inset;
}
Ul.box Li:before, Ul.box li:after {
Content: ';
Z-index:-1;
Position:absolute;
left:10px;
bottom:10px;
width:70%;
max-width:300px; /* Avoid rotation causing ugly appearance at large container widths * *
max-height:100px;
height:55%;
-webkit-box-shadow:0 8px 16px rgba (0, 0, 0, 0.3);
-moz-box-shadow:0 8px 16px rgba (0, 0, 0, 0.3);
box-shadow:0 8px 16px rgba (0, 0, 0, 0.3);
-webkit-transform:skew ( -15deg) rotate ( -6deg);
-moz-transform:skew ( -15deg) rotate ( -6deg);
-ms-transform:skew ( -15deg) rotate ( -6deg);
-o-transform:skew ( -15deg) rotate ( -6deg);
Transform:skew ( -15deg) rotate ( -6deg);
}
Ul.box Li:after {
Left:auto;
right:10px;
-webkit-transform:skew (15deg) rotate (6deg);
-moz-transform:skew (15deg) rotate (6deg);
-ms-transform:skew (15deg) rotate (6deg);
-o-transform:skew (15deg) rotate (6deg);
Transform:skew (15deg) rotate (6deg);
}

59, the bright cable connection

A{color: #00e}
A:visited{color: #551a8b}
A:hover{color: #06e}
A:focus{outline:thin dotted}
a:hover,a:active{outline:0}
A,a:visited,a:active{text-decoration:none;color: #fff-webkit-transition:all 3s ease-in-out}
A:hover,.glow{color: #ff0; text-shadow:0 0 10px #ff0}

60, with CSS3 characteristics of the banner display

. featurebanner{position:relative;margin:20px}
. Featurebanner:before{content: "Featured";p Osition:absolute;top:5px;left:-8px;padding-right:10px;color: #232323; font-weight:bold;height:0px;border:15px solid #ffa200; Border-right-color:transparent;line-height:0px;box-shadow : -0px 5px 5px-5px #000 z-index:1}
. Featurebanner:after{content: "";p osition:absolute;top:35px;left:-8px;border:4px solid #89540c; Border-left-color: Transparent;border-bottom-color:transparent}