Viele Webseiten die wir täglich besuchen sind sehr komplex und bestehen aus Unmengen an Seiten und Unterseiten. Jedoch ist es seit längerer Zeit ein Trend Seiten zu gestalten wo sich alles auf einer Seite abspielt. Es wird hier dann mit so genannten “Ankern” durch die Seite navigiert. Hier möchte ich euch heute 15 Stück davon vorstellen. Viel Spaß beim durch klicken!

Alex Arts

Link zur Webseite

Chris Benz

Link zur Webseite

Schneider Garten

Link zur Webseite

Fajne Chlopaki

Link zur Webseite

Fat Man Collective

Link zur Webseite

FS Dsign

Link zur Webseite

Jon Brousseau

Link zur Webseite

Kevin Lucius

Link zur Webseite

Legwork Studio

Link zur Webseite

Liverpool Design Symposium

Link zur Webseite

Orange Label

Link zur Webseite

Sacred June

Link zur Webseite

Tea Round App

Link zur Webseite

Thierry Castel

Link zur Webseite

Yodaa

Link zur Webseite

Es hat mich aufgrund meines Umzugs einige Mühen und Umwege gekostet, aber nun darf ich Euch stolz mein neues Portfolio WordPress Theme deLucide vorstellen, das ich gestern auf ThemeShift.com veröffentlicht habe.

Theme-Features

Mit deLucide lässt sich sehr einfach auf ansprechende Weise jegliche Art von Portfolio darstellen. Neben dem obligatorischen Featured Content Slider hat das Theme außerdem einen jQuery Display Switcher, mit dem der Besucher der Website Artikellisten zwischen einem Listen- und einem Gitter-Layout umschalten kann.

Außerdem kommt deLucide von Haus aus mit einer höchst einfach zu bedienenden Galeriefunktion, mit der man in wenigen Schritten einen netten Showcase erstellen kann.

Natürlich gibt es noch zahlreiche andere Features. So unterstützt das Theme die neuen Features von WordPress 3.0. So kann man mit wenigen Klicks und per Drag&Drop sein eigenes Menü erstellen oder den Look von deLucide mit einem eigenen Hintergrundbild völlig verändern.

Weiteres dazu gibt es auf ThemeShift.com:

• deLucide – Theme Info
• deLucide – Theme Demo

Zu meinem großen Bedauern kann ich dieses Jahr nicht am WordCamp in Berlin teilnehmen. Meine Theme-Schmiede ThemeShift wird jedoch zumindest in Form eines Sponsorenplakates anwesend sein, das Euch zu einem satten Rabatt von 50% auf alle ThemeShift-Themes verhelfen kann.

Das Plakat

Das WordCamp 2010 in Berlin fällt für mich leider wegen eines Umzugs von Teneriffa nach Andalusien aus. Dennoch wollte ich zumindest in Papierform und virtuell an dem Event teilnehmen.

In den Verantstaltungsräumen des Camps wirst Du ein Plakat von ThemeShift finden. Auf jenem Plakat kann man bei genauem Hinsehen einen kurzen Zahlen- & Buchstaben-Code erkennen, den Du Dir notieren solltest.

Der Rabatt

Solltest Du überlegt haben, ein ThemeShift-Theme zu kaufen, es trotz des geringen Preises von 39 € noch auf die Liste Deiner Sparvorhaben gesetzt haben oder solltest Du ThemeShift unwahrscheinlicherweise noch gar nicht kennen, könnte nun ein interessanter Moment sein.

Mit dem Code auf dem Plakat können die ersten 20 WordPresser bei einem Theme-Kauf auf ThemeShift.com → 50% sparen. Ein einzelnes Theme würde somit sagenhafte 19,50 € kosten!

Die Vorgehensweise

Um in den Genuss dieses interessanten Rabatts zu kommen, brauchst Du nur folgende Schritte beachten:

1. ThemeShift-Plakat suchen
2. Rabatt-Code notieren
3. ThemeShift-Theme aussuchen
4. Code beim Kauf eingeben und 50% sparen!
5. Ober-cooler Besitzer einer hippen Website sein

Relevante Links

• ThemeShift.com
• ThemeShift-Themes
• WordCamp Berlin

