Worn text: decorar textos con patrones css

Mediante ésta técnica, conocida como "worn text", podremos dotar a los textos de una decoración superpuesta que no evita que el texto pueda ser seleccionado o gestionado como cualquier otro. Se basa en la repetición de un patrón, diseñado con photoshop, por ejemplo, sobre las líneas del texto. Veamos el código XHTML necesario:

<h2><span></span>Worn text</h2>

Es importante no escribir nada entre las etiquetas " y porque es aqui donde se colocara el patrón posteriormente.

En nuestro CSS añadiremos las siguientes líneas:

h2 {
    font:3em/1em Times, serif;
    font-weight: bold;
    margin:0;
    position: relative;
    overflow: hidden;
    float: left;
}
h2 span {
    position: absolute;
    width: 100%;
    height: 5em;
    background: url(wornpattern.gif);
}
p {
    clear: left;
}

A continuación crearemos un motivo o patrón en photoshop. Bastará con que en un lienzo pequeño (unos 10px * 10px bastarian) llenemos el fondo de color y con el borrador hagamos algunas marcas. Es muy importante que el fondo sea transparente, y que lo guardemos en formato .gif con las transparencias activadas bajo el nombre de "wornpattern.gif".

Redactado por khmerang. Traducción y adaptación por eMe
http://www.khmerang.com/index.php?p=95