Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt

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 lang="de">
<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: 3em;
    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.

Weiterempfehlen • Social Bookmarks • Vielen Dank

Wenn Sie einen Fehler finden, bitte mitteilen (egal ob Schreibfehler oder inhaltlicher Fehler).

Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button:



(kann angegeben werden)

Nach Absenden kommt hier Feedback! Bitte nicht doppelt absenden. Danke.

    E-Books zum Kurs

    von HTML-Seminar.de

    E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

    Mehr Details

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Fehler melden

Vielen Dank für Ihre Hilfe