Dar Textura A Los Textos Con CSS
Como se ha mencionado en otros artículos, CSS ha sido una gran herramienta tanto para diseñadores y desarrolladores Web. Entre las ultimas funciones que hemos compartido que se puede realizar con CSS es la de crear una fusión de capas, como también usar CSS para crear animaciones, y claro, existen otras mas que puedes usar y de seguro te parecerán bastante interesantes ;) Pero por que es tan útil CSS? Para los que no tengan claro esto, les contare algo de los viejos tiempos ;) Antes de la llegada del CMS, las paginas web eran bastante estáticas, y feas. Ademas de esto, los diseñadores y algunos desarrolladores debían recurrir a herramientas de edición de imagen, para añadir efectos ó texturas ya fuera a las imágenes ó al texto.
El problema no era el proceso (bueno no tanto), sino mas bien el resultado, ya que el tamaño de los archivos eran algo pesados, lo cual llevaba a una carga lenta de la pagina web. Ahora regresemos al presente, en lugar hacer esto con Photoshop, Gimp o algún otro editor de imagen, podrás crear texto con textura usando CSS3. Webkit ahora soporta la propiedad background-clip de CSS3, la cual hace exactamente lo que hace un editor de imagen. Ademas, puedes utilizar la propiedad mask-image de CSS para hacer casi el mismo efecto; sin embargo, esta propiedad hace visible un elemento de acuerdo a la transparencia de las imágenes de máscara.
¿Que necesitas para dar textura a los textos con CSS?
- Una imagen de fondo
- Las imágenes de textura (archivo PNG)
- Lato (Google Font)
- Pacifico (Google Font)
- Oswald (Google Font)
- Tiempo, paciencia y un poco de CSS por aquí y otro tanto por allá.
Usando Background-Clip Para El Texto
Utilizaremos la propiedad webkit background-clip para aplicar la imagen de un león y una selva en dos textos de titulo con H1.
Lo Que Veremos
Lo siguiente es el resultado de lo que podrás hacer, el ejemplo contiene un efecto hover, así que pasa por encima el puntero del mouse para que veas el efecto.
See the Pen background-clip CSS textura by HostDime Colombia (@HostDimeColombia) on CodePen.
El HTML
El siguiente sera el codigo que contendra el ejemplo practico, esta sera la estructura HTML.
[html]
<div class="container-clip">
<div id="clipped-title1">
<h1>El León</h1>
</div>
<div id="clipped-title2">
<h1>Rey de la selva</h1>
</div>
</div>
[/html]
El CSS
Ahora para nuestro CSS, que va a utilizar la propiedad background-clip para recortar la imagen con el texto. Por defecto, el fondo se extiende hasta el borde exterior de la frontera.
En el CSS a continuación, se utilizan diferentes imágenes de fondo. La primera es una imagen de fondo león mientras que la segunda es una imagen de fondo de la selva. Observe el webkit-text-fill-color fue configurado a transparente para asegurarse de que el color de la imagen será el que aparezca en el texto.
[css]
body {
background: #e0e0e0;
}
header h1 {
font-size: 40px;
color: #6f6f6f;
font-weight: 400;
text-shadow: 0 0 0 rgba(0,0,0,.4);
text-align: center;
margin: 20px 0 0;
}
nav {
margin: 20px auto;
width: 250px;
}
nav a {
background: #a4a4a4;
display: inline-block;
font-size: 15px;
padding: 7px;
text-decoration: none;
color: #fff;
}
nav a.active,nav a:hover {
background: #c2c2c2;
color: #818181;
}
.container-clip {
width: 960px;
margin: 0 auto;
background: #fff;
border: 2px solid #cdcdcd;
}
#clipped-title1 {
background: url(https://lh5.googleusercontent.com/-t1LlX9nrEyY/U_XyiZn8cMI/AAAAAAAAAH0/mrixE_K8VY4/w700-h280-no/lion.jpg) no-repeat center center;
background-size: cover;
color: #fff;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-transition: all 2s cubic-bezier(0.42,0,0.58,1);
-moz-transition: all 2s cubic-bezier(0.42,0,0.58,1);
-o-transition: all 2s cubic-bezier(0.42,0,0.58,1);
transition: all 2s cubic-bezier(0.42,0,0.58,1);
}
#clipped-title1:hover {
background: url(https://lh6.googleusercontent.com/-vYrckfpzhZ0/U_Xyhkzc9FI/AAAAAAAAAHo/O-ye8Aj5Nk4/w700-h280-no/lion-hover.jpg) no-repeat center center;
background-size: cover;
color: #fff;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
cursor: pointer;
}
#clipped-title2 {
background: url(https://lh5.googleusercontent.com/-9_UFC6PGoXs/U_Xyh-oo5YI/AAAAAAAAAH4/XkziwWV4E6Y/w1400-h875-no/jungle.jpg)no-repeat top center;
background-size: cover;
color: #fff;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
cursor: pointer;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
-ms-transition: all 2s ease;
transition: all 2s ease;
}
#clipped-title2:hover {
-webkit-filter: opacity(0.3);
}
#clipped-title1 h1 {
font-size: 200px;
text-align: center;
-webkit-transition: text-shadow 1s ease;
text-shadow: 0 0 1px rgba(0,0,0,.1);
margin: 0;
padding: 0;
}
#clipped-title2 h1 {
font-size: 110px;
text-align: center;
-webkit-transition: text-shadow 1s ease;
text-shadow: 0 0 1px rgba(0,0,0,.1);
margin-top: -75px;
padding: 0;
}
[/css]
Usando Mask-Image Para El Texto
Mediante el uso de la propiedad -webkit-mask-image de CSS, puede configurar la imagen en un texto. Esto es casi el mismo como el background-clip.
Lo Que Se Verá
See the Pen Mask-Image by HostDime Colombia (@HostDimeColombia) on CodePen.
El HTML
El igual que con background-clip, tendremos el texto dentro de la estructura con HTML, para eso usamos el siguiente código:
[html]
<div class="container-mask">
<div id="masked-image">
<h1>Efecto De Textura<br/>Texto Con Textura</h1>
</div>
</div>
[/html]
El CSS
Para la CSS, en pocas palabras los estilos básicos para el color y tipo de letra y así sucesivamente. Además, utilizará la propiedad -webkit-máscara-imagen para recortar una imagen de fondo en bruto para el texto. Girar el texto -4 grados mediante la propiedad transform.
[css]
body {
background: #e0e0e0;
}
header h1 {
font-size: 40px;
color: #6f6f6f;
font-weight: 400;
text-shadow: 0 0 0 rgba(0,0,0,.4);
text-align: center;
margin: 20px 0 0;
}
nav {
margin: 20px auto;
width: 250px;
}
nav a {
background: #a4a4a4;
display: inline-block;
font-size: 15px;
padding: 7px;
text-decoration: none;
color: #fff;
}
nav a.active,nav a:hover {
background: #c2c2c2;
color: #818181;
}
.container-mask {
width: 960px;
margin: 0 auto;
background: url(https://lh4.googleusercontent.com/-W_tDIQU11y4/U_XyhsvdU8I/AAAAAAAAAHc/UAJ-wzYRg-Y/w1024-h768-no/background.jpg);
border: 2px solid #cdcdcd;
padding: 60px;
}
#masked-image h1 {
font-size: 100px;
color: #fff;
text-transform: uppercase;
border: 14px solid #fff;
border-radius: .2em;
text-align: center;
margin: 0;
display: block;
-webkit-mask-image: url(https://lh5.googleusercontent.com/-0YNpQcCFSqk/U_XyjWPWsOI/AAAAAAAAAHw/zgPHdz3r-hY/s400-no/rough-texture.png);
-webkit-transform: rotate(-4deg);
-moz-mask-image: url(https://lh5.googleusercontent.com/-0YNpQcCFSqk/U_XyjWPWsOI/AAAAAAAAAHw/zgPHdz3r-hY/s400-no/rough-texture.png);
-moz-transform: rotate(-4deg);
-o-mask-image: url(https://lh5.googleusercontent.com/-0YNpQcCFSqk/U_XyjWPWsOI/AAAAAAAAAHw/zgPHdz3r-hY/s400-no/rough-texture.png);
-o-transform: rotate(-4deg);
mask-image: url(https://lh5.googleusercontent.com/-0YNpQcCFSqk/U_XyjWPWsOI/AAAAAAAAAHw/zgPHdz3r-hY/s400-no/rough-texture.png);
transform: rotate(-4deg);
-webkit-transition: all .3s linear;
-moz-transition: all .3s linear;
-o-transition: all .3s linear;
transition: all .3s linear;
}
#masked-image h1:hover {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
cursor: pointer;
}
[/css]