Efecto grandiente con CSS solamente
El poder de CSS es casi ilimitado, esta vez veremos una solución no muy conocida pero efectiva que se trata de crear logos textuales con efecto gradiente usando CSS y una imagen transparente PNG de un sólo 1 pixel.
Cuales son las ventajas:
- No necesitas usar Photoshop y otros editores
- Puede soportar cualquier tipografia
- Carga rápida
- Funciona en la mayoria de los navegadores
Para implementarlo es muy sencillo, tenemos introducir el siguiente código.
HTML:
-
<h1>Microoweb</h1>
Y luego el CSS.
CSS:
-
h1 {
-
font: bold 330%/100% "Lucida Grande";
-
position: relative;
-
color: #464646;
-
}
-
h1 span {
-
background: url(gradient.png) repeat-x;
-
position: absolute;
-
display: block;
-
width: 100%;
-
height: 31px;
-
}
Ver DEMO
Vía elwebmaster
