Now everytime we want to give some nice effect to the text we don't need to move to photoshop,css3 has made it easy to give very nice photoshop like effects to the text using text-gradient attribute along with some other selected attributes.
CSS3 Text gradient and :after pseudo element
CSS3 text gradient can give photoshop like effect to the text.
BASIC HTML
<h1 data-text="thewwwdesigners">thewwwdesigners</h1>
Here we use an attribute called text (it can be anything) and then give it the same value as it is in the h1 tag.Then using the content property in css (see below) we can insert the text using the text attribute ,it will pace the text next to the previous text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>css text gradient</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1 text="thewwwdesigners">thewwwdesigners</h1>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>css text gradient</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1 text="thewwwdesigners">thewwwdesigners</h1>
</body>
</html>
CSS
h1::after{
content:attr(data-text);
CSS pseudo-elements are used to add special effects to some selectors.
The :after(or ::after) selector inserts content after the selected element(s).Use the content property to specify the content to insert.
The :after(or ::after) selector inserts content after the selected element(s).Use the content property to specify the content to insert.
body
{
background: #333;
}
h1 {
font-size: 100px;
font-family: sans-serif;
position:relative;
color:#666 ;
text-shadow: 0px -1px 2px white;
}
h1::after{
content:attr(data-text);
position:absolute;
left:0;
color:white;
-webkit-mask-image:-webkit-gradient(
linear,left bottom,left top,
from(rgba(0,0,0,0)),
color-stop(40%,rgba(0,0,0,0)),
to(rgba(1,1,1,1))
);
{
background: #333;
}
h1 {
font-size: 100px;
font-family: sans-serif;
position:relative;
color:#666 ;
text-shadow: 0px -1px 2px white;
}
h1::after{
content:attr(data-text);
position:absolute;
left:0;
color:white;
-webkit-mask-image:-webkit-gradient(
linear,left bottom,left top,
from(rgba(0,0,0,0)),
color-stop(40%,rgba(0,0,0,0)),
to(rgba(1,1,1,1))
);
-webkit-mask-image:-webkit-gradient( )
Setting it to linear (it can be radial also) and then giving it direction accordinly (left top corner and left bottom corner in this case) will give very nice effects to the text.The color stop allows to stop the color at that point an also allows to give color at that point.The to and from attributes set the color values according to the direction given.
