Videos eBook Forum Kontakt

jetzt Videos kaufen
zum Lernen von HTML,
CSS und Webdesign

Jetzt das HTML-Seminar bestellen als
Video-Tutorial mit über 210 Videos:
von den Grundlagen bis zur fertigen Website
Video-Kurs HTML5, CSS & Webdesign

Video-Kurs bestellen HTML5, CSS & Webdesign
Video-Kurs bestellen HTML5, CSS & Webdesign

Texteffekt: brennende Schrift - Feuertext über text-shadow

Ein Text, der aussieht, als hätte er Feuer gefangen. Sehr schön über CSS3 und text-shadow umsetzbar, mit dem Effekt, dass je nach Textinhalt, die Flammen des Feuers unterschiedlich lodern.

Texteffekt: brennende Schrift
Texteffekt: brennende Schrift

Dieser Effekt wirkt nur mit schwarzen Hintergrund und genügend großer Schrift. Eignet sich somit auch nur für Überschriften, die thematisch passen.

Wir benötigen für diesen Effekt viele sich nach oben schiebende Schatten, mit entsprechenden Farben und unterschiedlichen Größen und Härten der Schatten. Im ersten Schritt benötigen wir die Farben, die wir am besten aus einem richtigen Feuer herausziehen. Dafür eignen sich Farbpipetten, die z.B. in Scriptly integriert sind, oder in Photoshop.

Feuerstelle für die Bestimmung der Farben für unseren Schrifteffekt
Feuerstelle für die Bestimmung der Farben für unseren Schrifteffekt

Hieraus ziehen wir die verwendeten Farben (und man kann sich den Aufbau von Flammen ansehen). Innen weiß, über gelb Richtung rot.

Unser HTML-Code für das Beispiel:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Texteffekt brennende Schrift</title>
    <link href="css3-feuer-schrift.css"
          rel="stylesheet">
</head>
<body>
<p class="feuer">Streichholz</p>
</body>
</html> 

Im CSS-Bereich, geben wir dem Hintergrund Schwarz als Farbe und Abstand mit, damit die Flammen auch genügend Platz nach oben zum Lodern, haben.

Dieser Effekt benötigt auch eine gewisse Schriftgröße (und Farbe).

Und mit der CSS-Klasse .feuer wird das Aussehen der Flamme definiert – sprich die Schatten über text-shadow, die sich nach oben, mit unterschiedlicher Größe, Farbe und Schattenhärte fortsetzen.

body {
    margin: 40px;
    background-color: black;
}

.feuer {
    font-size: 75pt;
    font-weight: bold;
    text-shadow:   0px   0px 10px white,
                   5px  -5px 10px #F8FF9D,
                 -10px -10px 20px #F5FE5C,
                  10px -15px 20px #FDDB33,
                 -10px -20px 20px #FFC126,
                  10px -25px 20px #FF7808,
                 -10px -30px 20px #F95801,
                  15px -35px 20px #FE7606,
                 -15px -40px 20px #FD5C01,
                  15px -45px 15px #E54600,
                 -20px -50px 15px #D23700,
                  20px -55px 15px #B82B00,
                 -20px -60px 15px #A11301,
                  20px -65px 15px #981D01,
                 -25px -70px 10px #851200,
                  25px -75px 10px #690D00,
                 -25px -80px 10px #3E0600
	        ;
}

So einfach ist die Umsetzung einer brennenden Schrift. Viel Spaß beim Nachbauen und experimentieren.