CSS code collation, collection

Collation of the previous use of CSS code, to achieve a kind of effect may have many kinds of writing, I am here to organize a bit I personally think compatibility is better, the structure of the more concise code ... If there is no place to write, please enlighten the elder brother, I appreciate it! This learning note is dynamic-I find that a good code snippet will be added on a rolling-up date.

Css:ellipsis ellipsis

<style>.news{width:320px; text-overflow:ellipsis;-o-text-overflow:ellipsis;-moz-binding:url (' Ellipsis.xml #ellipsis '); -ms-text-overflow:ellipsis; -webkit-text-overflow:ellipsis; Overflow:hidden;}. News A{white-space:nowrap;} </style>  
<div class= "News" >    <a href= "javascript:void (0);" > Hello, I am a CSS ellipsis, support a variety of browsers, including the big ie6</a>    <a href= "javascript:void (0);" > Hello, I am a CSS ellipsis, support a variety of browsers, including the big ie6</a></div>

Move the mouse over the picture slowly darken (light) a little

This is the use of transparent (opacity), gradient (transition) implementation, the following is the case of darkening:

<style>.link_img{display:inline-block; width:auto; height:auto;}. link_img:hover{  background-color: #000;}. Link_img:hover img{Display:block; Filter:alpha (opacity=80); opacity:0.8; Transition:all 0.5s ease-out;- Webkit-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; -o-transition:all 0.5s Ease-out;} </style>
<a href= "javascript:void (0);" class= "link_img" ></a><a href= " Javascript:void (0); "class=" link_img "></a>

Css:border implementation of Triangles

If you want to implement a drum, such as Sina Weibo, Sina's use of is a special character "", can achieve compatibility to ie6,html code structure is not concise, in the HTML to write more than the class "Wb_arrow" layer of code,

To be concise, you can only use border and pseudo-class before,after, with the following code:

View Code

Running results such as:

IE6 's:

But with pseudo-class before,after border in the big IE6 can not make triangles, such as to be compatible with the IE6 also have to use Sina's method, or with Sina's similar, but not with special characters, but also with border do triangles, as follows:

 1 <style> 2. dome{width:300px; padding:30px 20px; border:1px solid #beceeb; position:relative;} 3. Dome. Trian     gle{position:absolute; bottom:0px; left:50px;} 4. Dome. Triangle. bot{5 _display:block; 6 _line-height:0px; 7 border-width:20px;  8 Border-style:solid dashed dashed dashed; 9 Border-color: #beceeb Transparent transparent transparent;10 position:absolute;11 bottom:-40px;12}13. Dome. Triangle. top{14 _display:block;15 _line-height:0px;16 border-width:20px; Border-style:solid dashed da Shed dashed; Border-color: #FFF Transparent transparent transparent;19 position:absolute;20 bottom:-39px; </style>23 <div class= "Dome" >25 <div class= "triangle" >26 <em class= "Bot" ></ em>27 <em class= "Top" ></em>28 </div>29 <div class= "Txtbox" >30 I am a triangle implemented with border, HT ML structure similar to the structure on Sina Weibo </div>32 </div>