Banderas de Centroamérica con CSS

Publicado por Leandro Gómez

Al desarrollar un sitio web, lo que se busca siempre es optimizar todos los elementos para que el servidor consuma menos recursos al hacer el llamado de los archivos y así cargue más rápido. Uno de los factores que incide en el tiempo de carga de una página es el peso de las imágenes que contiene.

Hay varios trucos que se pueden utilizar para optimizar el uso de las imágenes, como el uso de sprites o la optimización de las imágenes para que pesen menos. Una opción, en el caso de íconos u otros elementos gráficos sencillos, es prescindir por completo de las imágenes rasterizadas y utilizar CSS.

En esta ocasión, vamos a utilizar gradientes CSS y la propiedad transform para crear banderas con puro CSS y HTML. Como siempre, hay un ejemplo en vivo al final del artículo para que puedas experimentar.

En diseño gráfico, un gradiente se refiere a un bloque de color que cambia gradualmente, o se desvanece de un color a otro. Por ejemplo, si el color se va del negro al blanco, el color del medio sería gris. En una página web es sencillo crear gradientes con CSS. Como referencia, cubrimos esto en un artículo anterior.

Ventajas

• No hay necesidad de subir las imágenes al servidor.
• No hay peticiones HTTP adicionales al enlazar las imágenes.
• Las imágenes son escalables, sin aumentar de peso.

Desventajas

• No hay soporte para algunos navegadores.

El marcado HTML

Crearemos un div con dos clases; bandera que contiene el formato general de la bandera y nicaragua con los valores del gradiente.

<div class="bandera nicaragua"></div>

La hoja de estilos

Asignamos a la clase bandera un alto de 150 píxeles y un ancho de 200 píxeles. Le damos un margen de 1em y lo hacemos flotar hacía la izquierda.

.bandera {
  height: 150px;
  width: 200px;
  margin: 1em;
  float: left;
}

Dentro de la clase nicaragua asignamos el color a las tres franjas, blanco a la del medio, y azul a las otras dos.

.nicaragua {
  background: linear-gradient(to bottom, #0067c6 33%, #fff 33%, #fff 66%, #0067c6 66%);
  background: -webkit-linear-gradient(top, #0067c6 33%, #fff 33%, #fff 66%, #0067c6 66%);
}

Ya que las tres franjas son del mismo tamaño, hacemos la primera parada a un tercio (33%), y la segunda a dos tercios (66%). Es importante que este valor sea en porcentajes y no un valor absoluto en píxeles (50px y 100px respectivamente), ya que caso contrario no podríamos escalar la bandera al cambiar el alto y el ancho en la clase bandera.

Resultado

¡Y eso es todo! Con unas pocas líneas de código ya tenemos nuestra bandera de Nicaragua hecha con CSS y HTML. El peso total del CSS comprimido es de 232 bytes. Más de la mitad del equivalente a un archivo PNG optimizado.

Estrellita dónde estás

Con el ejemplo anterior, podrás recrear sin problemas la mayoría de banderas. Sin embargo, hay dos que representan un reto especial; las banderas de Panamá y Honduras. Ambas llevan estrellas.

Crearemos tres triángulos que juntos formaran una estrella utilizando pseudo-clases.

El marcado HTML

El marcado HTML es bastante sencillo; un div contenedor llamado estrella en el cual podremos escalar el objeto al tamaño deseado y el div llamado estrella2 que tendrá los tres triángulos.

La hoja de estilos

En el contenedor escalaremos el objeto a un 50%. Este valor lo podemos cambiar según nuestras necesidades.

.estrella {
  transform: scale(.5);
  -webkit-transform: scale(.5);
  -ms-transform: scale(.5);
}

Finalizamos creando los tres triángulos que conformarán la estrella.

.estrella2 {
  color: red;
  width: 0px;
  height: 0px;
  border-right: 100px solid transparent;
  border-bottom: 70px solid red;
  border-left: 100px solid transparent;
  transform: rotate(35deg);
  -webkit-transform: rotate(35deg);
  -ms-transform: rotate(35deg);
}

Como podrás deducir del código de arriba, cada triángulo se va formando al crear tres bordes de diferente grosor, dos de ellos transparentes y uno de color. Finalmente se utiliza el atributo transform:rotate para darle el ángulo a cada uno de los objetos.

.estrella2:before {
  width: 0px;
  height: 0px;
  border-right: 30px solid transparent;
  border-bottom: 80px solid red;
  border-left: 30px solid transparent;
  transform: rotate(-35deg);
  -webkit-transform: rotate(-35deg);
  -ms-transform: rotate(-35deg);
  position: absolute;
  top: -45px;
  left: -65px;
  display: block;
  content: '';
}

.estrella2:after {
  width: 0px;
  height: 0px;
  border-right: 100px solid transparent;
  border-bottom: 70px solid red;
  border-left: 100px solid transparent;
  transform: rotate(-70deg);
  -webkit-transform: rotate(-70deg);
  -ms-transform: rotate(-70deg);
  position: absolute;
  top: 3px;
  left: -105px;
  display: block;
  content: '';
}

Revisa el ejemplo en vivo con el código completo de las seis banderas.