Bandera Dominicana con CSS

Primero quiero identificar que soy Dominicano y me siento orgulloso de serlo, lo que me hace poder llevar a ustedes este pequeño ejemplo de la bandera de mi país, recientemente estoy desarrollando algunas cosas nuevas para el blog, dentro de ellas un nuevo tema, y pensando se me ocurrió esta pequeña y sencilla idea de como crear la bandera dominicana con CSS, utilizando posiciones absolutas en los elementos.

Para saber mas de la Bandera Dominicana puedes ver algunas referencias en wikipedia.org/wiki/BanderaDominicana.

Bandera Dominicana

Flag of the Dominican Republic

Observemos algunos detalles de la bandera como los colores y el tamaño, como podemos ver no es un azul o un rojo cualquiera, los colores azul y rojo tienen un poco de degrado. Esta imagen en espEcial tiene una resolución de 800px de ancho y 500px de alto. Los colores en hexadecimal son #002D62 para el azul y #002D62 para el rojo. Para la imagen del escudo he utilizado una imagen en .PNG con resolución de 100px de ancho y alto. Lo que haremos será pasar todo a HTML y CSS.

Markup HTML

Utilizaremos varios Div para ello:

<div class="bandera">
    <div class="azul"></div>
    <div class="rojo"></div>
    <div class="rojo-2"></div>
    <div class="azul-2"></div>
</div> 

Clases CSS

.bandera{
    width: 800px;
    height: 500px;
    /* border: 1px solid #ccc; */
    position: relative;
    background-image:url('http://i46.tinypic.com/357mw45.png');
    background-repeat:no-repeat;
    background-position: 50% 50%;
    background-color: white;
}
.azul {
    height: 197px;
    width: 343px;
    background-color: #002D62;
    position: absolute;
    left: 0;
    top: 0;
    margin-left: 0;
    margin-top: 0;
}
.azul-2 {
    height: 197px;
    width: 343px;
    background-color: #002D62;
    position: absolute;
    margin-right: 0;
    margin-bottom: 0;
    right: 0;
    bottom: 0;
}
.rojo {
    height: 197px;
    width: 343px;
    background-color: #CE1126;
    position: absolute;
    right: 0;
    top: 0;
    margin-right: 0;
    margin-top: 0;
}
.rojo-2 {
    height: 197px;
    width: 343px;
    background-color: #CE1126;
    position: absolute;
    left: 0;
    bottom: 0;
    margin-left: 0;
    margin-bottom: 0;
}

Lo que hicimos aquí fue declarar 5 clases una para crear el contenedor que sea el que agrupe a los demás, la clase .bandera pasandole una imagen de fondo, en este caso el escudo de la bandera y las otros para crear los colores.

Cuidado con intercambiar los colores de la bandera que se puede interpretar como símbolo de guerra, bueno eso es todo no creo que haya que explicar alguna propiedad en espacial ya que están todas fácil de comprender.

Dabblet Demo

Recomendado