Für die Handwerker ein Material mit vielen Möglichkeiten. Für Designer oft die erste Wahl. Die Überschrift hat ja schon alles verraten, die Rede ist natürlich von Holz. Es kommt auf vielen Webseiten zum Einsatz und das sieht meistens auch noch sehr schön aus. Es schafft so eine schöne Atmosphäre wie ich finde. Aber schaut am besten selbst.

Andrew Bradshaw

Link zur Webseite

Bell 2 Lodge

Link zur Webseite

Formrausch

Link zur Webseite

Foxie

Link zur Webseite

Level 9 Design

Link zur Webseite

Marchand de Trucs

Link zur Webseite

Mayflower Brewing

Link zur Webseite

Perfect Order

Link zur Webseite

Quality xHTML

Link zur Webseite

Slabovia

Link zur Webseite

Van der Vaart

Link zur Webseite

Vanilla Splits

Link zur Webseite

Weblounge

Link zur Webseite

Wrap Rage Cure

Link zur Webseite

Your Church

Link zur Webseite

Ein weiteres Mal war es Zeit für eine kleine Überarbeitung der Website von ThemeShift. Ein frischeres Aussehen, bessere Strukturierung der Theme-Präsentationen und des Blog-Bereichs und das Einrichten eines Showcase sind dabei die wichtigsten Veränderungen.

1. Theme-Präsentation

Die Features-Liste auf den Theme-Seiten habe ich etwas reorganisiert und außerdem eine Sidebar mit den wichtigesten Informationen zum Theme hinzugefügt.

2. Blog-Bereich

Auch der Blog-Bereich ist überarbeitet und, meines Erachtens, nun besser aufgestellt und nicht so starr wie der vorherige. In Zukunft werden dort neben ThemeShift-relevanten Artikel auch allgemeine Dinge zu WordPress zu lesen sein.

3. Showcase

Ein weiterer echter Gewinn, wie ich finde, ist der Theme-Showcase, in dem Nutzer die Version ihres ThemeShift-Themes vorstellen können. Nicht- oder angehenden Kunden gibt es einen kleinen Überblick, was mit meinen Themes möglich ist.

Relevante Links

• ThemeShift Theme-Präsentation
• ThemeShift Blog-Bereich
• ThemeShift Theme-Showcase

Illustrationen sind oft Bestandteil einer Webseite. Oft kommen hier Landschaften zum Einsatz oder eine Karikatur der Seitenbetreiber. Meiner Meinung nach hübschen Sie eine Seite fast immer auf und lassen die Seite freundlich wirken.

Kitfolio

Link zur Webseite

Boagworld

Link zur Webseite

also known as

Link zur Webseite

Answer Jam

Link zur Webseite

DivVoted

Link zur Webseite

Miki Mottes

Link zur Webseite

Marchand de Trucs

Link zur Webseite

Krolikov

Link zur Webseite

Volll

Link zur Webseite

Studio E-Space

Link zur Webseite

unlimited Orange

Link zur Webseite

Stoodeo

Link zur Webseite

YoDiv

Link zur Webseite

Meomi

Link zur Webseite

Adit Shukla

Link zur Webseite

WordPress ist schon von Haus aus gut dafür eingestellt, von Suchmaschinen gefunden zu werden. Das Standard Theme sowie die meisten kostenlosen Templates, besteht aus sauberen, gut für Maschinen lesbaren Code. Durch wenige Handgriffe im Theme, kannst Du Deinen Blog optimal für Suchmaschinen einrichten.

Den Title-Tag optimieren

Der Title-Tag, in der header.php, ist für die Suchmaschinenoptimierung einer der wichtigsten Faktoren. Es ist der Name des Dokuments und das erste was die Suchmaschine von deiner Seite lernt, hier sollten die Wörter stehen für die Du gefunden werden willst. Der Title im WordPress Default Theme war eine lange Zeit nicht wirklich optimal eingestellt, was jetzt aber behoben wurde und auch insbesondere im neuen Standard Theme Twenty Ten sehr schön gelöst ist.

Der Name deines Artikels sollte im Title-Tag vor dem Namen deines Blogs stehen, da Suchmaschinen den ersten Worte des Titels mehr Bedeutung schenken und es so auch für den Suchenden leichter zu erkennen ist, worum es auf deiner Seite geht. Sollte das in Eurem Theme noch nicht so sein, schlage ich vor es wie im derzeitigen Default Theme zu machen.

<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>

