18 Abr Como hacer banderas del mundo mediante la propiedad background
En este ejercicio vamos a aplicar el concepto de background.
Concretamente los conceptos de gradiente lineal y gradiente radial.
Previamente te sugiero leer esta entrada dónde se repasan todas las propiedades.
Vayamos al enunciado del ejercicio.
Enunciado
Escribe el html y el css necesario para representar las banderas de colombia, francia, italia, alemania, japón y polonia.
Solución del ejercicio
Para resolver el ejercicio creamos 6 contenedores de proporción 3:2 (por ejemplo 300px x 200px).
La gracia de la solución es entender que si por ejemplo escribimos
.francia{
background-image:linear-gradient(90deg,red 33%, white 33%, white 66.66%, blue 66.66%);
}Es como si le indicáramos al navegador que el rojo va del 0 al 33% y que el white va del 33.33% al 66.% de modo que no puede haber gradiente posible porqué no hay espacio para ello.
Gracias a esto conseguimos que las barras de las banderas estén rectas.
Hacer mención a la bandera de Japón que tiene un código ligeramente distinto. Usamos la propiedad circle para forzar que sea un círculo.
¿Como queda el documento html?
<!DOCTYPE html>
<html>
<head>
<title>solución ejercicio de banderas</title>
<style>
/*aquí el css*/
</style>
</head>
<body>
<div class="colombia">colombia</div>
<div class="francia">francia</div>
<div class="italia">italia</div>
<div class="alemania">alemania</div>
<div class="japon">japón</div>
<div class="polonia">polonia</div>
</body>
</html>¿Como queda el documento css?
div{width:300px;height:200px;margin:20px;
display:inline-block;
border:1px solid #000;
}
.colombia{
background-image:linear-gradient(yellow 33%, blue 33%, blue 66.66%, red 66.66%);
}
.francia{
background-image:linear-gradient(90deg,red 33%, white 33%, white 66.66%, blue 66.66%);
}
.italia{
background-image:linear-gradient(90deg, green 33%, white 33%, white 66.66%, red 66.66%);
}
.alemania{
background-image:linear-gradient(black 33%, red 33%, red 66.66%, yellow 66.66%);
color:#fff;
}
.japon{
background-image:radial-gradient(circle, red 33%, white 33%, white);
}
.polonia{
background-image:linear-gradient(white 50%, red 50%, red);
}Si juntamos todas las piezas resolvemos el ejercicio y obtenemos las banderas.
¡Hola!
Querido lector,
¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!
¿Te ha gustado esta publicación?
¡Valora sobre 5 estrellas esta publicación!
Puntuación media 5 / 5. Votos: 1
Vaya, parece que hay puntos a corregir
¿Me ayudas a mejorar?
¡Gracias por tu feedback!
Entradas relacionadas:
La sal es a la cocina lo que las tipografías son al mundo web. Debemos conocerlas y usarlas con conocimiento. En esta entrada se explica que CSS se debe escribir para hacerlo posible.
Centrar un contenido horizontalmente es relativamente fácil. ¿Sin embargo cuando lo queremos hacer verticalmente que alternativas tenemos? En esta publicación se plantean 3.
Resumen de uso de la propiedad de overflow de CSS. Apuntes de teoría del curso IFCD0110 del curso confección y publicación de páginas web.
Como generar un parallax en una página web. Incluye ejemplo.
Hacemos un repaso rápido a :hover :active y las propiedades box-shadow, border-radius, cursor y background para estilizar botones.
Escribir CSS es fácil. Es un lenguaje que no tiene sorpresas. En esta entrada se explica como se escribe una instrucción CSS.
No hay comentarios