miércoles, 5 de febrero de 2014

Efecto de texto en HTML y CSS3: texto vacío(solo línea sin relleno)

Ahora les voy a dejar un efecto bastante curioso, que es hacer que el texto sea transparente y solo se vea la línea de contorno.

Sin más aquí les dejo el código:

1. Primero el html

<!DOCTYPE HTML>
<html>
<head>
<title>Texto transparente</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
<h1>Este es un texto transparente</h1> <!--en h1 para que se le aplique el efecto-->
</body>

</html>

2.- Ahora el css

body{
background: black; /*fondo obscuro para observar mejor el efecto*/
}

h1{
       -webkit-text-stroke: 1px #000;
       -webkit-text-fill-color: transparent;} /*se lo aplico a un encabezado pero se le puede aplicar a 

cualquier etiqueta de texto o crear una clase o id*/


Bueno, eso es todo por ahora y nos leemos luego, cualquier duda no duden en realizarla por este medio.

No hay comentarios:

Publicar un comentario