Flackerndes Neon Schild mit CSS erstellen

von | Dez 9, 2021 | Design | 0 Kommentare

Schlagwörter: CSS - CSS3

Ich persönlich liebe diese Neon Schilder. Viele Livestreamer verwenden diese als Dekorationsmodul für ihren Livestreamhintergrund und da dachte ich, dass ich auch sowas gerne haben möchte. Aus diesem Grund habe ich heute eine kleine CSS Anleitung für euch wo ich zeige, wie man so ein flackernden Neon Schild Effekt mit CSS und HTML erstellen kann.

Eigentlich ist das wirklich sehr einfach und sieht cool aus. Ich persönlich werde sowas vielleicht in meinen eigenen Livestream als Overlay verwenden – ich weiss es noch nicht. Sonst könnt ihr natürlich diese CSS & HTML Sache auch in eure Webseite einbauen.

Video

HTML

1
2
3
4
5
    <div class="displays">
        <span>Fröhliche</span> &nbsp;
        <span>Weihnachten</span> &nbsp;
 
</div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Permanent Marker', cursive;
}
 
body {
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
}
 
.displays {
    position: relative;
    font-size: 4em;
    color: #0e3742;
    width: 100%;
    text-align: center;
}
 
.displays span {
    animation: animate 5s linear infinite;
}
 
@keyframes animate {
    0%, 18%, 20%, 50%, 60%, 65%, 80%, 90%, 92% {
        color: #0e3742;
        text-shadow: none;
    }
    19%, 21%, 30%, 49%, 60%, 64%, 81%, 89%, 93%, 100% {
        color: #fff;
        text-shadow: 0 0 10px #C1292E,
        0 0 20px #C1292E,
        0 0 40px #C1292E,
        0 0 80px #C1292E,
        0 0 160px #C1292E,
        0 0 400px #C1292E;
    }
}

So ich wünsche euch nun viel Spass mit eurem eigenen CSS Neon Schild und ich würde mich freuen, wenn ihr mir eure Resultate zeigen würdet.

WordPress

Allgemein

Technik

Design

Konzept

WordPress Plugins

Interessantes

Vermarktung

Themen

Font / Schriften

Social Media

Youtube

eCommerce

Gemischtes

Kolumne

Webinar

Blog Archiv

Kurse / Webinare

Meine nächste Webinare / Kurse





0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert