Da ich mir gerade neue Strukturen schaffe (dazu in einem späteren Beitrag mehr) und dazu Klienten-Fragebögen erstellen, um eventuelle Projektanfrage effizienter abfeiern zu können, bin ich über diverse CSS3 Hacks und neue Funktionen gestolpert.

Grundsätzlich ändert sich an der bisher bekannten Syntax nichts. Aber es kommen unglaublich coole Features hinzu. Natürlich werden diese nur von fortschriftlichen Browsern unterstützt (Mozilla, Safari, Chrome, etc.). Benutzer des wieder einmal überholten Internet Explorers (ja, auch die neuste Version 8 des IE ist schon wieder OUT OF DATE), bleiben wie immer aussen vor. Mittlerweile ist fast lächerlich wie die Entwickler bei M$ hinter der allgemeinen Entwicklung her hinken. Aber dies sei anderes Thema.

Mit CSS3 werden Schatten für fast jedes Element eingeführt (Text, Div-Layer, Formularelemente, usw.). Und abgerundete Ecken.
Im Moment muss man sich noch einer etwas umständlichen Syntax bedienen um die beiden genannten Features nutzen zu können, da die Unterstützung noch nicht native eingebaut ist und das W3C die endgültige Syntax noch nicht freigegeben hat. Mit der zusätzlichen Deklaration “-moz-” für Mozilla, Firefox, etc. bzw. “-webkit-” für Safari und Chrome vor dem eigentlichen Attribut kann man die neuen Features verwenden.

Ein Beispiel:
CSS:
.layer {
background: #666;
border: 1px solid #555;
color: #fff;
padding: 5px 10px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
}
HTML:
<div class="layer">Lorem ipsum ad qui amet dolore, vitae cetero quaerendum mel ea.</div>

Ergibt:

Und einen Schatten erzeugt man wie folgt:
CSS:
.layer {
background: #666;
border: 1px solid #555;
color: #fff;
padding: 5px 10px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
-webkit-box-shadow: 5px 5px 15px #000;
-moz-box-shadow: 5px 5px 15px #000;
}
HTML:
<div class="layer">Lorem ipsum ad qui amet dolore, vitae cetero quaerendum mel ea.</div>

Ergibt:

Die Schattennummer ist am interessantesten, denn mann kann einen Schatten auch nach innen legen (funktioniert leider seit der neusten Safariaktualisierung nur noch im FF, aber die Safarientwickler wissen um dieses Problem und wollen es schnellstmöglich beheben):
CSS:
.layer {
background: #666;
border: 1px solid #555;
color: #fff;
padding: 5px 10px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
-webkit-box-shadow: inset 0px 0px 15px #000;
-moz-box-shadow: inset 0px 0px 15px #000;
}
HTML:
<div class="layer">Lorem ipsum ad qui amet dolore, vitae cetero quaerendum mel ea.</div>

Ergibt:

Und jetzt das Beste: einen äußeren Schatten kann man mit einem inneren Schatten kombinieren:
CSS:
.layer {
background: #666;
border: 1px solid #555;
color: #fff;
padding: 5px 10px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
-webkit-box-shadow: inset 0px 0px 15px #000, 0px 0px 15px #000;
-moz-box-shadow: inset 0px 0px 15px #000, 0px 0px 15px #000;
}
HTML:
<div class="layer">Lorem ipsum ad qui amet dolore, vitae cetero quaerendum mel ea.</div>

Ergibt:

Eine kleine Einführung in die 3D-Technik in Photoshop kann man auf PSDtuts+ nachlesen. Hier wird in ein paar einfachen Schritten erklärt, wie man eine 3D Weltkugel mit Bergen und Wolken in Photoshop erstellt und sie realistisch wirken lässt.

Ich hab mich mal dran gemacht das Tutorial durchzuarbeiten und möchte hier, die auf PSDtuts+ nicht erhältliche PSD Datei zur Verfügung stellen: Download – CS4-3D-Earth.psd.zip

Viel Spaß beim nachbasteln.

PSD.tuts+ hat jetzt einen Artikel veröffentlicht, in dem 40 Tutorials verlinkt sind, die sich mit Apple Hardware und dem Style beschäftigen. Unter anderem mit dabei sind iPhone, Apple Remote, iMac, MacBook Pro, iPod Touch, iPod Classic, verschiedene Icons, Themes, Stile, Wallpaper und vieles mehr. Aber macht Euch selbst ein Bild: 40 Apple-themed Photoshop Tutorials

Auf der Suche nach einem geeigneten Wallpaper zum Thema Frühling, hab ich mich auf die Seiten von PSDtuts+ verirrt und ein wirklich interessantes Tutorial gefunden. In “Create a Spectacular Grass Text Effect in Photoshop” wird erklärt, wie man aus einem einfachen Foto mit viel Aufwand einen wirklich spektakulären 3D Effekt in Photoshop erzeugt.

Nach dem ich das Tutorial abgearbeitet hatte und einige Schritte darin etwas “freier” interpretiert habe, hatte ich folgendes Ergebnis:
Mein Grastext-Effekt