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!
Entradas relacionadas:
¿Como se define el tamaño de cada uno de los elementos de una página web? En CSS podemos encontrar medidas absolutas y relativas. Veamos a que equivale cada una.
Ejercicio para practicar con la propiedad box-shadow de css. Incluye solución.
Código html y css de como crear un menú vertical con un submenú horizontal.
¿Cómo averiguar si una etiqueta es de tipo block, inline o inline-block? Repasamos la teoría y vemos un ejemplo práctico. Incluye solución.
Síntesis de pseudoelementos y pseudoselectores más usados. ¿Sabes en que se diferencían? ::root, ::before, :firt-child, :not(), ...
Si no te atrae la idea de usar list-style-image para decorar listas, entonces puedes hacerlo con ::before y el uso de iconos de fontawesome.
No Comments