Common css,

Common css,

/** Ie8 supports transparency **/
Rgba (0.4, 0,); // ie8 is not supported
Filter: progid: DXImageTransform. Microsoft. gradient (startColorstr = #19000000, endColorstr = #19000000 );
The color "#19000000" is composed of two parts.
The first part is 19 after. Is the IEfilter value of rgba transparency 0.1. Each number from 0.1 to 0.9 corresponds to an IEfilter value. The relationship is as follows:
0.1-19; 0.2-33; 0.3-4C; 0.4-66; 0.5-7F; 0.6-99; 0.7-B2; 0.8-C8; 0.9-E5;
The second part is the six digits after the 19th digit. This is a hexadecimal color value. The value must be the same as that in the rgb function. For example, the # ffffff; corresponding to rgb (255,255,255) is white.
By now, rgba is compatible with IE8.

1. Disable Text Selection
Body {
-Webkit-touch-callout: none;
-Webkit-user-select: none;
-Khtml-user-select: none;
-Moz-user-select: none;
-Ms-user-select: none;
User-select: none;
}

2. Display URLs on printable web pages
@ Media print {
A: after {
Content: "[" attr (href) "]";
}
}

3. Click the gradient button in the dark gray area.
. 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 = '# ffff', 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 = '# ffff ');
Background-color: # d1d1d1;
}
. Graybtn: active {
Position: relative;
Top: 1px;
}


4. Box shadow on the top of the webpage
Body: before {
Content :"";
Position: fixed;
Top:-10px;
Left: 0;
Width: 100%;
Height: 10px;

-Webkit-box-shadow: 0px 0px 10px rgba (0, 0,. 8 );
-Moz-box-shadow: 0px 0px 10px rgba (0, 0,. 8 );
Box-shadow: 0px 0px 10px rgba (0, 0, 0,. 8 );
Z-index: 100;
}

5. Force the manual model on the clickable Project
A [href], input [type = 'submit '], input [type = 'image'], label [for], select, button,. pointer {
Cursor: pointer;
}


6. CSS3 bright input (border gradient)
Input [type = text], textarea {
-Webkit-transition: all 0.30 s bytes-in-out;
-Moz-transition: all 0.30 s bytes-in-out;
-Ms-transition: all 0.30 s bytes-in-out;
-O-transition: all 0.30 s bytes-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 );
}


7. Triangle List project symbol
Ul {
Margin: 0.75em 0;
Padding: 0 1em;
List-style: none;
}
Li: before {
Content :"";
Border-color: FIG #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;
}


8. Internal 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;
}


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


10. @ 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;
}

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

12. CSS3: full screen background
Html {
Background: url ('images/bg.jpg ') no-repeat center fixed;
-Webkit-background-size: cover;
-Moz-background-size: cover;
-O-background-size: cover;
Background-size: cover;
}

13. Pseudo-category of anchor links
A: link {color: blue ;}
A: visited {color: purple ;}
A: hover {color: red ;}
A: active {color: yellow ;}

14. polarized border
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 height of your image or desired div */
Width: 200px;/* Set to width of your image or desired div */
}

15. General media Query
/* 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 */
}

/* Export tops and laptops -----------*/
@ Media only screen and (min-width: 1224px ){
/* Styles */
}

/* Large screens -----------*/
@ Media only screen and (min-width: 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 */
}

16. 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 */
}

17. animation of ellipsis using CSS
. Loading: after {
Overflow: hidden;
Display: inline-block;
Vertical-align: bottom;
Animation: ellipsis 2 s infinite;
Content: "\ 2026";/* ascii code for the ellipsis character */
}
@ Keyframes ellipsis {
From {
Width: 2px;
}
To {
Width: 15px;
}
}

18. Create fuzzy text
. Blurry-text {
Color: transparent;
Text-shadow: 0 0 5px rgba (0, 0, 0, 0.5 );
}

19. The long text of the package is too long and automatic line breaks will not break through the box.
Pre {
White-space: pre-line;
Word-wrap: break-word;
}

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

21. editable content (contenteditable = "true ")
<Ul contenteditable = "true">
<Li> mourn the death of Hong Kong compatriots </li>
<Li> 30 th anniversary of Shenzhen SAR </li>
<Li> Yichun air crash </li>
</Ul>


22. Change the placeholder font color in the input box.
:-Webkit-input-placeholder {
Color: red;
}
:-Moz-placeholder {
Color: red;
}
:-Moz-placeholder {
Color: red;
}
:-Ms-input-placeholder {
Color: red;
}