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>
<span>Weihnachten</span>
</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.
0 Kommentare