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:
Fontawesome, iconmoon, glyphicons,... ¿quieres saber como poner iconos en tu proyecto web y hacerlo bien? Te explico como y algún ejemplo.
Guía sobre los principales selectores css que existen para llamar a las etiquetas de un documento web.
Hacemos un repaso rápido a :hover :active y las propiedades box-shadow, border-radius, cursor y background para estilizar botones.
Rápido ejercicio para practicar el concepto de herencia en css. Incluye solución y explicación.
Código CSS explicado paso a paso para crear un menú horizontal con un sub menú vertical. Apuntes de alumno IFCD0110 tutorial CSS.
Ejemplo de menú horizontal con submenú desplegable horizontal mediante CSS. Incluye archivo descargable.
No Comments