Cómo hacer banderas del mundo mediante la propiedad background

5
(4)

Publicado

Aviso importante web en obras

Es posible que el contenido que estás visualizando tenga un formato un poco raro o que se haya perdido algún contenido. Esto se debe a que en 2023/09 decidí renovar la página y con más de 1000 escritos el trabajo de irlos revisando uno por uno es agotador. Poco a poco iré corrigiendo todos los contenidos. ¡Gracias por la comprensión!

portada ejercicio backgrounds con gradiente

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.
Cómo hacer banderas del mundo mediante la propiedad background 1

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.[vc_custom_heading text=»¿Como queda el documento html?» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]

<!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>

[vc_custom_heading text=»¿Como queda el documento css?» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]

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!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *