Bandera de España con CSS

En este tutorial te explico como hacer una bandera de España usando CSS.

Lo utilizo para hacer una pequeña linea horizontal en la parte superior y en la parte inferior de esta misma web.

Bandera de españa dentro del theme de WordPress

Lo primero que tienes que hacer es copiar el código CCS, que te dejo a continuación y pegarlo en el fichero style.css css de tu tema.

.bandera-fondo { background: linear-gradient(to right, #ad1519 0, #ad1519 25%, #fabd00 25%, #fabd00 75%, #ad1519 75%, #ad1519) no-repeat; height: 8px; }

Lo segundo que tienes que hacer es incluir el código que ves a continuación dentro del lugar que quieres que aparezca la bandera en tu código HTML.

<div class="bandera-fondo"></div>

Bandera de España usando el editor de Gutemberg en WordPress

En este ejemplo vamos a cambiar el color gris de la línea que utilizamos para separar el contenido en Gutenberg con el color de la bandera de España.

Lo primero que vamos hacer es crear una línea separadora usando el editor de Gutenberg.

Lo segundo que tenemos que hacer es poner la clase del código CCS donde pone avanzado y donde pone clase CCS adicionales.

Con estos dos pequeños cambios, obtenemos una línea con la forma de la bandera de España como la que ves aquí debajo.

---

Generador Online de gradiente con CSS

Lo más sencillo para hacer un fondo con varios colores o gradientes es usar un generador de gradientes de CSS online, yo el que suele usar es : https://cssgradient.io , es un generador de gradientes gratis y fácil de usar.

Bandera de España usando el thema GeneratePress

Para agregar la bandera de españa en el thema de GeneratePress puedes usar los hooks que ya vienen en el tema, tan solo tienes que añadir el codigo siguiente a tu fichero functions.php

---

<?php
/* Inicio Añade la bandera de españa en el hook generate_after_footer de GENERATEPRESS */
function incluir_css_despues_de_contenido() {
    echo '<div class="bandera-fondo"></div>';
}
add_action( 'generate_after_footer', 'incluir_css_despues_de_contenido', 50 );
/* Fin Añade la bandera de españa en el hook generate_after_footer */

/* Añade la bandera de españa en el hook generate_before_header de GENERATEPRESS */
function incluir_css_antes_de_encabezado() {
    echo '<div class="bandera-fondo"></div>';
}
add_action( 'generate_before_header', 'incluir_css_antes_de_encabezado', 50 );
/* Fin la bandera de españa en el hook generate_before_header */
?>

---

Este pequeño código lo que hace es añadir el div de la clase bandera-fondo en los hooks que ya tiene GeneratePress de: generate_after_footer y el de generate_before_header.

Bandera de España usando en el style.css

Para añadir la bandera de España en el fichero style.css de tu thema solo tienes que escribir los siguiente codigos:

/* Inicio Banderas Header */
.site-header {
    position: relative;
}

.site-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: linear-gradient(
        to right,
        #ad1519 0,
        #ad1519 25%,
        #fabd00 25%,
        #fabd00 75%,
        #ad1519 75%,
        #ad1519
    ) no-repeat;
}
/* Fin Banderas */

En el caso del header, estoy usando un pseudoelemento ::before para crear el borde superior. Esto se hace de manera que el borde no interfiere con el contenido de .site-header, y puede ser fácilmente añadido o removido sin afectar el diseño de .site-header en sí.

Además, este código permite que el borde se extienda a lo largo de todo el ancho de .site-header, independientemente de su ancho actual. Esto es debido al uso de left: 0 y right: 0, que estiran el pseudoelemento para llenar el ancho del elemento padre.

Además, el position: relative; en .site-header es necesario para que el pseudoelemento ::before se posicione correctamente. Los pseudoelementos ::before y ::after se posicionan en relación con el elemento padre más cercano que tiene un valor position que no sea static, que es el valor predeterminado. Por lo tanto, si .site-header no tiene position: relative;, el pseudoelemento podría posicionarse en relación con algún otro elemento en la página, lo que probablemente no es lo que quieres.

/* Inicio Banderas Footer */
.site-footer {
    position: relative;
}

.site-footer::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: linear-gradient(
        to right,
        #ad1519 0,
        #ad1519 25%,
        #fabd00 25%,
        #fabd00 75%,
        #ad1519 75%,
        #ad1519
    ) no-repeat;
}
/* Fin Banderas */

En este caso del footer , estoy utilizando el pseudoelemento ::after para crear el borde inferior. Nota que la propiedad bottom está ahora establecida a 0, lo que coloca el pseudoelemento en la parte inferior del elemento “.site-footer”. Como en el caso anterior, el pseudoelemento se extiende a lo largo de todo el ancho de “.site-footer” gracias a las propiedades left: 0 y right: 0.

También aquí el position: relative; en “.site-footer” es necesario para que el pseudoelemento ::after se posicione correctamente en relación con el “.site-footer”, en lugar de algún otro elemento en la página.