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.

bandera de espana css linea fondo

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.

generador gradiente css online

¡No te vayas sin valorar el contenido!

¡Haz clic en una estrella para puntuarlo!

Promedio de puntuación 4.3 / 5. Recuento de votos: 9

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

Ya que has encontrado útil el contenido...

🙏 Ayúdame y compártelo en tus redes sociales ¡Significa mucho para mí! - Gracias

¡Siento que el contenido no te haya sido útil o gustado! 😔

¡Déjame mejorar este contenido!

Dime, ¿cómo crees que puedo mejorar este contenido? 🙏 ¡Significa mucho para mí! - Gracias

Deja un comentario

Decoración en WordPress