0

CSS3 – Glow Effects Without Photoshop

 CSS3 – Glow Effects Without Photoshop 






HTML:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 - Glow Effects Without Photoshop</title>
</head>
 
<body>
<a class="box">My box with glow</a>
</body>
</html>
 
Create a new html page according to the structure above. Insert a class called “box” to <a> tag.
 

CSS:

body {
    background: #000;  
}
 
.box {
    background: #1c1c1c;
    color: #0099ff;
    display: block;
    margin: 30px;
    padding: 20px;
    text-align: center;
    width: 150px;
    -moz-box-shadow: 0px 0px 15px #0099ff;
    -webkit-box-shadow: 0px 0px 15px #0099ff;
    box-shadow: 0px 0px 15px #0099ff;
}
 
Use the CSS3 property called “box-shadow” which we learnt in past tutorial to create the outer-glow effects for your element. The explanation of the property:

 -moz-box-shadow: [position-x] [position-y] [blur-radius] [color];-webkit-box-shadow: [position-x] [position-y] [blur-radius] [color];box-shadow: [position-x] [position-y] [blur-radius] [color];

In this case, we want the glow effect appear in the middle of our button, so we set the x, y position of the shadow to 0, and we want the glow with 15px blur in light blue. That’s it!
Note:
-moz-box-shadow is specifically for gecko browser(Firefox), -webkit-box-shadow is for webkit browser(Safari, Chrome) and box-shadow is for coming modern browser such as IE9.

 

 

 

Rohit Tripathi

Phasellus facilisis convallis metus, ut imperdiet augue auctor nec. Duis at velit id augue lobortis porta. Sed varius, enim accumsan aliquam tincidunt, tortor urna vulputate quam, eget finibus urna est in augue.

No comments:

Post a Comment