En CSS, puede realizar transiciones sin problemas entre dos o más colores. CSS tiene dos tipos de gradientes:
- Gradiente lineal: va hacia abajo/arriba/izquierda/derecha/diagonalmente y hace transiciones suaves de colores. Para hacer una transición lineal, primero debe elegir dos paradas de color. Las paradas de color son el color entre el que desea realizar las transiciones. También puede seleccionar un punto de inicio y una dirección (un ángulo) para la transición.
imagen de fondo: degradado lineal (dirección, color-stop1, color-stop2, …); - Gradiente radial: Está definido por el centro. Aquí también debe especificar al menos dos puntos de color.
Sintaxis:
background-image: radial-gradient(shape size at position, start-color, ...);
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
Transition work with linear gradient
background button
</title>
<style>
button {
background-image:
linear-gradient(to bottom right, green, white);
}
button:hover {
background-image:
linear-gradient(to bottom right, green, yellow);
}
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<b>Hover over the bytton</b>
<br>
<br>
<button>Click me</button>
</center>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por AnshuMishra3 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA