Thanks to text shadows, outlines, transitions, and even text gradients, we can now create cool typography that you’d swear had to be made with a program like Photoshop. Nope, all CSS3 baby! Let’s take a look in this video quick tip.
Premium Members: Download this Video ( Must be logged in)
Subscribe to our YouTube page to watch all of the video tutorials!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Subtle Typography</title>
<style>
body {
background: #666;
padding: 1em;
}
h1 {
position: relative;
font-size: 200px;
margin-top: 0;
font-family: 'Myriad Pro', 'Myriad', helvetica, arial, sans-serif;
text-shadow: 2px 3px 3px #292929;
letter-spacing: -7px;
-webkit-text-stroke: 1px white;
}
h1 a {
text-decoration: none;
color: #ffffff;
position: absolute;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,0)), to(rgba(0,0,0,1)));
text-shadow: 0 2px 0 #e9e9e9;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
h1 a:hover {
color: #185a50;
}
h1:after {
content : 'Hello Readers';
color: #dbdbdb;
}
</style>
</head>
<body>
<h1> <a href="#">Hello Readers </a> </h1>
</body>
</html>