Sponsored Ad

Thursday, April 22, 2010

How to Add Effect in Image and Text using CSS

 

We can add effects in our html images and text using css – cascading style sheet.

Lets start with a image as given below in code add style property in image tag and inside Blur “Add” , “Direction” and “Strength” is playing important roll to give a special effect.

style="Filter: Blur(Add = 0, Direction = 225, Strength = 5)"

Same thing is applicable for text also. you can change the values of these 3 parameters and get different effects.

<html>
<head>
<style type="text/css">
img.x { position:absolute; left:0px; top:0px; z-index:-1 }
</style>
</head>
<body>

<img src="Sunset.jpg" style="Filter: Blur(Add = 0, Direction = 225, Strength = 5)">
<br>
<br>

<span style="width: 600; height: 50; font-size: 36pt; font-family: Arial Black; color: blue; Filter: Blur(Add
= 1, Direction = 50, Strength = 7)">Text blur effect</span>

</body>
</html>

No comments:

Post a Comment

Sponsored Ad

Development Updates