Tutorial de Degradados CSS en la Web

Tutorial de Degradados CSS en la Web

En este tutorial de Degradados CSS aprenderá a usar códigos sencillos para crear diseños sorprendentes. Le daré algunos ejemplos, algunos ejercicios (como cómo crear degradados para bordes) y también incluiré algunos recursos útiles que facilitarán la creación de degradados.

En el pasado no era posible usar gradientes sin depender de las imágenes, pero los desarrollos en CSS significan que ahora es simple y confiable crear gradientes desde nuestras hojas de estilo.

En su forma más simple, definimos gradientes como imágenes de fondo. Configuramos la imagen de fondo (simplemente usando la taquigrafía backgroundes absolutamente buena) como si fuera a linear-gradiento a radial-gradient, luego pasamos los colores inicial y final:

Por defecto, un gradiente lineal se ejecuta de arriba a abajo, dándonos algo como esto:

Podemos cambiar la dirección agregando un nuevo parámetro antes de los colores, por ejemplo:

Igualmente, cambiar este parámetro para leer to top rightcrearía un gradiente diagonal. También puedes hacer que esa diagonal sea exacta, especificando algo así como 45deg(o el ángulo que elijas).

Llevando las cosas un paso más allá, no necesita detenerse en solo dos colores. Y también puedes usar nombres de colores, como este:

En este caso, cada uno de los cuatro colores ocupará una cantidad igual del espacio disponible, dándonos un gradiente suave y equilibrado.

Si no queremos una distribución uniforme, pero queremos que un color ocupe más espacio que otro, podemos especificar ese valor como un porcentaje directamente después del color, por ejemplo:

Dándonos:

Continuando, podemos usar todo lo que hemos aprendido hasta ahora y cambiarlo para mostrar degradados radiales . Cambiar linear-gradientpor aquí radial-gradientes todo lo que necesita hacer aquí.

Este gradiente radial se extiende a su elemento padre, por lo que este rectángulo termina con un gradiente similar a una elipse. Para restringir ese gradiente de manera que siga siendo un círculo independientemente de las proporciones de los padres, podemos agregar la circlepalabra clave de esta manera:

Yendo aún más lejos, podemos especificar la fuente del gradiente del círculo también, para que comience (por ejemplo) en la parte superior izquierda del elemento principal.

El efecto es sutil, pero la diferencia entre esto y un gradiente lineal simple puede ser justo lo que estás buscando.

¿Dónde podríamos usar degradados de algunas formas interesantes?

Aquí hay un ejemplo de una superposición, donde el degradado es ligeramente transparente (usa  rgbavalores) y se sienta sobre una foto.

La backgroundpropiedad puede aceptar varios valores que forman una pila, el primero es el más alto y el último que se encuentra en la parte inferior de la pila. Si definimos un gradiente primero, se ubicará sobre lo que definamos después. Eche un vistazo a este fragmento y vea si puede resolver lo que está pasando:

Aquí está el efecto resultante:

Tener un degradado en el texto es un gran efecto, aunque no completamente compatible en un sentido puro. En su lugar, confiamos en la background-clippropiedad (y su -webkit-background-clipamigo prefijado ), que es algo así como un truco, pero funciona muy bien.

Comenzamos con un fragmento de texto (y h1en este caso) y aplicamos un degradado a su fondo . La background-clippropiedad, dado un valor de text, luego elimina el fondo de todo el bloque, excepto el área detrás del texto. El texto coloroscurece el fondo, por supuesto, así que lo hacemos transparentpara dejar que el degradado brille:

Los degradados fronterizos son algo que quizás hayas visto en Envato Elements , y son una excelente manera de darle vida a tu interfaz de usuario visualmente. Está sutilmente hecho, pero eche un vistazo al degradado lineal azul-púrpura en los bordes de estos botones:

Para lograr este efecto, hay un par de enfoques. La primera depende de nosotros primero dando un elemento (un ancla, un contenedor, lo que sea) un borde transparente. Luego aplicamos nuestro degradado usando la border-imagepropiedad. Finalmente, establecemos border-image-sliceen 1, para que el degradado use el contorno completo del borde.

Este es el resultado:

Sin embargo, hay un par de problemas con este enfoque. En primer lugar, border-imageno es compatible universalmente en todos los navegadores, especialmente en las versiones anteriores de IE. En segundo lugar, este enfoque no le permitirá agregar border-radius tal como lo ve en la interfaz de usuario de Envato Elements. Entonces veamos un enfoque alternativo.

Comenzamos dando nuestra div una position: relative. Luego le agregamos un pseudo-elemento, dando una posición absoluta negativa de lo que sea que el ancho de nuestro borde sea (5px en este caso):

Esto nos dará un bloque de gradiente sólido que cubre la totalidad de nuestro div. Agregar un z-indexde -1 asegurará que el bloque de gradiente se mueva hacia atrás del div.

A continuación (phew, hay muchos pasos para este) agregamos un border-radiuspseudo-elemento igual al de su padre (apliquemos 10px cada uno). Y luego le damos al padre un fondo de lo que queramos; lo mismo que el fondo de la página lo hará parecer transparente.

Finalmente, una vez más recurrimos a nuestro amigo background-clip, aplicándolo al padre y esta vez dándole un valor de padding-box. Esta última acción asegura que el relleno de div se ejecute hasta el borde del borde y no más.

Entonces, este enfoque final no es en realidad un límite en el verdadero sentido, pero logra el efecto que estamos buscando.

Un tercer enfoque es posible, esta vez usando box-shadowpara lograr el efecto. Te recomiendo que   eches un vistazo a la mezcla de gradiente de borde de John Grishin en CodePen para ver cómo funciona esto.

 
x Close

Like Us On Facebook