CSS Text #2 - Code Example

Demo

9.72 KB
CSS, HTML
Text
animation, glow
MIT License

Code
Editor

HTML

<h1 class="glow-text-1" data-text="black mirror"><span>black mirror</span></h1>

CSS

.glow-text-1 {
    position: relative;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: -webkit-calc(20px + 5vw);
    font-size: -moz-calc(20px + 5vw);
    font-size: calc(20px + 5vw);
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-shadow: 0 0 0.15em #1da9cc;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap;
    -webkit-filter: blur(0.007em);
    filter: blur(0.007em);
    -webkit-animation: shake-glow-text-1 2.5s linear forwards;
    -moz-animation: shake-glow-text-1 2.5s linear forwards;
    -o-animation: shake-glow-text-1 2.5s linear forwards;
    animation: shake-glow-text-1 2.5s linear forwards;
}

.glow-text-1 span {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-clip-path: polygon(10% 0%, 44% 0%, 70% 100%, 55% 100%);
    clip-path: polygon(10% 0%, 44% 0%, 70% 100%, 55% 100%);
}

.glow-text-1::before,
.glow-text-1::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
}

.glow-text-1::before {
    -webkit-animation: crack1-glow-text-1 2.5s linear forwards;
    -moz-animation: crack1-glow-text-1 2.5s linear forwards;
    -o-animation: crack1-glow-text-1 2.5s linear forwards;
    animation: crack1-glow-text-1 2.5s linear forwards;
    -webkit-clip-path: polygon(0% 0%, 10% 0%, 55% 100%, 0% 100%);
    clip-path: polygon(0% 0%, 10% 0%, 55% 100%, 0% 100%);
}

.glow-text-1::after {
    -webkit-animation: crack2-glow-text-1 2.5s linear forwards;
    -moz-animation: crack2-glow-text-1 2.5s linear forwards;
    -o-animation: crack2-glow-text-1 2.5s linear forwards;
    animation: crack2-glow-text-1 2.5s linear forwards;
    -webkit-clip-path: polygon(44% 0%, 100% 0%, 100% 100%, 70% 100%);
    clip-path: polygon(44% 0%, 100% 0%, 100% 100%, 70% 100%);
}

@-webkit-keyframes shake-glow-text-1 {
    5%,
    15%,
    25%,
    35%,
    55%,
    65%,
    75%,
    95% {
        -webkit-filter: blur(0.018em);
        filter: blur(0.018em);
        -webkit-transform: translateY(0.018em) rotate(0deg);
        transform: translateY(0.018em) rotate(0deg);
    }

    10%,
    30%,
    40%,
    50%,
    70%,
    80%,
    90% {
        -webkit-filter: blur(0.01em);
        filter: blur(0.01em);
        -webkit-transform: translateY(-0.018em) rotate(0deg);
        transform: translateY(-0.018em) rotate(0deg);
    }

    20%,
    60% {
        -webkit-filter: blur(0.03em);
        filter: blur(0.03em);
        -webkit-transform: translate(-0.018em, 0.018em) rotate(0deg);
        transform: translate(-0.018em, 0.018em) rotate(0deg);
    }

    45%,
    85% {
        -webkit-filter: blur(0.03em);
        filter: blur(0.03em);
        -webkit-transform: translate(0.018em, -0.018em) rotate(0deg);
        transform: translate(0.018em, -0.018em) rotate(0deg);
    }

    100% {
        -webkit-filter: blur(0.007em);
        filter: blur(0.007em);
        -webkit-transform: translate(0) rotate(-0.5deg);
        transform: translate(0) rotate(-0.5deg);
    }
}

@-moz-keyframes shake-glow-text-1 {
    5%,
    15%,
    25%,
    35%,
    55%,
    65%,
    75%,
    95% {
        filter: blur(0.018em);
        -moz-transform: translateY(0.018em) rotate(0deg);
        transform: translateY(0.018em) rotate(0deg);
    }

    10%,
    30%,
    40%,
    50%,
    70%,
    80%,
    90% {
        filter: blur(0.01em);
        -moz-transform: translateY(-0.018em) rotate(0deg);
        transform: translateY(-0.018em) rotate(0deg);
    }

    20%,
    60% {
        filter: blur(0.03em);
        -moz-transform: translate(-0.018em, 0.018em) rotate(0deg);
        transform: translate(-0.018em, 0.018em) rotate(0deg);
    }

    45%,
    85% {
        filter: blur(0.03em);
        -moz-transform: translate(0.018em, -0.018em) rotate(0deg);
        transform: translate(0.018em, -0.018em) rotate(0deg);
    }

    100% {
        filter: blur(0.007em);
        -moz-transform: translate(0) rotate(-0.5deg);
        transform: translate(0) rotate(-0.5deg);
    }
}

@-o-keyframes shake-glow-text-1 {
    5%,
    15%,
    25%,
    35%,
    55%,
    65%,
    75%,
    95% {
        filter: blur(0.018em);
        -o-transform: translateY(0.018em) rotate(0deg);
        transform: translateY(0.018em) rotate(0deg);
    }

    10%,
    30%,
    40%,
    50%,
    70%,
    80%,
    90% {
        filter: blur(0.01em);
        -o-transform: translateY(-0.018em) rotate(0deg);
        transform: translateY(-0.018em) rotate(0deg);
    }

    20%,
    60% {
        filter: blur(0.03em);
        -o-transform: translate(-0.018em, 0.018em) rotate(0deg);
        transform: translate(-0.018em, 0.018em) rotate(0deg);
    }

    45%,
    85% {
        filter: blur(0.03em);
        -o-transform: translate(0.018em, -0.018em) rotate(0deg);
        transform: translate(0.018em, -0.018em) rotate(0deg);
    }

    100% {
        filter: blur(0.007em);
        -o-transform: translate(0) rotate(-0.5deg);
        transform: translate(0) rotate(-0.5deg);
    }
}

