Impulsa tu negocio +34 666014559


Soluciones Personalizadas en Marketing Digital

Blog de Entrebits

Creando un texto con gradiente

Diseño Web en Sevilla

Ratio: 0 / 5

Inicio desactivadoInicio desactivadoInicio desactivadoInicio desactivadoInicio desactivado
 

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
 
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.
Tags: ,
 

Entrebits Diseño Web

Diseño Web y Marketing Digital en Sevilla y Dos Hermanas
Alameda de Hércules 32 1ª Planta Sevilla, Andalucía
C/Purísima Concepción 1 Dos Hermanas, Andalucía
Teléfono: 666014559 Email: hola@entrebits.es