Vamos a ver una tecnica que la aplicaremos al texto y nos puede servir para ponerla en los titulos del post, de la sidebar o para lo que nos de la gana. La tecnica consiste en añadir una imagen transparente jaspeada de fondo, asi el texto adquirira este 'efecto Grunge'.
Lo primero que necesitamos es una imagen png. Yo ya os he puesto una, pero podeis poner la que querais. Recomiendo poner el fondo principal oscuro o negro para que resalten las letras.
La imagen que pondremos en este ejemplo es esta:
Ahora añadiremos el siguiente codigo, en el que podemos modificar el tamaño, color y la fuente del texto (que ya os lo he resaltado en rojo).
<grunge>AQUI PONEIS EL TEXTO<span></span></grunge> <style>grunge { position:relative; color:#aeef33; font-family: Arial Black; font-size:50px; background:#000; } grunge span{ position:absolute; display:block; top:0; left:0; height:100%; width:100%; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7JVHIPDyoJS30qz8SDAiPVCOwneIg5TSg6dYFW9A-axH-DBlIYD8d84bEhorEsaCdcg2z2ajNPjCrFQtnKR_xLPOzuCyMuMMfvT0gCvgOhkvm4lCCP83DKOly26TgXhnsl1HocHKmboI/s400/imageN+GRUNGE.png'); } </style> |
Estos son dos ejemplos de variaciones que se pueden hacer y de como quedan:
