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!
¿Te ha gustado esta publicación?
¡Valora sobre 5 estrellas esta publicación!
Puntuación media 5 / 5. Votos: 1
Vaya, parece que hay puntos a corregir
¿Me ayudas a mejorar?
¡Gracias por tu feedback!
Entradas relacionadas:
Hay ocasiones en las que necesitamos centrar un texto pero no hay manera. La forma correcta de hacerlo es mediante CSS.
Ejercicio visual dónde se debe indicar que tipo de posicionamiento se ha usado para desplazar una caja. Incluye solución y explicación.
El uso de tablas html no está muy bien visto si no es estrictamente para tabular contenidos. Pero también lo podemos hacer mediante display:table de css.
¿Cómo emparejar tipografías en una página web sin morir en el intento? Pocas decisiones en el mundo web causan tanta controversia. ¿Necesitas herramientas para acertar?
Resumen y ejemplo de aplicación de la propiedad Z-index. Asignatura CSS curso confección y publicación de páginas web.
Ejercicio básico nivel principiante para practicar el uso de selectores CSS. Apuntos de alumno del curso web IFCD0110. Incluye solución.
No hay comentarios