Subtle CSS3 Typography that you’d Swear was Made in Photoshop

Thursday, 12 August 2010 20:19

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 [...]

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 {
		color: #dbdbdb;
		content : attr(data-title);
	}

	</style>
</head>
<body>
     <h1 data-title="Hello Readers"> <a href="#"> Hello Readers </a> </h1>
</body>
</html>