Saltar al contenido principal
Codigo Heroe
Tarea anterior
Degradados lineales8/19
A la lista de tareas
  1. 1. ¡Hola, linear-gradient!
  2. 2. La dirección del degradado
  3. 3. Degradados diagonales
  4. 4. Degradados con ángulos
  5. 5. Diagonales frente a grados
  6. 6. Degradados uniformes de varios colores
  7. 7. Proporciones y paradas de color
  8. 8. Transiciones bruscas entre colores
  9. 9. Columnas simuladas con degradados
  10. 10. Posiciones de las paradas de color en píxeles
  11. 11. Degradados semitransparentes
  12. 12. Degradados lineales que se repiten
  13. 13. Construir un fondo complejo: parte 1
  14. 14. Construir un fondo complejo: parte 2
  15. 15. Construir un fondo complejo: parte 3
  16. 16. Construir un fondo complejo: final
  17. 17. Botones: parte 1
  18. 18. Botones: parte 2
  19. 19. Botones: parte 3
Siguiente tarea
  • Matriz de skills
  • Cursos
  • Registro
  • Iniciar sesión

Loading…
En unos segundos, estará listo.

  • Teoría
  • Teoría

Transiciones bruscas entre colores

Una parada de color indica un color en una posición concreta del degradado.

¿Y qué pasa si asignamos la misma posición a dos colores consecutivos? Se produce una transición brusca entre ellos, porque no hay distancia entre las dos paradas.

Es más fácil verlo con un ejemplo:

yellow 25%, green 75%
yellow 45%, green 55%
yellow 49%, green 51%
yellow 50%, green 50%

Esta técnica se usa a menudo para crear efectos interesantes.

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="es"> <head> <title>Transiciones bruscas entre colores</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="flag"></div> </body> </html>
CSS
body { background-color: #f5f5f5; } .flag { margin: 100px auto; width: 360px; height: 240px; background-image: linear-gradient(#ffffff 25%, #1199ff 50%, #0039a6 75%, #d52b1e 100%); box-shadow: 1px 1px 3px #333333; }

El código ha cambiado, haz clic en "Actualizar" o activa la ejecución automática.

Ha ido a otra página

Haga clic dentro del mininavegador para poner el foco en esta ventana.

100%
ObjetivosRealizado
0
    1. Cambia las posiciones del primer y del segundo color a 33%.
    2. Después, cambia las posiciones del tercer y del cuarto color a 66%.
    3. Después, cambia el segundo color de #1199ff a #0039a6.
    Codigo Heroe

    © 2023-2026, codigoheroe.com