Möglichkeiten mit CSS 3 – Text-Shadow, Box-Shadow, Border-Radius und Gradient

Mit Hilfe der Möglichkeiten die einem CSS mittlerweile bietet kann immer öfter auf das verwenden von Bildern und Grafiken verzichtet werden, und das ohne dabei ein schlechteres Design in Kauf nehmen zu müssen.

Im folgenden Artikel werde ich auf einige Möglichkeiten die CSS3 bietet näher eingehen und Beipsiele inklusive dem verwendeten CSS dazu posten. Dieses könnt ihr natürlich nach belieben kopieren und für eure eigenen Projekte verwenden.

Falls das ganze bei euch nicht korrekt dargestellt wird liegt das höchstwahrscheinlich daran, dass ihr keinen aktuellen Browser verwendet. Hier könnt ihr euch die aktuelle Version von Firefox herunterladen.

Text-Shadow
Eigentlich ist alles denkbar einfach. Trotzdem hier eine kurze Erklärung der Verwendung der verschiedenen Werte. Der erste Wert 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 und als letztes wird die Farbe des Schattens definiert.

Verwendetes CSS:

color:#fff;
background:#404040;
text-shadow: 1px 1px 2px #000;

Verwendetes CSS:

color:#505050;
background:#ccc;
text-shadow: 1px 1px 0px #fff;

Verwendetes CSS:

color:#303030;
background:#404040;
text-shadow: -1px -1px 0px #101010, 1px 1px 0px #505050;

Verwendetes CSS:

color:rgba(94, 94, 94, 0);
background:#ccc;
text-shadow: 0 0 5px rgba(50, 50, 50, 0.7);

Verwendetes CSS:

color:#505050;
background:#404040;
text-shadow: 1px 1px 0px #202020, -1px -1px 0px #606060;

Verwendetes CSS:

color:#03c7fc;
background:#404040;
text-shadow: 0px 0px 7px #03c7fc, -1px -1px #000;

Box-Shadow
Wenn ihr euren Div-Boxen einen etwas plastischeren Look verpassen möchtet seid ihr bei Box-Shadow genau richtig. Mit dieser CSS-Eigenschaft lassen sich sowohl der klassische Schlagschatten als auch ein Schatten nach innen oder ein Schein nach außen realisieren.

Verwendetes CSS:

background:#ccc;
box-shadow: 0 0 5px #000;

Verwendetes CSS:

background:#ccc;
box-shadow: 3px 3px 3px #000;

Verwendetes CSS:

background:#ccc;
box-shadow: inset 0 0 5px #000;

Verwendetes CSS:

background:#ccc;
box-shadow: inset 3px 3px 3px #000;

Border-Radius
Keine Lust mehr auf eckige Div-Boxen? Abhilfe schafft die Eigenschaft Border-Radius! Hierbei könnt ihr natürlich alle Ecken einzeln ansteuern und auch mit verschiedenen Radien versehen.

Verwendetes CSS:

background:#ccc;
border-radius: 7px 7px 7px 7px;

Verwendetes CSS:

background:#ccc;
border-radius: 50%;
width:200px:
height:200px;

Gradient
Auch Farbverläufe könnt ihr mittlerweile problemlos ohne Grafiken darstellen. Hier muss die Eigenschaft Gradient verwendet werden. Wenn ihr einen Verlauf mit Transparenz erstellen wollt, verwendet einfach “rgba(0,0,0,0)” anstelle des Farbwertes.

Verwendetes CSS:

background: linear-gradient(top, #f9f9f9, #ccc);

Verwendetes CSS:

background: radial-gradient(center, #fff, #ccc);

Kleine Zusammenfassung
Ich hoffe sehr der ein oder andere kann etwas mit den veröffentlichten Vorlagen anfangen. Ihr könnt das ganze super kombinieren und z.B. für Buttons, Menüs usw. verwenden. Hier deshalb nun noch ein CSS-Button als Beispiel. (Nicht animiert)

Verwendetes CSS:

background: linear-gradient(top, #e6e6e6, #ccc);
text-shadow: 1px 1px 0px #fff;
box-shadow: 0 0 5px #cecece;
border-radius: 5px 5px 5px 5px;
border: 1px solid #fff;
color:#505050;
width:125px;
height:100%;

Übrigens: SEO-technisch sind CSS-Buttons absolut zu empfehlen. Jeder Text, der sich in einem CSS-Button befindet, kann komplett vom Crawler ausgelesen werden und somit auch das Ranking positiv beeinflussen.

Schlagworte border-radius, box-shadow, css box schatten, css farbverlauf, css schalgschatten, css text schatten, css3, css3 gradient, gradient, html, text-shadow, wordpress