Alguna vez habeis usado un fondo Grunge en vuestros proyectos?.

Pues este truco os va a encantar, porque con CSS podremos hacer que las letras de un titular por ejemplo tenga un fondo Grunge, tal y como lo veis en la imagen.

Fondo Grunge Letras

Con unos sencillos pasos podremos lograrlo facilmente con cualquier fondo que deseemos:

  1. Crear una imagen transparente PNG. Estos fondos, se pueden hacer descargardonos pinceles de páginas completamente gratis como en: Free Grunge Style Brushes
  2. Crear nuestro código HTML:
    PLAIN TEXT
    HTML:
    1. <h1 id="356_this-is-one-very-lon_1">This is one very long title with grunge effect<span></span></h1>

  3. Crear el código CSS:
    PLAIN TEXT
    CSS:
    1. h1 {
    2. position:relative;
    3. color:#aeef33;
    4. font-family: Georgia;
    5. }
    6. h1 span{
    7. position:absolute;
    8. display:block;
    9. top:0;
    10. left:0;
    11. height:100%;
    12. width:100%;
    13. background:url('grunge.png');
    14. }

Para ver el tutorial más detallado podeis entrar en esta web

Compártelo

Posts Relacionados