CSS ARTICLES

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

Custom Text Markers For Lists – 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>CustomTextMarkerforLists</title>
</head>
<style>
ul {
list-style:none;
margin:0;
padding:0 0 0 1em;
text-indent:-1em;
}
li {
width:50%;
padding:0;
margin: 0 0 0.25em 0;
}
li:before {
content: "2713";
padding-right:4px;
}
</style>
<body>
<ul>
<li>The fist item on the list</li>
<li>The second item on the list</li>
<li>The third item on the list</li>
<li>The fourth item on the list</li>
</ul>
</body>
</html>

[/html]

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

Centreing an Element – 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>
#box {
width:400px;
margin-right:auto;
margin-left:auto;
background-color:#3F0;
height:400px;

}
</style>
</head>

<body>
<div id="box">

</div>
</body>
</html>

[/html]

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

Eliminate All Browsers Default Setting – CSS

[html]
/*
YUI 3.8.0 (build 5744)
Copyright 2012 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:”}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}
 [/html]
Downlaod link : http://yui.yahooapis.com/3.8.0/build/cssreset/cssreset-min.css

Applying Mask to Image – 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>
img {
display:block;
border:1px solid #ccc;
padding:2px;
background-color:#666;
mask-box-image: url(mask.png);
-webkit-mask-box-image: url(mask.png);
-moz-mask-box-image: url(mask.png);
}
</style>
</head>

<body>
<img src="Apps-HTML-5-Metro-icon.png" width="128" height="128" />
</body>
</html>

[/html]

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

Word Balloon – 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>
blockquote {
width:200px;
}
blockquote p {
background:url(balloon.gif);
background-repeat:no-repeat;
background-position:bottom;
padding-bottom:28px;
}
blockquote p span {
display:block;
padding:15px;
border:2px solid black;
border-bottom-width:0px;
font-size:2.5 em;
line-height:0.9em;
}
</style>
</head>

<body>
<blockquote>
<p>
<span>
Content in the Balloon!
</span>
</p>
<cite>
Parham Majd
</cite>
</blockquote>
</body>
</html>

[/html]

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

Gradient Background – 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>
#box {
width:400px;
height:400px;
border:2px solid #666;
margin:20px;
background-image: -webkit-gradient(radial, center center, 600, center bottom, 0, from(#0cf), to(white));
background-image: -moz-radial-gradient(center, 600px, center bottom, 0, from(#0cf), to(white));
background-repeat:no-repeat;
}

</style>
</head>

<body>
<div id="box">

</div>
</body>
</html>

[/html]

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

Rotate an Image (Cross Browsers) – 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>
img+img {
transform:rotate(90deg);
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
</style>
</head>

<body>
<img src="add-icon.png" width="128" height="128" />
<img src="add-icon.png" width="128" height="128" />
<img src="add-icon.png" width="128" height="128" />
</body>
</html>

[/html]

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