- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<title>Degradados lineales que se repiten</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="box gradient-1"></div>
<div class="box gradient-2"></div>
<div class="box gradient-3"></div>
<div class="box gradient-4"></div>
</div>
</body>
</html>
CSS
html,
body {
margin: 0;
padding: 0;
}
.container {
margin: 20px auto;
width: 440px;
height: 440px;
}
.box {
float: left;
margin: 10px;
width: 200px;
height: 200px;
box-shadow: 0 0 3px #666666;
}
/* El caso más sencillo: al repetirse, aparecerán límites bruscos */
.gradient-1 {
background-image: linear-gradient(black 0, green 25px, yellow 50px);
}
/* Añadimos transiciones bruscas dentro del degradado.
Al repetirse, obtendremos franjas */
.gradient-2 {
background-image: linear-gradient(black 0, black 17px, green 17px, green 33px, yellow 33px, yellow 50px);
}
/* Evitamos los límites bruscos entre repeticiones */
.gradient-3 {
background-image: linear-gradient(black 0, green 25px, yellow 50px, black 75px);
}
/* Posiciones en porcentajes: siempre cabrán dos repeticiones en el bloque, sin importar su tamaño */
.gradient-4 {
background-image: linear-gradient(black 0, green 25%, yellow 50%);
}
Ha ido a otra página
Haga clic dentro del mininavegador para poner el foco en esta ventana.
ObjetivosRealizado
0
Sustituye el degradado lineal de cada uno de los cuatro bloques por uno que se repita.
- Primer bloque.
- Segundo bloque.
- Tercer bloque.
- Cuarto bloque.