Diseño Web y Marketing Digital en Sevilla
Creando un texto con gradiente
Ratio: 5 / 5
Sin duda el uso de gradientes en diseño web va a ser una de las tendencias de este año 2018 en lo que a diseño web se refiere. Hace unos años en nuestra agencia creamos una web cuyas cabeceras de página disponían de gradiente, al enseñarlo al cliente final pensó que el monitor tenía un problema. El ojo humano no estaba entrenado para los gradientes hasta que llegó Instagram y su polémico logo.
Algunas de las marcas con mayor presencia en la red ya han apostado por los gradientes en sus tiendas online. Así que es cuestión de tiempo que los gradientes alcancen a uno de los elementos web más indispensables: la tipografía.
Los constructores de páginas aún no están preparados para crear textos con gradiente, así que vamos a introducir esta propiedad a través de CSS3, veremos que es un código muy básico.
Sigiendo la lógica del gradiente
El texto como tal aún soporta en CSS a través de la propiedad color el uso de gradientes, así que deberemos dar una vuelta de tuerca a la tradicional maneras que tenemos en CSS de aportar color al texto.
Debemos pensar en una triple capa de elementos:
a) El fondo del bloque en el que se haya el texto, normalmente div.
b) El fondo que conforma el propio texto, donde crearemos el gradiente, nomalmente compuestos por una de las etiquetas p, blockquote, h1, h2, ...
c) El color del texto
Debemos pensar en una triple capa de elementos:
a) El fondo del bloque en el que se haya el texto, normalmente div.
b) El fondo que conforma el propio texto, donde crearemos el gradiente, nomalmente compuestos por una de las etiquetas p, blockquote, h1, h2, ...
c) El color del texto
Código de ejemplo con fuente Mina de Google Fonts:
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Mina" rel="stylesheet"/>
<style>
/* div principal*/
body {margin:0;}
.presentacion {
height:400px;
padding: 250px 0;
background-color:#000;
}
/*Usando el gradiente en CSS3 a través de webkit */
.presentacion h2{
font-family: 'Mina', sans-serif;
font-size:75px;
color:#fff;
background-image: linear-gradient(45deg,#365899 0%,#992a09 35%,#a76c51 85%,#a76c51 100%);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
color:#fff;
margin-left:40px;
}
</style>
</head>
<body>
<div class="presentacion">
<h2 class="titulo">Bienvenidos a EntreBits</h2>
</div>
</body>Código de ejemplo ejecutado:
Bienvenidos a EntreBits
Usar un texto con gradiente es sin duda una tendencia actual de diseño web que hará tu página web más atractiva visualmente. Si están buscando una web creada con las últimas tendencias de diseño en Sevilla, contacta con nosotros.