zampon - red de blogs ZampaRuedas     Coches Nuevos     LigaFutbol     Eventos Valencia     ZampaOcio     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).



Autor de esta entrada

Toni - ha publicado 3919 entradas en Cosas sencillas.

Contactar con el autor

2 Comentarios para esta entrada

  1. _Swindler dice:

    :O Qué curioso!
    :) gracias por ponerlo!

  2. Toni dice:

    De nada, ha sido un placer.

3 Trackbacks para esta entrada

  1. Colección semanal de enlaces interesantes (14 al 20 de enero) « Cosas sencillas dice:

    [...] Bonito efecto de degradado con solo CSS (CSS). [...]

  2. Optimizando el texto degradado con CSS » Cosas sencillas dice:

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

  3. Selección de diferentes diseños del aspecto de los titulares o cabezeras | Cosas sencillas dice:

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

Dejar un comentario