La creación de gradientes con CSS3

Aprende a crear gradientes sorprendentes con CSS3 y usarlos en su página web? No hay imagen y JavaScript, CSS3 simplemente pura.

Web no se trata de texto más. Los usuarios necesitan algo llamativo. Es por eso que las imágenes están siendo utilizados en cada página web, pero hoy en día, las imágenes de costes en la velocidad de carga de la página web. Más detallada imagen de fondo, más el tiempo de carga. Mientras que los usuarios no se centran en la imagen, pero se dan cuenta de la ausencia de la misma.

Es por eso que tenemos algo llamado gradientes. Gradientes son las transiciones de color entre 2 o más colores que produzca una imagen más suave. Gradientes están de moda y muchos sitios web están utilizando. Lo bueno de ellos es que reemplazan imagen. Mejoran el diseño aburrido al tiempo que carga la página rápido, ya que es todo el código y el navegador tiene que hacerla en el lado del cliente, por lo que no solicitud de envío y esperando problema.

CSS nos proporciona una gran cantidad de opciones de degradado para elegir. Las pendientes no se limitan a los fondos, pero se pueden aplicar en las fronteras, texto con algún artilugio. Pero en este artículo, vamos a aprender acerca de la creación de gradientes.

Hay 2 tipos de gradientes:

  1. Gradiente Lineal
  2. Radial Gradient

1) Gradiente lineal

El gradiente lineal sigue una línea recta a lo largo de la que se produce transición de color . Aquí es un simple código CSS añadir un gradiente al fondo .

Código

.background {
background-image: linear-gradient(#0098E5, #8700C6);
}

La propiedad Imagen de fondo añade el efecto de degradado, ya que los gradientes son también imágenes. También podemos añadir varias paradas de color y añadirlo después de unos a otros.

Código

.background {
background-image: linear-gradient(#0098E5, #8700C6, #00CCB4);
}

Por class, este gradiente será de arriba a abajo. Es decir, el color mencionado en primer lugar será en la parte superior y el último color en la parte inferior. Pero puede ser cambiado a otra dirección usando las siguientes palabras clave al inicio, arriba , a abajo , a izquierda , a derecha . El a la dirección se utiliza para indicar la dirección que debe seguirse. Al igual que, a medios adecuados , a partir del movimiento de la izquierda hacia la derecha.

Código

.background {
background-image: linear-gradient(to top, #0098E5, #8700C6);
}

Este código hará que gradiente de arriba a abajo.

2) de la parte radial

Los gradientes radiales producen transiciones de color a partir del centro del elemento hacia el borde, que le dan un efecto más equilibrado. Para crear gradientes radiales, basta con cambiar la propiedad a radial-gradiente () y dar a los colores.

.background {
background-image: radial-gradient(#0098E5, #8700C6);
}

Hay que ir. Agradable y manera fácil de crear gradientes. Aquí es demostración class todos los gradientes anteriores.

DEMO

HTML con CSS

<!DOCTYPE html>
<html>
<head>
<title>Gradients DEMO</title>
<style id="jsbin-css">
.box {
width: 200px;
height: 100px;
margin: 10px auto;
color: #fff;
}
.box1 {
background-image: linear-gradient(#0098E5, #8700C6);
}
.box2 {
background-image: linear-gradient(to left, #0098E5, #8700C6);
}
.box3 {
background-image: linear-gradient(to right, #0098E5, #8700C6, #00CCB4);
}
.box4 {
background-image: radial-gradient(#0098E5, #8700C6);
}
</style>
</head>
<body>
<div class="box box1">Default Gradient</div>
<div class="box box2">To left Gradient</div>
<div class="box box3">Multiple color stop</div>
<div class="box box4">Radial Gradient</div>
</body>
</html>

salida

Creating Gradients with CSS3 - 4

Si te gusta el artículo, hacernos saber sus pensamientos en los comentarios a continuación.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *