En este artículo te mostraré un efecto genial de letras hecho con CSS puro, basado en el estilo del logo de TikTok. ¡Vamos a darle un toque único a tus títulos!

Diseño del Contenedor

Primero, creamos un contenedor .tiktok_container que ocupa todo el ancho de la pantalla. Usamos flexbox para centrar el contenido en ambos ejes y le damos un fondo negro para que el texto destaque:

.tiktok_container {
    width: 100%;
    display: flex;
    background-color: #000;
    justify-content: center;
    align-items: center;
}

Estilo del Texto

Para el texto, usamos la fuente Varela Round de Google Fonts. El tamaño es de 140px, con un espaciado de 5px entre letras, centrado y en mayúsculas. El color es un negro suave para un acabado elegante:

h1.tiktok_h1 {
    color: hsla(0, 0%, 0%, .9);
    font: normal 140px Varela Round, sans-serif;
    letter-spacing: 5px;
    text-align: center;
    text-transform: uppercase;
    margin: 0px;
    animation: tiktok_move linear 2000ms infinite;  
}

Animación de Sombras

La parte divertida: la animación tiktok_move. Crea un movimiento continuo de sombras de colores alrededor del texto, alternando entre rojas y azules. ¡Le da un efecto súper dinámico!

@keyframes tiktok_move {
0% {
       text-shadow:
           4px -4px 0 hsla(0, 100%, 50%, 1), 
           3px -3px 0 hsla(0, 100%, 50%, 1), 
           2px -2px 0 hsla(0, 100%, 50%, 1), 
           1px -1px 0 hsla(0, 100%, 50%, 1),
           -4px 4px 0 hsla(180, 100%, 50%, 1), 
           -3px 3px 0 hsla(180, 100%, 50%, 1), 
           -2px 2px 0 hsla(180, 100%, 50%, 1), 
           -1px 1px 0 hsla(180, 100%, 50%, 1)
        ;
    }
    25% {    
        text-shadow:      
            -4px -4px 0 hsla(180, 100%, 50%, 1), 
            -3px -3px 0 hsla(180, 100%, 50%, 1), 
            -2px -2px 0 hsla(180, 100%, 50%, 1), 
            -1px -1px 0 hsla(180, 100%, 50%, 1),
            4px 4px 0 hsla(0, 100%, 50%, 1), 
            3px 3px 0 hsla(0, 100%, 50%, 1), 
            2px 2px 0 hsla(0, 100%, 50%, 1), 
            1px 1px 0 hsla(0, 100%, 50%, 1)      
        ;
    }
    50% {
        text-shadow:
            -4px 4px 0 hsla(0, 100%, 50%, 1), 
            -3px 3px 0 hsla(0, 100%, 50%, 1), 
            -2px 2px 0 hsla(0, 100%, 50%, 1), 
            -1px 1px 0 hsla(0, 100%, 50%, 1),
            4px -4px 0 hsla(180, 100%, 50%, 1), 
            3px -3px 0 hsla(180, 100%, 50%, 1), 
            2px -2px 0 hsla(180, 100%, 50%, 1), 
            1px -1px 0 hsla(180, 100%, 50%, 1)
        ;
    }
    75% {
        text-shadow:
            4px 4px 0 hsla(180, 100%, 50%, 1), 
            3px 3px 0 hsla(180, 100%, 50%, 1), 
            2px 2px 0 hsla(180, 100%, 50%, 1), 
            1px 1px 0 hsla(180, 100%, 50%, 1),
            -4px -4px 0 hsla(0, 100%, 50%, 1), 
            -3px -3px 0 hsla(0, 100%, 50%, 1), 
            -2px -2px 0 hsla(0, 100%, 50%, 1), 
            -1px -1px 0 hsla(0, 100%, 50%, 1)      
        ;
    }
    100% {
        text-shadow:
            4px -4px 0 hsla(0, 100%, 50%, 1), 
            3px -3px 0 hsla(0, 100%, 50%, 1), 
            2px -2px 0 hsla(0, 100%, 50%, 1), 
            1px -1px 0 hsla(0, 100%, 50%, 1),
            -4px 4px 0 hsla(180, 100%, 50%, 1), 
            -3px 3px 0 hsla(180, 100%, 50%, 1), 
            -2px 2px 0 hsla(180, 100%, 50%, 1), 
            -1px 1px 0 hsla(180, 100%, 50%, 1)
        ;
    }  
}