Wer möchte kann sich seinen Title-Tag aber auch noch differenzierter gestalten, je nach dem in welchem Bereich Deiner Webseite der Besucher sich gerade befindet. Startseite, Kategorien, Archive und beispielsweise die Suchresultate können verschieden angepasste Title-Tags besitzen:

<title><?php
if(is_single() || is_page()) {
  single_post_title(); echo ' | '; bloginfo( 'name' );
} else {

if(is_category() || is_archive()) {
  wp_title(''); echo ' auf '; bloginfo( 'name' );
} else {

if(is_front_page() || is_home()) {
  bloginfo('name'); echo ' | '; bloginfo( 'description' );
} else {

  wp_title(''); echo ' | by creative! ';

} } } ?></title>

Meta-Tags: Keywords & Description

Ebenfalls im Kopf eines HTML Dokuments befinden sich die Meta-Keywords und die Meta-Description. Diese waren früher sehr gut dafür geeignet, bessere Positionen bei den Suchmaschinen zu erlangen. Nachdem diese Methode allerdings, vor über 10 Jahren schon, ausgenutzt wurde, haben beide im Grunde überhaupt keinen Einfluss mehr auf Eure Rankings.

Dennoch sucht Google beispielsweise in eurer Meta-Description, um eine kleine Beschreibung für die Suchresultate zu generieren, findet Google dort nichts, wird meist eine relevante Stelle aus dem normalen Text gewählt. Wollt Ihr diese Elemente ohne Plugins direkt kontrollieren, könnt Ihr die WordPress Tags und das Feld Auszug (Excerpt) benutzen um diese Daten für jede Unterseite einzutragen und im Quellcode wieder auszugeben:

<?php if(is_home()) : ?>
 <meta name="description" content=" <?php bloginfo( 'description' ); ?> ">
<?php else : ?>
 <meta name="description" content=" <?php the_excerpt_rss(); ?> ">
<?php endif; ?>

<meta name="keywords" content="<?php
$posttags = get_the_tags();
if ($posttags) {
foreach($posttags as $tag) {
echo $tag->name . ' ';
}
}
?>">

Das ist eine der simpelste Möglichkeit, Tags und Description dynamisch im Template auszugeben. Auf der Frontpage wird die Blog Description verwendet und auf den Unterseiten die spezifische Beschreibung aus dem Excerpt-Feld. Dieser Eintrag muss, wie der Title in die header.php in den Head Bereich des Dokuments. Die kurze Beschreibung sollte nicht mehr als etwa 160 Zeichen haben, da sie sonst nichts in das kleine Feld unter den Suchresultaten bei Google passt.

URL-Struktur umschreiben

Die von WordPress erzeugten URLs haben normalerweise diese Form: domain.com/?p=126, können aber mittels mod_rewrite beliebig verändert werden. Dazu geht Ihr, im Admin Menü, auf den Bereich Einstellungen, auf die Seite Permalinks und wählt dort die gewünschte URL-Struktur aus. Ich persönlich wähle meist die möglichst einfachste Form aus, in dem ich im Feld Benutzerdefinierte Struktur nur /%postname%/ eingebe, was eine URLs in dieser Form erzeugt: domain.com/artikelname/.

Damit die Änderungen wirksam werden brauchst du die sogenannte .htaccess Datei, die man in der Regel selbst erstellen und hochladen muss. Du nimmst einen einfachen Text bzw. HTML Editor und erstellst eine leere Datei mit dem Namen .htaccess ohne Dateiendung. Auf der Permalink Seite schlägt WordPress Dir den Code für diese Datei vor, den du einfach in deine leere Datei kopierst, abspeicherst und ins WordPress Hauptverzeichnis hochlädst. Hast du das gemacht, kannst du die Änderungen aus dem Permalink Menü übernehmen und gleich schon betrachten. Links auf alte URLs werden von WordPress automatisch weitergeleitet, es gehen keine Besucher oder Google Pagerank verloren.

Semantisch korrekte Überschriften

Suchmaschinen mögen es wenn die HTML Überschriften sinngemäß verwendet werden. In einer vernünftigen Struktur würde die H1 als Überschrift, ganz oben, für den Blog Namen verwendet werden. Die H2 Als Artikel Überschrift, bei gleichbleibender H1 und die H3-H6 als Unterüberschriften, unter der H2 im Text. Google scheint insbesondere H2 und H3 Überschriften zu verwenden, um den Sinn einer Seite zu verstehen.

