Image Opacity / Transparency
- The CSS
opacityproperty is a part of the CSS3 recommendation.
Example
img {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
img:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
Image Sprites
- An image sprite is a collection of images put into a single image.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#navlist {
position: relative;
} #navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
} #navlist li, #navlist a {
height: 44px;
display: block;
} #home {
left: 0px;
width: 46px;
background: url('img_navsprites_hover.gif') 0 0;
} #prev {
left: 63px;
width: 43px;
background: url('img_navsprites_hover.gif') -47px 0;
} #next {
left: 129px;
width: 43px;
background: url('img_navsprites_hover.gif') -91px 0;
} #home a:hover {
background: url('img_navsprites_hover.gif') 0 -45px;
} #prev a:hover {
background: url('img_navsprites_hover.gif') -47px -45px;
} #next a:hover {
background: url('img_navsprites_hover.gif') -91px -45px;
}
</style>
</head>
<body> <ul id="navlist">
<li id="home"><a href="default.asp"></a></li>
<li id="prev"><a href="css_intro.asp"></a></li>
<li id="next"><a href="css_syntax.asp"></a></li>
</ul> </body>
</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
a[target] {
background-color: yellow;
}
a[target="_blank"] {
background-color: blue;
}
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.
[title~=flower] {
border: 5px solid yellow;
}
title="klematis flower" > yes
title="flower" > yes
title="tree_flower" > no
[class*="te"] {
background: yellow;
}
class="first_test" > yes
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.
[class|=top] {
background: yellow;
}
class="top-header" > yes
class="top-text" > yes
class="topcontent" > no
[class^="top"] {
background: yellow;
</style>
class="top-header" > yes
class="top-text" > yes
class="topcontent" > yes
7> CSS [attribute$="value"] Selector
- Used to select elements whose attribute value ends with a specified value.
[class$="test"] {
background: yellow;
}
class="first_test" > yes
class="my-test" > yes