" Live as if you were to die tomorrow. Learn as if you were to live forever.. "
- Mahatma Gandhi
" Live as if you were to die tomorrow. Learn as if you were to live forever.. "
- Mahatma Gandhi
Earlier, if we wanted to apply a outline/stroke effect to text in a web page, we would have to rely on images. But with the latest CSS we can get the effect without using images.
By using CSS text shadow property we can achieve this. Please note,this method is most relevant for the time being as it is supported by most of the major browsers excluding IE prior to IE 9.0,
.stroke
color: #c00; /* text color */
text-shadow
:
{
}
-1px -1px 0 color, /*X-co-ordinate, Y-Coordinate, blur radius, color*/
1px -1px 0 color,
-1px 1px 0 color,
1px 1px 0 color;
There is one more property in css 3.0 by which we can achieve this behavior and that is css 3 text-stroke property currently it is supported by chrome and safari only.
The syntax is
.stroke
{
color: your color;
-webkit-text-stroke: 1px #000; /* stroke weight and stroke color */
}
One other way of achieving this behavior is by using css 3.0 text-outline property but currently it is not supported by any of the major browser
.stroke
{
text-outline : 1px 1px #fff; /*thickness blur color*/
}
Code:
<html>
<head>
<style type="text/css">
.stroke
{
color: #fff;
text-shadow:
-1px -1px 0 #F660AB,
1px -1px 0 #F660AB,
-1px 1px 0 #F660AB,
1px 1px 0 #F660AB;
}
/style>
</head>
<body>
<div>Text with stroke effect</div>
</body>
</html>