Mit CSS3 und text-shadow tolle Schatten-Effekte erstellen

CSS Text Shadow Generator von Coveloping.com

Mit der CSS3-Eigenschaft text-shadow können Texte ganz einfach mit vielen verschiedenen Schatten-Effekten ausgestattet werden. Die mit Text-Schatten unterlegten Texte sind leicht zu erstellen und ergeben Effekte, die sonst nur mit Grafikprogrammen möglich sind.

text-shadow gehört zu den Stilen aus CSS3, welche von den modernen Browsern ohne Browser-Präfix gerendert werden. Die Eigenschaft gab es schon einmal – und zwar in CSS2. In der darauf folgenden Version CSS 2.1 war der Text-Effekt nicht mehr vertreten und ist schlussendlich in CSS3 wieder zurückgekehrt.

Mit der text-shadow Eigenschaft kann man eine Vielzahl toller Schatteneffekte für den Text sowie für text-decoration festlegen. Mehrere Schatteneffekte können, durch Kommata getrennt, von oben nach unten festgelegt werden. Der erste Schatten liegt oben. Die einfache Syntax erlaubt Effekte wie z.B. »Letterpress« und »Emboss«, aber auch ein leuchtender Text ist mit text-shadow leicht zu realisieren.

Text-Shadow-Generator von Coveloping

Auf der Webseite von Coveloping.com gibt es einen leicht zu bedienenden Online-Generator zur Erstellung von 6 verschiedenen Text-Effekten.

Mit dieser Online-Applikation können Sie die einfachsten Effekte der Syntax von text-shadow austesten. Sie haben die Möglichkeit, den betreffenden Text-Effekt individuell anzupassen (Links- bzw. Rechtsverschiebung, Stärke des Schattens, Farbe des Effektes)

6 Schatten-Effekte für Text mit CSS3 text-shadow

Ich habe die 6 Text-Schatten des Online-Tools von Coveloping.com ein klein wenig abgeändert und möchte Ihnen nachfolgend meine Bearbeitung vorstellen.

Meine Bearbeitung ansehen: 6 Text-Schatten-Effekte

HTML:

<h1 class="text-shadow-preview1">Text Schatten #1</h1>
<h1 class="text-shadow-preview2">Text Schatten #2</h1>
<h1 class="text-shadow-preview3">Text Schatten #3</h1>
<h1 class="text-shadow-preview4">Text Schatten #4</h1>
<h1 class="text-shadow-preview5">Text Schatten #5</h1>
<h1 class="text-shadow-preview6">Text Schatten #6</h1>

CSS-Formatierung:

  
.text-shadow-preview1{
    text-shadow: 2px 4px 3px #999999;
}

 .text-shadow-preview2{
    text-shadow: 6px 6px 0px #ADADAD;
}

.text-shadow-preview3{
    text-shadow: 4px 2px 46px #F1FF26;
}

.text-shadow-preview4{
    text-shadow: -5px 5px 5px #666666;
}

.text-shadow-preview5{
    text-shadow: 8px 8px 0px rgba(255,0,180,0.5);
}

.text-shadow-preview6{
    text-shadow: 0px 0px 10px #333;
}

Meine Bearbeitung ansehen: 6 Text-Schatten-Effekte

Ausführliche Infos zu CSS3 Text-Effekt: Mediaevent.de | Pixeltuner.de

Tweet about this on TwitterShare on Google+1Share on Facebook0Email this to someone

Schreib einen Kommentar

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