- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<title>Degradados semitransparentes</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="squares">
<div class="square square-top-left"></div>
<div class="square square-top-right"></div>
<div class="square square-bottom-left"></div>
<div class="square square-bottom-right"></div>
</div>
</body>
</html>
CSS
.square-top-left {
background-image: linear-gradient(
135deg,
rgba(255, 255, 255, 0.2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.2) 75%,
transparent 75%
);
}
.square-top-right {
/* Colores: blanco con 30% de opacidad, transparente, blanco con 30% de opacidad, transparente */
}
.square-bottom-right {
background-image: linear-gradient(
315deg,
rgba(255, 255, 255, 0.4) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.4) 50%,
rgba(255, 255, 255, 0.4) 75%,
transparent 75%
);
}
.square-bottom-left {
/* Colores: blanco con 50% de opacidad, transparente, blanco con 50% de opacidad, transparente */
}
.squares {
margin: 70px auto;
width: 300px;
height: 300px;
background-color: #3498db;
}
.square {
float: left;
width: 50%;
height: 150px;
}
html,
body {
margin: 0;
padding: 0;
}
Ha ido a otra página
Haga clic dentro del mininavegador para poner el foco en esta ventana.
ObjetivosRealizado
0
Añade dos degradados a los cuadrados vacíos de las esquinas:
- Asigna al cuadrado superior derecho un degradado con un ángulo de
225°. - Asigna al cuadrado inferior izquierdo un degradado con un ángulo de
45°. - Después, cambia el color de fondo del bloque
.squaresa#8e44ad.
Usa las mismas posiciones de las paradas de color que en los cuadrados superior izquierdo e inferior derecho. Los colores están indicados en el código CSS.