@keyframes shake-glow-text-1 {
    5%,
    15%,
    25%,
    35%,
    55%,
    65%,
    75%,
    95% {
        -webkit-filter: blur(0.018em);
        filter: blur(0.018em);
        -webkit-transform: translateY(0.018em) rotate(0deg);
        -moz-transform: translateY(0.018em) rotate(0deg);
        -o-transform: translateY(0.018em) rotate(0deg);
        transform: translateY(0.018em) rotate(0deg);
    }

    10%,
    30%,
    40%,
    50%,
    70%,
    80%,
    90% {
        -webkit-filter: blur(0.01em);
        filter: blur(0.01em);
        -webkit-transform: translateY(-0.018em) rotate(0deg);
        -moz-transform: translateY(-0.018em) rotate(0deg);
        -o-transform: translateY(-0.018em) rotate(0deg);
        transform: translateY(-0.018em) rotate(0deg);
    }

    20%,
    60% {
        -webkit-filter: blur(0.03em);
        filter: blur(0.03em);
        -webkit-transform: translate(-0.018em, 0.018em) rotate(0deg);
        -moz-transform: translate(-0.018em, 0.018em) rotate(0deg);
        -o-transform: translate(-0.018em, 0.018em) rotate(0deg);
        transform: translate(-0.018em, 0.018em) rotate(0deg);
    }

    45%,
    85% {
        -webkit-filter: blur(0.03em);
        filter: blur(0.03em);
        -webkit-transform: translate(0.018em, -0.018em) rotate(0deg);
        -moz-transform: translate(0.018em, -0.018em) rotate(0deg);
        -o-transform: translate(0.018em, -0.018em) rotate(0deg);
        transform: translate(0.018em, -0.018em) rotate(0deg);
    }

    100% {
        -webkit-filter: blur(0.007em);
        filter: blur(0.007em);
        -webkit-transform: translate(0) rotate(-0.5deg);
        -moz-transform: translate(0) rotate(-0.5deg);
        -o-transform: translate(0) rotate(-0.5deg);
        transform: translate(0) rotate(-0.5deg);
    }
}

@-webkit-keyframes crack1-glow-text-1 {
    0%,
    95% {
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    100% {
        -webkit-transform: translate(-51%, -48%);
        transform: translate(-51%, -48%);
    }
}

@-moz-keyframes crack1-glow-text-1 {
    0%,
    95% {
        -moz-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    100% {
        -moz-transform: translate(-51%, -48%);
        transform: translate(-51%, -48%);
    }
}

@-o-keyframes crack1-glow-text-1 {
    0%,
    95% {
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    100% {
        -o-transform: translate(-51%, -48%);
        transform: translate(-51%, -48%);
    }
}

@keyframes crack1-glow-text-1 {
    0%,
    95% {
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    100% {
        -webkit-transform: translate(-51%, -48%);
        -moz-transform: translate(-51%, -48%);
        -o-transform: translate(-51%, -48%);
        transform: translate(-51%, -48%);
    }
}

@-webkit-keyframes crack2-glow-text-1 {
    0%,
    95% {
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    100% {
        -webkit-transform: translate(-49%, -53%);
        transform: translate(-49%, -53%);
    }
}

@-moz-keyframes crack2-glow-text-1 {
    0%,
    95% {
        -moz-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    100% {
        -moz-transform: translate(-49%, -53%);
        transform: translate(-49%, -53%);
    }
}

@-o-keyframes crack2-glow-text-1 {
    0%,
    95% {
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    100% {
        -o-transform: translate(-49%, -53%);
        transform: translate(-49%, -53%);
    }
}

@keyframes crack2-glow-text-1 {
    0%,
    95% {
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    100% {
        -webkit-transform: translate(-49%, -53%);
        -moz-transform: translate(-49%, -53%);
        -o-transform: translate(-49%, -53%);
        transform: translate(-49%, -53%);
    }
}

HTML
CSS

Imagine we’re diving into the world of web design, specifically focusing on how to make text not just stand out, but literally glow and dance on the screen. The code we’re looking at today does exactly that, and it’s all about creating an animated, glowing text effect that could easily remind you of the title sequence of a sci-fi show or movie.

At the heart of this magic is CSS (Cascading Style Sheets), the styling language of the web. This particular snippet defines a class called glow-text-1 that applies to an HTML element (in this case, an <h1> tag with the text “black mirror”). This class is packed with properties that work together to create the glowing text effect.

First off, the text is styled with a specific font, size, weight, and color. The color is set to white, but what really adds the pizzazz is the text-shadow property, giving our text that desired glow. But we’re not stopping there. The code also disables text selection (for aesthetic reasons) and ensures the text won’t wrap.

The real action comes with the animations. The text is not just glowing; it’s also shaking and cracking, thanks to some cleverly defined keyframes animations. These animations subtly shake the text and split it into segments that slightly move apart, mimicking a crack. This effect is achieved by using clip paths to create visual segments of the text and animating these segments independently.

These animations use a mix of blurring and slight movements to give the impression that the text is vibrating or shaking. The keyframes defined in the code describe precisely how the text should move and blur over time, creating a dynamic, almost alive, visual effect.

So, when you piece it all together, what you get is this vibrant, glowing text that seems to crack and shake, as if charged with some otherworldly energy. It’s a stunning effect that can make any headline or title jump off the screen. Whether you’re creating a personal website, a digital art project, or just experimenting with CSS, understanding how to manipulate text with animations and effects like this can open up a whole new realm of creative possibilities.