Como hacer banderas del mundo mediante la propiedad background

Como hacer banderas del mundo mediante la propiedad background

5
(1)

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.

banderas realizadas con css
Banderas creadas con css. Enunciado del ejercicio.

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

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.