Image Opacity / Transparency
- The CSS
opacityproperty is a part of the CSS3 recommendation.
Example
1 img { 2 opacity: 0.4; 3 filter: alpha(opacity=40); /* For IE8 and earlier */ 4 } 5 6 img:hover { 7 opacity: 1.0; 8 filter: alpha(opacity=100); /* For IE8 and earlier */ 9 }
Image Sprites
- An image sprite is a collection of images put into a single image.
Example
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 #navlist { 6 position: relative; 7 } 8 9 #navlist li { 10 margin: 0; 11 padding: 0; 12 list-style: none; 13 position: absolute; 14 top: 0; 15 } 16 17 #navlist li, #navlist a { 18 height: 44px; 19 display: block; 20 } 21 22 #home { 23 left: 0px; 24 width: 46px; 25 background: url('img_navsprites_hover.gif') 0 0; 26 } 27 28 #prev { 29 left: 63px; 30 width: 43px; 31 background: url('img_navsprites_hover.gif') -47px 0; 32 } 33 34 #next { 35 left: 129px; 36 width: 43px; 37 background: url('img_navsprites_hover.gif') -91px 0; 38 } 39 40 #home a:hover { 41 background: url('img_navsprites_hover.gif') 0 -45px; 42 } 43 44 #prev a:hover { 45 background: url('img_navsprites_hover.gif') -47px -45px; 46 } 47 48 #next a:hover { 49 background: url('img_navsprites_hover.gif') -91px -45px; 50 } 51 </style> 52 </head> 53 <body> 54 55 <ul id="navlist"> 56 <li id="home"><a href="default.asp"></a></li> 57 <li id="prev"><a href="css_intro.asp"></a></li> 58 <li id="next"><a href="css_syntax.asp"></a></li> 59 </ul> 60 61 </body> 62 </html>
CSS Attribute Selectors
- Style HTML elements that have specific attributes or attribute values.
1> CSS [attribute] Selector
- Used to select elements with a specified attribute.
2> CSS [attribute="value"] Selector
- Used to select elements with a specified attribute and value.
Example
1 a[target] { 2 background-color: yellow; 3 } 4 a[target="_blank"] { 5 background-color: blue; 6 }
3> CSS [attribute~="value"] Selector
- Used to select elements with an attribute value containing a specified word.
4> CSS [attribute*="value"] Selector
- Used to select elements whose attribute value contains a specified value.
1 [title~=flower] { 2 border: 5px solid yellow; 3 } 4 title="klematis flower" > yes 5 title="flower" > yes 6 title="tree_flower" > no 7 8 [class*="te"] { 9 background: yellow; 10 } 11 class="first_test" > yes 12 class="mytest" > yes
5> CSS [attribute|="value"] Selector
- Used to select elements with the specified attribute starting with the specified value.
6> CSS [attribute^="value"] Selector
- Used to select elements whose attribute value begins with a specified value.
1 [class|=top] { 2 background: yellow; 3 } 4 class="top-header" > yes 5 class="top-text" > yes 6 class="topcontent" > no 7 8 [class^="top"] { 9 background: yellow; 10 </style> 11 class="top-header" > yes 12 class="top-text" > yes 13 class="topcontent" > yes
7> CSS [attribute$="value"] Selector
- Used to select elements whose attribute value ends with a specified value.
1 [class$="test"] { 2 background: yellow; 3 } 4 class="first_test" > yes 5 class="my-test" > yes