Hoy les traigo esta idea que les será muy prática.
Utilizando la propiedad background-clip podremos aplicar un fondo a las palabras de un texto o al título de nuestro blog. Veamos un ejemplo:
y en un texto:
Para aplicar este truco al título de nuestro blog que se encuentra en el Header, agregamos este CSS en a nuestra plantilla:
También podemos agregar
Para aplicar los estilos a un texto determinado. El HTML es el siguiente:
Y los estilos:
Listo, seguro te servirá.
Utilizando la propiedad background-clip podremos aplicar un fondo a las palabras de un texto o al título de nuestro blog. Veamos un ejemplo:
beach
y en un texto:
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Para aplicar este truco al título de nuestro blog que se encuentra en el Header, agregamos este CSS en a nuestra plantilla:
.Header .title {
background:url(url-imagen);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color: transparent;
}
background:url(url-imagen);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color: transparent;
}
También podemos agregar
background-size: ancho alto;
para ajustar el tamaño deseado del fondo.Para aplicar los estilos a un texto determinado. El HTML es el siguiente:
<span class="ejemplo">Texto</span>
Y los estilos:
.ejemplo {
background:url(url-imagen);
font-size: 15px; /* Tamaño del texto */
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color: transparent;
}
background:url(url-imagen);
font-size: 15px; /* Tamaño del texto */
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color: transparent;
}
Listo, seguro te servirá.
Hasta la próxima
Diseño recibido. Gracias.
ResponderEliminarTe incluyo en mi lista de Twitter a ver qué cosas publicas ;)
Gracias a tí, Oloman. Tú me inspiraste a meterme en el mundo del diseño y el bloggin. Espero que te gusten mis publicaciones. Saludos
EliminarBuenas, Lucas.
ResponderEliminarMe paso a comentarte que aunque esta propiedad es muy útil, (la veo implementada en tu blog) y en webkit (chrome/safari) se ve perfecto, no está implementada en Mozilla ni Opera (ni en IE, pero eso no hace falta decirlo).
Por lo tanto en estos otros navegadores se ve muy mal o no se ve el texto, así que procuraría evitarlo.
Te lo comento porque acabo de pasar por aquí con Firefox y apenas veía el texto de encima del buscador ;).
Por el resto, muchos ánimos para seguir con este blog.
Gracias por el aporte, Emilio. De hecho, ya lo había notado mientras navegaba con otros navegadores (yo uso Chrome). Dejaré un aviso en esta entrada para aclarar esto. Saludos y gracias por comentar, por cierto, tu blog es estupendo y tus tutoriales están muy bien redactados y son muy comprensibles. Adios
EliminarEy, se me acaba de ocurrir una forma de que puedas usarlas, pero que se vean en otros blogs:
EliminarTendrías que poner en un script (debajo, pero cerca de <head>)
(function(){
var html = document.documentElement;
if(navigator.userAgent.toLowerCase().match(/webkit/)){
html.className += ' webkit';
}else{
html.className += ' no-webkit'
}
})()
Lo que hace es añadir una clase a <html>, para que puedas usar en el CSS:
/*Le das un fondo y usas background-clip si está disponible*/
.webkit .miclase{background:'cualquiercosa';background-clip:text;}
/*Si no, el fondo sigue transparente y le das un color al texto para que sea legible*/
.no-webkit .miclase{color:'color del texto sin background clip'}
Espero que te valga.
P.D.: Gracias por los halagos, pero no son necesarios ;)
Gracias por la idea, Emilio. Ya veré cómo aprovecharla. Saludos
Eliminar