Bueno este es mi primer post!!! de varios y aqui… pero bueno intentaremos hacer un efecto medio grunge a nuestros titulos o donde querramos comenzemos…

Creando la imagen transparente en Gif…
Si tienes pereza da click aqui para bajar la imagen transparente.
Abrimos nuestro editor favorito (Aqui siempre sera Fireworks jeje). y crearemos un Gif transparente (PNG si gustas ya que el IE6 da problemas).

1. Dejamos el lienzo sin color y dibujamos un rectangulo mmm… nose de 400px X 130px (por ejemplo)  y abajo en la “barra de propiedades” junto al bote de pintura donde pone “Solido” desplegamos la lista y nos ponemos donde dice “Patrón” y seleccionamos “Pintura azul”.

2. Luego mas abajo en la misma “barra de propiedades” donde dice “Textura” seleccionamos “Metal” a un 35%.

3. Ahora aplicamos un filtro “Brillo/Contraste” y le damos a “Brillo” un “30″ y a “Contraste” un “100″, ahora allanamos la capa (Ctrl+Shift+Alt+Z o click derecho “allanar seleccion”).

4.  Que pereza no? tranki vale la pena… ahora seleccionamos la “herramienta varita magica” y le damos una “tolerancia” de 25 seleccionamos cualquier parte blanca y luego borramos…

5. Luego aplicamos el filtro “Matiz/Saturación” y en “Iluminacion” lo dejamos hasta el fondo en “-100″ aceptamos y ya tenemos listo nuestra “Textura” medio “Grunge” ahora presinamos “Ctrl+Shift+X” para abrir la “Presentación Preliminar”, seleccionamos el formato de la imagen en “Gif”, “transparencia alfa” y “Mate” color negro o sin color da igual, y guardamos con el nombre de “grunge.gif” o como querramos.
(Nota: importante debemos elegir el mismo color a nuestra imagen que nuestro fondo donde aplicaremos el efecto… es este caso el fondo es negro y la imagen la hicimos negra para usar un texto que haga contraste “Blanco” por ejemplo)
INFO: Perdon por tanto lio en lo de la imagen pero aki es FIREWORKS y si queremos algo lo hacemos…  sin Brushesitos… ok?… da igual que editor uses pero aqui usaremos en lo personal. es mas tardio pero se siente bien hacer las cosas por uno mismo no? bueno…

Ahora si al lio… daremos estilo CSS a la etiqueta  “H1“.
Le damos una posicion relativa al <h1> para que nuestro <span> que es el que tiene la imagen este absoluto y de el efecto deseado.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

body{background:#000;}
h1 {
position:relative;
color:#FFF;
font-family: "Times New Roman";
}
 
h1 span{
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
background:url(grunge.gif);
}

y ahora el HTML

1

<h1>ZoneArtCSS - Texto Grunge By Alex Aguiar</h1>

Ver el ejemplo en linea.