Articles with tag: css

Inserting an Icon At the End Of a Link – CSS

[html]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
a {
text-decoration:none;
font-weight:bold;
}
a[href^="mailto:"] {
padding-right:20px;
background-image:url(Mail-icon.png);
background-repeat:no-repeat;
background-position:right;
}

</style>
</head>

<body>
Send me <a href="mailto:me@parhammajd.co.uk">an email</a> if you have any questions.

</body>
</html>

[/html]

Download Image Link: http://parhammajd.co.uk/examples/css/Mail-icon.png

DEMO LINK: http://parhammajd.co.uk/examples/css/iconAtEndOfLink.html

Star Ranking System – CSS

[html]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>StarRankingSystem</title>
<style>
.rating {
margin:0;
padding:0;
list-style:none;
clear:both;
width:75px;
height:15px;
background-image:url(stars.png);
background-repeat:no-repeat;
position:relative;
}
.rating li {
text-indent:-999em;
float:left;
}
.rating li a {
position:absolute;
top:0;
left:0;
z-index:20;
height:15px;
width:15px;
display:block;
}
.rating .one a {
left:0;
}
.rating .two a {
left:15px;
}
.rating .three a {
left:30px;
}
.rating .four a {
left:45px;
}
.rating .five a {
left:60px;
}
#pro12 .rating {
/* background-position:0 0px; */
/* background-position:0 -15px; */
/* background-position:0 -30px; */
/* background-position:0 -45px; */
background-position:0 -60px;
/* background-position:0 -75px; */
}
#pro12 .rating li a:hover {
z-index:10;
width:75px;
height:15px;
overflow:hidden;
left:0;
background-image:url(stars.png);
background-repeat:no-repeat;
}
#pro12 .rating .one a:hover {
background-position: 0 -105px;
}
#pro12 .rating .two a:hover {
background-position: 0 -120px;
}
#pro12 .rating .three a:hover {
background-position: 0 -135px;
}
#pro12 .rating .four a:hover {
background-position: 0 -150px;
}
#pro12 .rating .five a:hover {
background-position: 0 -165px;
}
</style>
</head>

<body>
<div class="product" id="pro12">
<h2>Swatch Watch Model:12K</h2>
<p>Submit Your review</p>
<ul class="rating">
<li class="one"><a href="#">1 Star</a></li>
<li class="two"><a href="#">2 Stars</a></li>
<li class="three"><a href="#">3 Stars</a></li>
<li class="four"><a href="#">4 Stars</a></li>
<li class="five"><a href="#">5 Stars</a></li>
</ul>
</div>
</body>
</html>

[/html]

Download the Image here: http://parhammajd.co.uk/examples/css/stars.png

DEMO LINK: http://parhammajd.co.uk/examples/css/StarRankingSystem.html