Image Opacity / Transparency

• The CSS opacity property 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  2  3  4 52 53 54 55 
     
      56   
      
57   
      
58   
      
59 
     
60 61 62 

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"        > yes12 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 11 class="top-header"    > yes12 class="top-text"      > yes13 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