BANNER DE TEXTO

Bueno chicuelos, volví después de mucho, lo siento los tkm mucho, aquí les va el super tutorial del banner que aparece arriba del blogcito .

CÓDIGO

<link href="https://fonts.googleapis.com/css2?family=Gruppo&amp;display=swap" rel="stylesheet" />

<style>

:root {

  /* ==========================================

     ZONA DE CONFIGURACIÓN PERSONALIZADA

     ========================================== */

  

  /* 1. Color base (Acepta hex, rgb o rgba). Cambia esto para alterar toda la paleta. */

  --marquee-base-color: #000000;

  

  /* 2. Velocidad de la animación (menor tiempo = más rápido) */

  --marquee-speed: 14s;

  

  /* 3. Texto secundario o decoración de la derecha */

  --marquee-badge: " Texto quieto aqui ";

  /* ==========================================

     AUTOMATIZACIÓN DE LUCES Y TINTES (Aero Engine)

     ========================================== */

  /* Derivamos automáticamente los tonos translúcidos y brillos a partir del color base */

  --marquee-bg: color-mix(in srgb, var(--marquee-base-color) 25%, rgba(255, 255, 255, 0.7));

  --marquee-text-color: color-mix(in srgb, var(--marquee-base-color) 85%, #000000);

  --marquee-shadow: color-mix(in srgb, var(--marquee-base-color) 60%, transparent);

}

.frutiger-marquee {

  width: 100%;

  overflow: hidden;

  margin-top: 25px;

  margin-bottom: 25px;

  /* Fondo de vidrio esmerilado automatizado */

  background: var(--marquee-bg);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  /* Bordes brillantes característicos de Aero */

  border: 1.5px solid rgba(255, 255, 255, 0.9);

  border-radius: 30px;

  /* Sombra profunda exterior y brillo dinámico */

  box-shadow: 

    0 8px 25px var(--marquee-shadow),

    inset 0 1px 4px rgba(255, 255, 255, 0.9);

  padding: 10px 0;

  position: relative;

}

/* Brillo superior tipo cristal automatizado */

.frutiger-marquee:before {

  content: "";

  position: absolute;

  left: 6px;

  right: 6px;

  top: 3px;

  height: 45%;

  border-radius: 25px;

  background: linear-gradient(

    to bottom,

    rgba(255, 255, 255, 0.85),

    rgba(255, 255, 255, 0)

  );

  pointer-events: none;

}

/* Texto de la marquesina */

.frutiger-marquee-text {

  display: inline-block;

  white-space: nowrap;

  /* Color de texto derivado automáticamente */

  color: var(--marquee-text-color);

  font-family: 'Gruppo', sans-serif;

  font-size: 16px;

  font-weight: bold;

  letter-spacing: 2px;

  /* Brillo sutil en el texto */

  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.9);

  animation: deslizar var(--marquee-speed) linear infinite;

}

/* Animación de desplazamiento */

@keyframes deslizar {

  from {

    transform: translateX(100%);

  }

  to {

    transform: translateX(-100%);

  }

}

/* Decoración lateral automatizada */

.frutiger-marquee::after {

  content: var(--marquee-badge);

  position: absolute;

  right: 18px;

  top: 50%;

  transform: translateY(-50%);

  font-size: 16px;

  opacity: 0.85;

  pointer-events: none;

  color: var(--marquee-text-color);

}

</style>

<!-- ==========================================

     ZONA DE TEXTO PRINCIPAL

     ========================================== -->

<div class="frutiger-marquee">

  <div class="frutiger-marquee-text">

    “Tu texto aquí“

 </div>

</div>

Este código es facilito facilito, lo primero que hacemos es pegar el código en notas, y lo primer que vamos a cambiar es el color del que queremos el banner (#000000), no te preocupes de las sombras, eso lo he dejado puesto para que no tengas que preocuparte.

Luego de eso ponemos el texto que esta a la derecha quieto (Texto quieto aquí), pueden poner emojis su estetica, etc.

Y por ultimo ponemos el texto que se moverá, ("tu texto aqui"), aqui deben sacar las comillas, pero dejen el espacio .

Y copiamos el código ya cambiado, esto lo van a pegar en donde dice "todas las columnas" que es la columna arriba de donde lo ponemos siempre, y así deberían tener su banner listito.