Implementación

Para ver este efecto en acción, solo necesitas pegar el CSS en el <style> de tu HTML y usar el siguiente código para mostrar el título:

.tiktok_container {
    width: 100%;
    display: flex;
    background-color: #000;
    justify-content: center;
    align-items: center;
}
h1.tiktok_h1 {
    color: hsla(0, 0%, 0%, .9);
    font: normal 140px Varela Round, sans-serif;
    letter-spacing: 5px;
    text-align: center;
    text-transform: uppercase;
    margin: 0px;
    animation: tiktok_move linear 2000ms infinite;  
}
@keyframes tiktok_move {
    0% {
        text-shadow:
            4px -4px 0 hsla(0, 100%, 50%, 1), 
            3px -3px 0 hsla(0, 100%, 50%, 1), 
            2px -2px 0 hsla(0, 100%, 50%, 1), 
            1px -1px 0 hsla(0, 100%, 50%, 1),
            -4px 4px 0 hsla(180, 100%, 50%, 1), 
            -3px 3px 0 hsla(180, 100%, 50%, 1), 
            -2px 2px 0 hsla(180, 100%, 50%, 1), 
            -1px 1px 0 hsla(180, 100%, 50%, 1)
        ;
    }
    25% {    
        text-shadow:      
            -4px -4px 0 hsla(180, 100%, 50%, 1), 
            -3px -3px 0 hsla(180, 100%, 50%, 1), 
            -2px -2px 0 hsla(180, 100%, 50%, 1), 
            -1px -1px 0 hsla(180, 100%, 50%, 1),
            4px 4px 0 hsla(0, 100%, 50%, 1), 
            3px 3px 0 hsla(0, 100%, 50%, 1), 
            2px 2px 0 hsla(0, 100%, 50%, 1), 
            1px 1px 0 hsla(0, 100%, 50%, 1)      
        ;
    }
    50% {
        text-shadow:
            -4px 4px 0 hsla(0, 100%, 50%, 1), 
            -3px 3px 0 hsla(0, 100%, 50%, 1), 
            -2px 2px 0 hsla(0, 100%, 50%, 1), 
            -1px 1px 0 hsla(0, 100%, 50%, 1),
            4px -4px 0 hsla(180, 100%, 50%, 1), 
            3px -3px 0 hsla(180, 100%, 50%, 1), 
            2px -2px 0 hsla(180, 100%, 50%, 1), 
            1px -1px 0 hsla(180, 100%, 50%, 1)
        ;
    }
    75% {
        text-shadow:
            4px 4px 0 hsla(180, 100%, 50%, 1), 
            3px 3px 0 hsla(180, 100%, 50%, 1), 
            2px 2px 0 hsla(180, 100%, 50%, 1), 
            1px 1px 0 hsla(180, 100%, 50%, 1),
            -4px -4px 0 hsla(0, 100%, 50%, 1), 
            -3px -3px 0 hsla(0, 100%, 50%, 1), 
            -2px -2px 0 hsla(0, 100%, 50%, 1), 
            -1px -1px 0 hsla(0, 100%, 50%, 1)      
        ;
    }
    100% {
        text-shadow:
            4px -4px 0 hsla(0, 100%, 50%, 1), 
            3px -3px 0 hsla(0, 100%, 50%, 1), 
            2px -2px 0 hsla(0, 100%, 50%, 1), 
            1px -1px 0 hsla(0, 100%, 50%, 1),
            -4px 4px 0 hsla(180, 100%, 50%, 1), 
            -3px 3px 0 hsla(180, 100%, 50%, 1), 
            -2px 2px 0 hsla(180, 100%, 50%, 1), 
            -1px 1px 0 hsla(180, 100%, 50%, 1)
        ;
    }  
  }
}

<div class="tiktok_container">
    <h1 class="tiktok_h1">TikTok</h1>
</div>

¡Y listo! Con este código CSS, tus títulos tendrán un efecto visual espectacular, capturando la esencia vibrante de TikTok. ¡Anímate a probarlo y sorprende a todos!