- Teoría
- Teoría
Construir un fondo complejo: parte 1
En esta serie de ejercicios construiremos un patrón complejo con degradados. Para ello usaremos la técnica de las múltiples imágenes de fondo.
En CSS puedes asignar varias imágenes de fondo a un elemento separándolas por comas:
background-image:
url('img1.png'),
url('img2.png'),
url('img3.png');De la misma manera, en lugar de imágenes cargadas con url(), puedes usar degradados:
background-image:
linear-gradient(...),
linear-gradient(...),
linear-gradient(...);Usaremos degradados con colores transparentes y transiciones bruscas. Primero construiremos un fragmento y después lo repetiremos. En este ejercicio añadirás los dos primeros degradados para obtener lo siguiente:
- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<title>Construir un fondo complejo: parte 1</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="pattern"></div>
</body>
</html>
CSS
.pattern {
margin: 100px auto;
width: 100px;
height: 100px;
background-color: #333333;
background-image:
none,
none;
box-shadow: 1px 1px 3px #333333;
}
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 al bloque .pattern dos degradados de white a transparent con una transición brusca en el 25%:
- El primer degradado debe tener un ángulo de
135°, - y el segundo, un ángulo de
225°.