El degradado en CSS es un tipo especial de imagen que se compone de una transición progresiva y suave entre dos o más colores. CSS es la forma de agregar estilo a varios documentos web. Al usar el degradado en CSS, podemos crear variantes de estilos de imágenes que pueden ayudar a crear una página web atractiva.
Los degradados se pueden clasificar en 2 tipos:
Gradientes lineales : incluye las transiciones de color suaves para subir, bajar, izquierda, derecha y en diagonal. El mínimo de dos colores requerido para crear un degradado lineal. Pueden ser posibles más de dos elementos de color en degradados lineales. El punto de partida y la dirección son necesarios para el efecto degradado.
Sintaxis:
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
El gradiente lineal se puede implementar de las siguientes maneras:
De arriba a abajo: en esta imagen, la transición comenzó con el color blanco y terminó con el color verde. Al intercambiar la secuencia de colores, la transición comenzará con el verde y terminará con el blanco.
Ejemplo: este ejemplo ilustra el degradado lineal que comienza en la parte superior y termina en la parte inferior, iniciando desde el color blanco y pasando al color verde.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS Gradients</title>
<style>
#main {
height: 200px;
background-color: white;
background-image: linear-gradient(white, green);
}
.gfg {
text-align: center;
font-size: 40px;
font-weight: bold;
padding-top: 80px;
}
.geeks {
font-size: 17px;
text-align: center;
}
</style>
</head>
<body>
<div id="main">
<div class="gfg">GeeksforGeeks</div>
<div class="geeks">
A computer science portal for geeks
</div>
</div>
</body>
</html>
Producción:
De izquierda a derecha: en esta imagen, la transición comenzó de izquierda a derecha. Comienza desde el blanco en transición al verde.
Ejemplo: Este ejemplo ilustra el gradiente lineal que comienza desde la izquierda y termina a la derecha.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS Gradients</title>
<style>
#main {
height: 200px;
background-color: white;
background-image: linear-gradient(to right, white, green);
}
.gfg {
text-align: center;
font-size: 40px;
font-weight: bold;
padding-top: 80px;
}
.geeks {
font-size: 17px;
text-align: center;
}
</style>
</head>
<body>
<div id="main">
<div class="gfg">GeeksforGeeks</div>
<div class="geeks">
A computer science portal for geeks
</div>
</div>
</body>
</html>
Producción:
Diagonal: esta transición comenzó de arriba a la izquierda a abajo a la derecha. Comienza con la transición verde a blanco. Para el degradado diagonal, debe especificar las posiciones de inicio horizontales y verticales.
Ejemplo: Este ejemplo ilustra el gradiente lineal con la transición diagonal especificando las posiciones de inicio tanto horizontal como vertical.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS Gradients</title>
<style>
#main {
height: 200px;
background-color: white;
background-image: linear-gradient(to bottom right,
green, rgba(183, 223, 182, 0.4));
}
.gfg {
text-align: center;
font-size: 40px;
font-weight: bold;
padding-top: 80px;
}
.geeks {
font-size: 17px;
text-align: center;
}
</style>
</head>
<body>
<div id="main">
<div class="gfg">GeeksforGeeks</div>
<div class="geeks">
A computer science portal for geeks
</div>
</div>
</body>
</html>
Producción:
Repetición de degradado lineal: CSS permite al usuario implementar múltiples degradados lineales usando una sola función repeating-linear-gradient(). La imagen aquí contiene 3 colores en cada transición con algún valor porcentual.
Ejemplo: este ejemplo ilustra el degradado lineal con efectos de transición repetitivos mediante la implementación de los multicolores.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS Gradients</title>
<style>
#main {
height: 200px;
background-color: white;
background-image: repeating-linear-gradient(#090,
#fff 10%, #2a4f32 20%);
}
.gfg {
text-align: center;
font-size: 40px;
font-weight: bold;
padding-top: 80px;
}
.geeks {
font-size: 17px;
text-align: center;
}
</style>
</head>
<body>
<div id="main">
<div class="gfg">GeeksforGeeks</div>
<div class="geeks">
A computer science portal for geeks
</div>
</div>
</body>
</html>
Producción:
Ángulos en degradados lineales: CSS permite al usuario implementar direcciones en degradados lineales en lugar de restringirse a direcciones predefinidas.
Ejemplo: Este ejemplo ilustra el degradado lineal implementando la dirección en degradados lineales.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS Gradients</title>
<style>
#main {
height: 200px;
background-color: white;
background-image: repeating-linear-gradient(-45deg, #090,
#2a4f32 10%);
}
.gfg {
text-align: center;
font-size: 40px;
font-weight: bold;
padding-top: 80px;
}
.geeks {
font-size: 17px;
text-align: center;
}
</style>
</head>
<body>
<div id="main">
<div class="gfg">GeeksforGeeks</div>
<div class="geeks">
A computer science portal for geeks
</div>
</div>
</body>
</html>
Producción:
Gradientes radiales CSS : un degradado radial difiere de un degradado lineal. Comienza en un solo punto y emana hacia afuera. De forma predeterminada, el degradado tendrá forma elíptica, el tamaño será la esquina más lejana, el primer color comienza en la posición central del elemento y luego se desvanece hasta el color final hacia el borde del elemento. El desvanecimiento ocurre a la misma velocidad hasta que se especifica.
Sintaxis:
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
El gradiente radial se puede implementar de las siguientes maneras:
Gradiente radial: paradas de color espaciadas uniformemente: en CSS, de forma predeterminada, el desvanecimiento ocurre a la misma velocidad. La siguiente figura muestra el degradado radial con paradas de color uniformes.
Paradas de color: las paradas de color informan a los navegadores qué color usar, en el punto de inicio del degradado y dónde detenerse. De forma predeterminada, están espaciados por igual, pero podemos anularlo proporcionando las paradas de color específicas.
Ejemplo: Este ejemplo ilustra el degradado radial que tiene paradas de color espaciadas uniformemente.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS Gradients</title>
<style>
#main {
height: 350px;
width: 700px;
background-color: white;
background-image: radial-gradient(#090,
#fff, #2a4f32);
}
.gfg {
text-align: center;
font-size: 40px;
font-weight: bold;
padding-top: 80px;
}
.geeks {
font-size: 17px;
text-align: center;
}
</style>
</head>
<body>
<div id="main">
<div class="gfg">GeeksforGeeks</div>
<div class="geeks">
computer science portal for geeks
</div>
</div>
</body>
</html>
Producción:
Gradiente radial: paradas de color espaciadas de manera irregular: CSS permite al usuario variar el espaciado de las paradas de color al aplicar la función de degradado radial.
Ejemplo: Este ejemplo ilustra el degradado radial que tiene paradas de color espaciadas de manera desigual.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS Gradients</title>
<style>
#main {
height: 350px;
width: 100%;
background-color: white;
background-image: radial-gradient(#090
40%, #fff, #2a4f32);
}
.gfg {
text-align: center;
font-size: 40px;
font-weight: bold;
padding-top: 80px;
}
.geeks {
font-size: 17px;
text-align: center;
}
</style>
</head>
<body>
<div id="main">
<div class="gfg">GeeksforGeeks</div>
<div class="geeks">
A computer science portal for geeks
</div>
</div>
</body>
</html>
Producción:
Navegador compatible:
- Google Chrome 26.0
- Microsoft Edge 12.0
- Firefox 16.0
- Ópera 12.1
- Internet Explorer 10.0
- Safari 6.1
Publicación traducida automáticamente
Artículo escrito por Pritha Upadhyay y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA