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:
Ejercicio CSS en el que a partir de una hoja html dada se pide separar al máximo html y css en hojas separadas. Incluye solución.
¿Se rompen las columnas de tu web al redimensionar el ancho de tu navegador? En esta publicación hablamos de box-sizing con un ejemplo real.
Ejercicio css en el que se muestra como mostrar logotipos sencillos mediante el uso de paletas de colores adecuadas y tipografías de google fonts.
Ejercicio css dónde se muestra el código necesario para centrar verticalmente iconos flotantes en el lateral de una página web. Incluye solución.
Dado un mismo código html como crearíamos columnas en un documento web utilizando floats versus haciéndolo con inline-block;
Ejercicio en que se practica con la llamada e implementación de tipografías css desde distintos recursos web. Incluye solución.
No Comments