zampon - red de blogs ZampaRuedas     Coches Nuevos     ZampaOcio     LigaFutbol     Vivir Valencia     Ciudades Famosas


Bonito efecto de degradado con solo CSS

Vie, Ene 18, 2008

CSS, Efectos, Texturas, Tipografía

En FREAKGROUP nos propone una manera muy sencilla el remplazar con CSS, los titulares o encabezados de nuestras entradas por imágenes con degradados, sin necesidad de usar Flash o JavaScript. Solo es necesario aplicar la siguiente tócnica: una etiqueta <span> vacía en el título y luego mediante la propiedad CSS position: absolute donde superponemos la imagen con el degradado. Este truco ha sido probado en la mayoría de los navegadores y nos dicen que funciona perfectamente.

efecto-degradado

Aplicar esta tócnica es perfecto para darle un aspecto diferente y de mayor impacto visual a nuestros títulos. Además no tenemos que armar cada uno de ellos con Photoshop con lo que ahorramos tiempo y ancho de banda. Podemos aplicarle este truco a cualquier tipo de fuente. En la figura siguiente puedes ver el resultado.

titulo-degradado

Para ver como funciona el truco te recomiendo que leas en su totalidad el artículo Efecto de degradado con CSS. Donde tienes el código empleado y otros detalles relacionados.

El artículo original es de Web Designer Wall, en donde podemos visualizar una demo previa de los efectos conseguidos, así como su descarga en compresión Zip. (todas las imágenes que he empleado son de dicha página).



Entradas relacionadas

    None Found

Autor de esta entrada

Toni - ha publicado 3399 entradas en Cosas sencillas.

Contactar con el autor

3 comentarios en “Bonito efecto de degradado con solo CSS”

  1. [...] ampliar más el tema sobre esta técnica, te recomiendo que le des un vistazo al artículo Bonito efecto de degradado con solo CSS. iw_ad_ancho=468; iw_ad_alto=60; iw_ad_formato=”ad_468×60″; [...]

  2. [...] artículo ya lo he comentado, pues me llamó mucho la atención. Puedes darle al titular un bonito efecto degradado utilizando [...]

Leave a Reply