CSS Common Summary

1, whenever a big disaster, a lot of websites turned gray, how to make the site quickly gray? CSS code is very simple, with the CSS filter function.

{   filter: grayscale (100%);  IE browser  -webkit-filter: grayscale (100%);  Google Chrome  -moz-filter: grayscale (100%);  Firefox  -ms-filter: grayscale (100%);   -o-filter: grayscale (100%);   Filter:progid:DXImageTransform.Microsoft.BasicImage (grayscale=1);   -webkit-filter: grayscale (1); //Google Chrome }

Some Web site Flash animation colors can not be controlled by the CSS filter, the flash code and between the insertion:

<param value="false" name="menu"/><param value="opaque" name="wmode"/>

2.DIV editable, that is, a div into a similar input box effect.

Adding the Contenteditable= "true" attribute to the DIV is OK, as follows:

<div id= "Div1" contenteditable= "true"  ></div>  <div id= "Div2" contenteditable= "true" >< /div>   <div contenteditable= "true"  id= "Div3" ></div>

　

3, some websites in order not to let users copy, set the div forbidden function, set the following properties:

<unselectable= "on"  onselectstart= "return false;" > sdfsdfswerwer324234234234 </ Div >

5, input Voice input button, (tightly support Google)

<input type= "text" class= "box" name= "S" id= "S" class= "Inputtext" placeholder= "input keywords"  x-webkit-speech>

6. Set color to Input placeholder

::-webkit-input-placeholder{/*WebKit Browsers*/Color:#999;}:-moz-placeholder{/*Mozilla Firefox 4 to*/Color:#999;}::-moz-placeholder{/*Mozilla Firefox 19+*/Color:#999;}:-ms-input-placeholder{/*Internet Explorer + +*/Color:#999;}

7 Transparency

. Haorooms {opacity: 0; cursor:pointer;   -ms-filter:"Progid:DXImageTransform.Microsoft.Alpha (opacity=0)"; filter: Alpha (opacity=0);}

The background color setting is transparent when the code is as follows, IE8 below is not supported, to go to this address to convert startcolorstr,endcolorstr. http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/

. Caption{position:Absolute;background:Rgba (226,105,116,0.8); Left:0;Top:0;Display:None;Color:#ffffff;Height:100%;width:182px;padding:0 12px 0 13px;Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= "#e26974", endcolorstr= "#e26974");}

8 out-of-length display ellipsis

Display:bolck;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;

9.CSS Force line break and no line break

Wrap: word- Wrap: break-word;  Span class= "PLN" >< Span class= "PLN" >word -break: Normal

< Span class= "PLN" >< Span class= "pun" > Force English word to break: word-break:-all

Force No Line break:white-space:nowrap;

10.CSS3 Elastic Box

#haorooms ul{//Father display:-moz-box;Display:-webkit-box;Display:Box;-moz-box-orient:Horizontal;-webkit-box-orient:Horizontal;box-orient:Horizontal; }#haorooms ul Li{//Son set-moz-box-flex:1;-webkit-box-flex:1;Box-flex:1;float:None;}

This digest from: Http://www.haorooms.com/post/css_common

CSS Common Summary