Como hacer gradientes en la texto con CSS

Publicado el 01. jun, 2010 por Peter Olle in Código, Diseño, Internet, Tecnología, Videos

Código final:

<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Text Gradients</title>
	<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

	<style>
	body {
		background: #292929;
		padding: 1em;
	}

	h1 {
		position: relative;
		font-size: 70px;
		margin-top: 0;
		font-family: 'Lobster', helvetica, arial;
	}

	h1 a {
		text-decoration: none;
		color: #666;
		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,.5)), to(rgba(0,0,0,1)));
	}

	h1:after {
		content : 'Hello World';
		color: #d6d6d6;
		text-shadow: 0 1px 0 white;
	}

	</style>
</head>
<body>
     <h1> <a href="#"> Hello World </a> </h1>
</body>
</html>

Vía | net.tutsplus.

Tags: CSS

Peter Olle

Autor de todas las cosas que se publican en este sitio, algunas interesantes y otras no tanto. También estoy desarrollando varios proyectos, los cuales puedes ver en la barra lateral como "Destinos". Si te interesa puedes seguirme en twitter @polle y conocerme un poco mas.

Visitar el sitio del Autor | Ver todas las noticias del Autor