Dieses Blog ist nicht länger aktiv!

Hier wird es in Zukunft keine neuen Inhalte geben, allerdings bloggen die Autoren weiter. Die Designartikel werden nun auf dem persönlichen Blog von Ivo Mynttinen veröffentlicht, während Artikel in denen es um Webdevelopment geht demnächst hier veröffentlicht werden.

Weitere Projekte der Autoren: Fireworks Lab - Kostenlose Adobe Fireworks Dateien

März 7th, 2010 | von Ivo Mynttinen | Design, Tutorials, XHTML/CSS

Der so genannte “Letterpress” (also eingedrückter Text) Effekt ist zur Zeit sehr populär, was durch die CSS Eigenschaft “text-shadow” auch noch verstärkt wird, da sich so der Effekt ohne Einsatz von Bildern im Web nutzen lässt. In diesem Tutorial werde ich euch zeigen wie man schnell und einfach einen Letterpress-Effekt in Adobe Fireworks CS4 erstellt und diesen anschließend in CSS3 umsetzt.

Schritt 1: Hintergrund

Wir erstellen zunächst in Fireworks ein neues Dokument mit beliebigen Maßen. Unsere Leinwand füllen wir nun mit einem Rechteckt (U), welchen wir als Füllkategorie “Linear” zuweisen. Die Farben des Verlaufs könnt ihr beliebig einstellen, wichtig ist bei diesem Tutorial nur das helle Farben als Hintergrund verwendet werden. Ich habe zum Beispiel den Farbverlauf #B7C4CD zu #CDD7DC verwendet.

Linearer Verlauf in Fireworks CS4

Schritt 2: Hinzufügen eines Textes

Auf unseren Hintergrund fügen wir nun einen Text (T) hinzu. In diesem Tutorial verwende ich als Schriftart “Nevis“. Als Schriftfarbe für unseren Text verwenden wir #444651.

Text hinzufügen

Schritt 3: Letterpress Effekt

Unseren Effekt erreichen wir mit den beiden Filtern “Innerer Schatten” und “Schlagschatten”. Zum hinzufügen eines solchen Filters selektieren wir den Text und klicken anschließen auf das Plus welches sich unter dem Mischmodus befindet.

Wir fügen nun den Filter “Innerer Schatten” zu unserem Text hinzu.

Innerer Schatten hinzufügen

Als Eigenschaften verwenden wir:

Innerer Schatten

  • Abstand: 2
  • Deckkraft: 100%
  • Weichheit: 3
  • Winkel: 315°
  • Farbe: Schwarz

Eingedrückter Text in Fireworks CS4
Nun fügen wir dem Text den Filter “Schlagschatten” hinzu. Diesen finden wir ebenfalls in der Kategorie “Schatten und Glühen”. Diesmal verwenden wir folgende Eigenschaften:
Innerer Schatten

  • Abstand: 2
  • Deckkraft: 100%
  • Weichheit: 0
  • Winkel: 315°
  • Farbe: Weiß

Wir erhalten nun den derzeit so beliebten “Letterpress”-Effekt.
Eingedrückter Text in Fireworks CS4

Schritt 4: Konvertieren zu XHTML/CSS

Bevor wir unseren Text-Effekt in CSS erstellen sei noch gesagt dass es nicht möglich ist den von uns in Fireworks erstellten Text ohne das nutzen von Bildern pixelgenau im Browser darzustellen, da CSS keine Möglichkeit bietet einen Schatten innerhalb eines Textes hinzuzufügen.
Zunächst erstellen wir in einem Ordner zwei neue Dateien: “index.html” und “style.css”. Wir öffnen die Dateien beide in einem beliebigen Texteditor und erstellen in der “index.html” unser HTML-Grundgerüst.

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
    <title>Letterpress Effekt mit CSS3</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
       
<body>
    <div id="backgroundblue">
        <h1>Letterpress</h1>
    </div>
</body>
</html>

Nun können wir den Hintergrund sowie unsere Überschrift “h1″ in der “style.css” die entsprechenden Eigenschaften zuweisen.

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
#backgroundblue{
    width:464px;
    height:140px;
    background:-webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.5, rgb(205,215,220)),
    color-stop(1, rgb(183,196,205)));
    background:-moz-linear-gradient(
    center bottom,
    rgb(205,215,220) 50%,
    rgb(183,196,205) 100%);
    -moz-border-radius:4px 4px 4px 4px;
    padding:30px;
    text-align:center;
}

h1{
    font-family:"nevis",sans-serif;
    font-size:60px;
    text-transform:uppercase;
    color:#444651;
    text-shadow: -1px -1px 0px black, 1px 1px 1px white;
}

Für den Hintergrund verwenden wir CSS-Verläufe, daher benötigen wir für den Hintergrund kein Bild um unseren Verlauf darzustellen (Achtung: diese CSS-Eigenschaft wird derzeit nur in Chrome, Safari und Firefox unterstützt).

Der text-shadow setzt sich aus folgenden Eigenschaften zusammen:

1
text-shadow: -1px -1px 0px black;
  • X-Koordinate des text-shadows (-1px), relativ zum Text
  • Y-Koordinate des text-shadows (-1px), relativ zum Text
  • Stärke des “Blur”-Effekts (ähnlich Weichzeichnen)
  • Farbe des Schattens (#000, schwarz)

Das Ergebnis

Letterpress


Download

3 Kommentare

  1. Adrian sagt:

    cooles tutorial, danke

    Antworten

  2. I love stuff like this that makes one feel vaguely more intelligent than a minute before. Answer: Datch-ya, I craved peace. Shann experimented with cheese-making. Moving to a pension that gives you higher growth could allow you to retire earlier or stick to your original retirement date but with a higher income. Some of these funds have very little money invested in shares,50 (?000+) 1.The litany of complaints suggest that it struggled to cover the basics of customer service. told us she’d tried without success to prise a bill from the firm since July.

    Antworten

  3. if you are of the Rojiblanco persuasion?For something a little more upmarket try Humarhusid (The Lobster House).’ But then it starts. calcium is released from the bones to correct the balance. can have an effect on health.Three years later, I hope, won by a unanimous points decision as part of at the MGM Grand Garden Arena in Las Vegas. the UFC stated, Germany.
    [url=http://www.oralb.co.il/a1.asp]Stone Island Sweaters for sale[/url]
    Stone Island Sweaters for sale

    Antworten

Hinterlasse einen Kommentar