Viele Theme Designer benutzen beispielsweise aber auch H3 Überschriften in der Sidebar, in denen dann bloß so etwas wie ‘Kategorien’ oder ‘Die neusten Artikel’ steht, anstatt zum Text relevante Wörter. Daher empfehle ich Überschriften nur im Content zu verwenden. Mit CSS können die Titel in der Sidebar auch ohne HTML H1-H6 Überschriften auf die gleiche Größe gebracht werden:

Kategorien

Auch andere, für den Inhalt des Textes, unrelevante HTML Überschriften, wie beispielsweise ‘Einen Kommantar schreiben’ in der comment.php, sollten mit dieser Methode angepasst werden.

Duplicate Content vermeiden

Duplicate Content bedeutet, das ein Inhalt auf einer Webseite unter verschiedenen URLs erreichbar ist. Wenn man auf der Frontpage beispielsweise, ganze Artikel anzeigt, ohne sie durch den more-tag zu kürzen, ist der Inhalt schon doppelt erreichbar, nämlich auf der Artikel URL selbst und auf der Frontpage. Gleichzeitig aber wahrscheinlich auch in allen angegebenen Kategorien, Tags und entsprechenden Unterseiten.

Wenn Google jetzt Deinen Inhalt, zu einer passenden Suchphrase, anzeigen möchte, muss es sich zwischen einer dieser Unterseiten entscheiden. Oft landet der Google Sucher dann auf einer Tag oder Kategorien Seite, wo der passende Beitrag zwischen 10 oder 20 anderen irgendwo versteckt ist, anstatt auf dem Artikel selbst.

Es hilft seine Blogartikel mit dem more-tag beim schreiben sinngemäß zu kürzen, noch effektiver ist es allerdings den Suchmaschinen gleich zu verbieten Kategorien und Tags überhaupt in den Index mit aufzunehmen. So steht der einzelne Artikel nicht mehr in Konkurrenz zu seinen eigenen Duplikaten. Mittels spezieller Anweisungen für die Suchmaschinen Roboter lässt sich das sehr einfach in ein WordPress Theme integrieren:

<?php if(is_category() || is_search() || is_archive() || is_tag()) : ?>
<meta name="robots" content="noindex, follow">
<?php else : ?>
<meta name="robots" content="index, follow">
<?php endif; ?>

Auch dieser Code wird in den Head Bereich eingetragen. Wenn es sich um eine Kategorie, Suchergebnis, Archiv oder Tag-Seite handelt wird noindex, follow ausgegeben. Das bedeutet diese Seite soll nicht in den Suchmaschinenindex gelangen, dennoch aber angesehen, alle Links verfolgt und Linkstärke weitergegeben werden. Alles andere wird wir immer behandelt index, follow ist quasi die Grundeinstellung.

Onpage und Offpage SEO

Mit diesen simplen Veränderungen ist im Grunde jedes WordPress Theme gut ausgestattet und grundlegend konfiguriert um von Suchmaschinen gut gefunden, verstanden und bewertet zu werden. Komplexere Probleme mit Suchmaschinen tauchen erst auf wenn Webseiten es mit hunderten und tausenden verschiedener Inhalten zu tun haben. Für den normalen WordPress Blog reicht das alles hier aus, um mit jeder anderen Seite in den Google Suchergebnissen konkurrieren zu können.

Alles was man auf der eigenen Seite erledigen kann, wird Onpage SEO genannt. Hat Google es bei einer Suchanfrage mit zwei Seiten zu tun, die im Onpage Bereich gleich gut optimiert worden sind und deren Inhalte vielversprechend ausschauen, gewinnt allerdings die Seite, der Google bereits mehr vertraut, was von der Vernetzung im Web abhängig ist. Diese externen Faktoren zu beeinflussen wir Offpage SEO genannt, ist nicht CMS spezifisch und sprengt hier leider den Rahmen. Grundlegend kann man aber sagen, das Du qualitativ hochwertige Links zu deiner Webseite brauchst, um von den Suchmaschinen ernst genommen zu werden. Und der Schlüssel zu guten Links, ist gute Inhalte zu schreiben.

Der Sommer und die WM stehen vor der Tür. Der geneigte Biertrinker kommt also nicht umhin sich umfassend vorzubereiten und die geeignete blonde Begleitung nach bestem Wissen und Gewissen auszuwählen. Hier stelle ich meine Top 10 der Websites deutscher Bierbrauereien vor. Ob die diese ein Auswahlkriterium sind, mag jeder selbst eintscheiden.

1. Beck’s

zur Website

2. Warsteiner

zur Website

3. Berliner Kindl

zur Website

4. Radeberger Pilsner

zur Website

5. Bitburger

zur Website

6. Flensburger

zur Website

7. Jever

zur Website

8. Diebels

zur Website

9. Löwenbräu

zur Website

10. Paulaner

zur Website

Fazit

Wie gesagt, ob man die Website einer Brauerei als Kriterium für den Genuss einer bestimmten Marke heranzieht, muss jeder selbst mit seinen Geschmacksnerven ausmachen.

Da ich nun schon viele Jahre in Spanien lebe und eher Marken wie San Miguel, Dorada und Cruzcampo zu Gesicht bekomme, kann es sein, dass ich ein wenig den Überblick verloren habe. Sollte ich also eine richtig schicke Website übersehen habe, freue ich mich auf weitere Vorschläge.

CSS3 wird ein Segen für Webdesigner und vor allem -entwickler. Mit der CSS-Eigenschaft box-shadow lassen sich ohne jede Grafik Schatten um Block-Level-Elemente werfen. Wer jedoch gleiche Darstellung in alles Browsern anstrebt, sollte box-shadow mit Vorsicht genießen. Hier ein paar Experimente.

CSS-Eigenschaft box-shadow

Neben dem bereits vorgestellten text-shadow gibt es auch einen CSS-Befehl der uns Schatten um Block-Level-Elemente (z. B. div) werfen lässt. Die CSS3-Eigenschaft box-shadow.

Ich sag’s am besten gleich. Der IE spielt hier nicht mit! In einem gewissen Rahmen lässt auch dieser sich den Boxschatten aufzwingen, jedoch wird dieser weitaus weniger schön gerendert.

Aber auch die Webkit-Fraktion (Safari/Chrome) und der Firefox spielen nur mit den Prefixen -webkit bzw. -moz mit. Wer also auf CSS-valides Entwickeln pocht, kann das Weiterlesen ab sofort einstellen.

Sprungmarken

• Die Schreibweise
• Beispiele einfacher Boxschatten
• Beispiele innerer Boxschatten
• Beispiele für Boxschatten mit Radius
• Beispiele mehrfacher Boxschatten
• box-shadow im IE (Internet Explorer)

Die Schreibweise

.shadow {
    box-shadow: 2px 2px 2px 2px #eee;
    -moz-box-shadow: 2px 2px 2px 2px #eee;
    -webkit-box-shadow: 2px 2px 2px 2px #eee;
    /* Versatz links - Versatz oben - Unschärfe - Schattenradius - Farbe */
}

Bemerkung:
Der erste Wert von box-shadow gibt den Versatz des Schattens von links an, der zweite die Verrückung nach unten, der dritte Wert den Grad der Unschärfe des Schattens, der optionale vierte Wert bestimmt den Schattenradius und die letzte Angabe ist der Hex-Code der gewünschten Farbe des Schattens.

Beispiele einfacher Boxschatten

Mit box-shadow lassen sich ohne jegliche Grafiken verblüffende Effekte erzeugen.

Das CSS dazu

box-shadow: 2px 2px 2px #666;
-moz-box-shadow: 2px 2px 2px #666;
-webkit-box-shadow: 2px 2px 2px #666;

Allein diese Parameter versprechen schon eine unheimliche Vielfalt, um Block-Elemente in unseren Webdesigns plastischer erscheinen zu lassen.

Das CSS dazu

box-shadow: 1px 1px 0px #000;
-moz-box-shadow: 1px 1px 0px #000;
-webkit-box-shadow: 1px 1px 0px #000;

Auch wenn es hier noch rudimentär erscheint. Mit dem Spiel der Offsets (Versätze), dem Blur (Unschärfe) und der Farbe lässt sich sehr leicht Perspektive erzeugen.

Das CSS dazu

box-shadow: 0px 0px 2px #000;
-moz-box-shadow: 0px 0px 2px #000;
-webkit-box-shadow: 0px 0px 2px #000;
border: 1px solid #fff;

In Kombination mit dem normalen border lassen sich perspektivisch ausgefeiltere Ergebnisse erzielen.

Das CSS dazu

box-shadow: -5px -5px 5px #ddd;
-moz-box-shadow: -5px -5px 5px #ddd;
-webkit-box-shadow: -5px -5px 5px #ddd;

Negativer Versatz ist ebenfalls möglich. Damit können wir die Lichtquelle und somit den Schatten beliebig steuern.

Beispiele innerer Boxschatten

Die CSS-Eigenschaft box-shadow hat einen weiteren interessanten Parameter. Mit der Angabe inset können Boxschatten auch nach innen dargestellt werden.

Das CSS dazu

box-shadow: inset 2px 2px 5px #000;
-moz-box-shadow: inset 2px 2px 5px #000;
-webkit-box-shadow: inset 2px 2px 5px #000;

Der innere Boxschatten lässt Elemente perspektivisch nach hinten setzen. Die Box erscheint somit wie eingestanzt.

Das CSS dazu

box-shadow: inset 0px 0px 10px #fff;
-moz-box-shadow: inset 0px 0px 10px #fff;
-webkit-box-shadow: inset 0px 0px 10px #fff;

Wenn man der Versatz des box-shadow auf 0 setzt, wird der Schatten gleichmäßig um das Element gelegt. Das gilt auch für den äußeren Schatten.

Beispiele für Boxschatten mit Radius

Ein vierter Parameter von box-shadow lässt uns den Schattenradius gesondert festlegen. Wie in diesen Beispielen zu sehen, verwende ich einen border-radius von 5px. Der Schattenradius kann ein anderer sein.

Das CSS dazu

box-shadow: 5px 5px 10px 10px #000fff;
-moz-box-shadow: 5px 5px 10px 10px #000fff;
-webkit-box-shadow: 5px 5px 10px 10px #000fff;

Mit dem vierten Parameter lässt sich der Schattenradius erhöhen.

Das CSS dazu

box-shadow: 0px 0px 2px 2px yellow;
-moz-box-shadow: 0px 0px 2px 2px yellow;
-webkit-box-shadow: 0px 0px 2px 2px yellow;

Auch ein kleinerer Schattenradius lässt sich einstellen.

Beispiele mehrfacher Boxschatten

Die Möglichkeit wie auch bei text-shadow mehrere Schatten zu kombinieren habe ich bei Peter Kröner entdecken können. In seinem Beispiel kombiniert er vier verschiedenfarbige Boxschatten auf einmal.

Das CSS dazu

box-shadow: 8px 8px 8px red, -8px 8px 8px green, 8px -8px 8px blue, -8px -8px 8px yellow;
-moz-box-shadow: 8px 8px 8px red, -8px 8px 8px green, 8px -8px 8px blue, -8px -8px 8px yellow;
-webkit-box-shadow: 8px 8px 8px red, -8px 8px 8px green, 8px -8px 8px blue, -8px -8px 8px yellow;

Dieses Gebild ist grafisch sicher optimierbar, bildet aber hervorragend die Möglichkeiten von box-shadow ab.

box-shadow im IE (Internet Explorer)

Mit dem shadow filter lassen sich, wenn auch wesentlich eingeschränkter, Boxschatten im Internet Explorer darstellen. Unseren Boxschatten könnten wir wie folgt erweitern:

Das CSS dazu

box-shadow: 1px 1px 3px #666;
-moz-box-shadow: 1px 1px 3px #666;
-webkit-box-shadow: 1px 1px 3px #666;
filter:progid:DXImageTransform.Microsoft.Shadow(strength=3,color=#666666,direction=135);

Hier die Ansicht im IE

Das ist nicht sonderlich schön und noch weniger valide, aber manchem mag es zumindest eine kleine Erleichterung sein und besseres ist der gemeine IE-Nutzer eh nicht gewöhnt.

Fazit

Wie bereits in der Einleitung gesagt, mit der CSS-Eigenschaft box-shadow sollte man, wenn einem Browserkompatibilität am Herzen liegt, vorsichtig umgehen. Aber gerade mit der Lösung für den IE finde ich den zurückhaltenen Einsatz des Boxschattens durchaus okay.

Relevante Links

• W3C über box-shadow
• Mozilla über -moz-box-shadow
• Webkit über -webkit-box-shadow
• Microsoft über Shadow Filter
• Schönes neues CSS: box-shadow – Peter Kröner
• CSS Box Shadow – CSS-Tricks

Mit CSS3 sollte sich jeder Webdesigner ernsthaft auseinandersetzen, da die Möglickeiten von CSS3 oft verblüffend sind. Dieser Artikel versucht einen Überblick darüber zu vermitteln, was man alles mit CSS3 anstellen kann.

Image Slider

Link zu deluxeblogtipps.com

Es gibt bereits viele gute JavaScript Image Slider. Mit CSS3 gibt es jetzt auch die Möglichkeit, einen Imageslider nur mit CSS und ganz ohne JavaScript zu erstellen. Eine ausführliche Anleitung mit Live-Demo und dem Quelltext als Zip-Datei findet man bei Rilwis (Tran Ngoc Tuan Anh).

CSS Text Gradient

Link zu nicewebtype.com

Auch Farbverläufe von Texten kann man nun mit CSS3 darstellen, ohne extra eine mit Photoshop erstellte Grafik einbinden zu müssen. Tim Brown erklärt sehr genau in seinem Artikel, wie man mit CSS3 Farbverläufe für Schriften erstellen kann.

CSS Shapes

Link zu net.tutsplus.com

Formen kann man mit geschicktem Einsatz von CSS3 sehr einfach gestalten. Eine verblüffend einfache Anleitung zur Erstellung von CSS Formen mit Video, Live Demo und der Quelldateien als im Zip-Format wurde von Nettuts Editor Jeffrey Way erstellt.

CSS Menüs und Buttons

Link zu webdesignerwall.com

Buttons kann man auch sehr einfach mit CSS3 erstellen. Eine gute Anleitung und die Live Demo gibt es bei Nick La. Eine ansprechend gestaltete und gute Übersicht über verschiedene CSS Eigenschaften hat Louis Lazaris erstellt. Die Live Demo sollte man sich unbedingt ansehen.

Wer noch mehr über verschiedene CSS Menüs und Buttons erfahren möchte, dem empfehle ich die Übersicht mit 12 CSS Button und Menü Techniken von Henry Jones.

CSS Teaserboxen mit Farbverlauf

Link zu blog.marit.ag

Wie man mit CSS3 Hintergrundverläufe für Teaser Boxen erstellt, kann man von Sven in seinem gut geschriebenen deutschsprachigen Artikel erfahren.

CSS3 und Email Clients

Link zu net.tutplus.com

Ob es bereits sinnvoll ist, CSS3 für den Versand von Emails einzusetzen, muss jeder für sich selbst entscheiden. Eine gute Einführung zum Thema mit einer praktischen Anleitung hat von Ros Hodgekiss bei net.tutplus.com veröffentlicht.

CSS3 Animationen als Flash Ersatz?

Link zu richardleggett.co.uk

JavaScript und CSS3 könnnen eventuell bald eine Alternative für manche Flash Animationen werden. Bisher erreichen die CSS3 Annimationen aus meiner Sicht noch nicht die Qualität, die man mit Flash erreichen kann. Allerdings stellen sie bereits für die Suchmaschinenoptimierung eine interessante Alternative dar. Es bleibt abzuwarten, welche Animationen bald mit CSS3 zu sehen sind. Drei erste Beispiele habe ich bei Richard Leggett, Florian Batschi [Demo], und Marco Kuiper [Demo] gefunden.

Text beschneiden oder Wörter umbrechen mit CSS3

Link zu hyperkontext.at

Einen Text beschneiden oder Wörter umbrechen kann man mit den CSS3 Eigenschaften text-overflow und word-wrap. Wie man das genau anstellt, kann man in der deutschsprachigen Erklärung bei hyperkontext.at nachlesen.

12 Kostenlose HTML5-CSS3 Templates

Link zu devsnippets.com

Eine sehr gute Übersicht zu 12 eleganten und kostenlosen HTML5-CSS3 Templates kann man bei devsnippets.com finden. Dort sind einige sehr spannende Beispiele enthalten, die einen inspirieren können.

Fazit

Mit CSS3 gibt es einige neue Möglichkeiten zu entdecken. Noch unterstützen nicht alle Browser CSS3 vollständig. Allerdings lohnt es sich aus meiner Sicht sehr, sich bereits jetzt mit den neuen Möglichkeiten von CSS3 auseinanderzusetzen. Viel Spass beim Testen!