Inspiration geht manchmal weite Wege. Da können einen ganz alltägliche Dinge auf gute Ideen bringen, die dann doch wieder ganz anders aussehen können. Bei mir sind das manchmal sowohl die Musik als auch die Platten-Cover von Putumayo – DAS Label für Weltmusik. Zu speziellen Themen werden grandiose Musikstücke vorgestellt. Die Platten-Cover sind jeweils eine Augenweide.

Schon lange hatte ich mir vorgenommen, einige der Kunststücke, die Putumayo auf ihre Platten-Cover zaubern, hier vorzustellen. Das Ganze passt zwar nicht direkt in die Sparte Webdesign, aber Inspiration wird durch alle möglichen Impulse erzeugt.

→ Putumayo World Music – Official Site

World Reggae

World Groove

Turkish Groove

Sahara Lounge

Rhythm & Blues

North African Groove

Latin Lounge

Asian Lounge

Arabic Groove

Afro Latin Party

African Groove

African Odyssey

Acoustic Arabia

¡Baila!

Women of Latin America

Relevante Links

• Putumayo World Music – Official Site
• EXIL MUSIK

Retro ist entgegen der Definition absolut zeitgemäß und nicht etwa Kram von gestern. Der Retro-Stil im Webdesign gilt als hip. Jeder Webdesigner weiß, dass besonders die ungerade Formgebung nicht ganz einfach umzusetzen ist und ein Vielfaches an Mehrarbeit bedeutet. Somit lässt sich mit Retro-Design mancher Blumentopf gewinnen. Bei richtiger Form- und Farbgebung ist die Aufmerksamkeit garantiert.

Im Folgenden habe ich mal ein paar Beispiele zusammengestellt, die mir besonders gut gefallen haben. Am Ende des Artikels findet Ihr ein paar nützliche Links zu Tutorials und zahlreichen Ressourcen für das Gestalten eines Retro-Designs.

Radio – The New York Moon

→ Link zur Website

Ready Photo Site

→ Link zur Website

MISTER-AERO

→ Link zur Website

All Star Lanes

→ Link zur Website

TargetScope

→ Link zur Website

Element Fusion

→ Link zur Website

Rockabilly Rules

→ Link zur Website

Blue Moon Dueling Piano Bar

→ Link zur Website

Cottonseed Oil

→ Link zur Website

Lataka

→ Link zur Website

Michela Chiucini

→ Link zur Website

The Trian Woodburns

→ Link zur Website

Sottocosto Ska

→ Link zur Website

Level 2 Design

→ Link zur Website

The Hipstery!

→ Link zur Website

Webdesigner.ro

→ Link zur Website

Thrush Exhaust

→ Link zur Website

Style 4 you

→ Link zur Website

Prahba

→ Link zur Website

Carrozzeria Verga

→ Link zur Website

Tutorials

• 35 tolle Retro Photoshop Tutorials
• 40 Incredibly Inspirational Retro & Vintage Photoshop Tutorials
• 50 Beautiful Retro and Vintage Photoshop Tutorials
• 30 Useful Photoshop Tutorials for Vintage and Retro Style
• 25 Cool Retro Photoshop Tutorials

Photoshop-Pinsel

• 28 of the Coolest Retro Style Photoshop Brush Sets
• 500+ Free Photoshop Retro Brushes
• Retro Photoshop Brushes And Vector Images – Giant Design Pack

Texturen & Hintergrundbilder

• 6 large retro textures 01pack
• 30 Most Incredible Textures for Vintage Style Design
• Retro on WebTreats

Es gibt Designelemente, die man mit voller Hingabe und Pixelperfektion gestaltet, bei denen sich im Laufe eines Projektes jedoch herausstellt, dass sie gar nicht zu demselben passen. Auf der Website 365psd haben diese ausgemusterten Files ein neues Zuhause. Dort wird an jedem Tag im Jahr ein neues, kostenloses aber nicht minderqualitatives PSD zum Herunterladen angeboten.

Das Angebot auf der Seite ist reichhaltig und beinhaltet Icons, Ribbons, Buttons, alle möglichen UI-Elemente, Devices u.v.m. Wer also das Rad nicht ständig neu erfinden möchte, sollte auf 365psd mal vorbeischauen.

→ 365psd – download a free psd every day for a year

An manchen Tagen werden kostenpflichtige Dateien angeboten, die man für ein paar Euronen herunterladen kann. Diese werden im Bereich Premium zusammengefasst.

Sämtliche Dateien sind für die Nutzung in privaten und kommerziellen Projekten freigegeben.

Tag 42

→ Link zum File

Tag 78

→ Link zum File

Tag 139

→ Link zum File

Tag 170

→ Link zum File

Tag 190

→ Link zum File

Tag 183

→ Link zum File

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.

Electric Pulp

→ Link zur Webseite

Mayflower Brewing

→ Link zur Webseite

TapTapTap

→ Link zur Webseite

Kendo

→ Link zur Webseite

The Things we make

→ Link zur Webseite

Freelenz

→ Link zur Webseite

Kuhboom

→ Link zur Webseite

Matthias Schütz

→ Link zur Webseite

2pitch

→ Link zur Webseite

IconDock

→ Link zur Webseite

Tohavit

→ Link zur Webseite

Siebert Surfboards

→ Link zur Webseite

Vige Turf

→ Link zur Webseite

Creative Spaces

→ Link zur Webseite

The Farmer and the Chef

→ Link zur Webseite

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

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

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

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 {
    -moz-box-shadow: 2px 2px 2px 2px #eee;
    -webkit-box-shadow: 2px 2px 2px 2px #eee;
    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

-moz-box-shadow: 2px 2px 2px #666;
-webkit-box-shadow: 2px 2px 2px #666;
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

-moz-box-shadow: 1px 1px 0px #000;
-webkit-box-shadow: 1px 1px 0px #000;
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

-moz-box-shadow: 0px 0px 2px #000;
-webkit-box-shadow: 0px 0px 2px #000;
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

-moz-box-shadow: -5px -5px 5px #ddd;
-webkit-box-shadow: -5px -5px 5px #ddd;
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

-moz-box-shadow: inset 2px 2px 5px #000;
-webkit-box-shadow: inset 2px 2px 5px #000;
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

-moz-box-shadow: inset 0px 0px 10px #fff;
-webkit-box-shadow: inset 0px 0px 10px #fff;
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

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

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

Das CSS dazu

-moz-box-shadow: 0px 0px 2px 2px yellow;
-webkit-box-shadow: 0px 0px 2px 2px yellow;
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

-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;
box-shadow: 8px 8px 8px red, -8px 8px 8px green, 8px -8px 8px blue, -8px -8px 8px yellow;

Dieses Gebilde 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

-moz-box-shadow: 1px 1px 3px #666;
-webkit-box-shadow: 1px 1px 3px #666;
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!