Google Design CSS3 (gradient, shadow und border-radius) ohne Grafiken

Vor einiger Zeit habe ich bereits ein Paar Google+ Plus Icons veröffentlicht. Passend dazu möchte ich heute etwas sehr ähnliches vorstellen. Ich persönlich bin bekennender Google Tools User und finde auch die neuen Design-Elemente von Google sehr gelungen. Heute möchte ich euch eine einfache Möglichkeit zeigen, wie man mit Hilfe von CSS bzw. CSS3 schicke Buttons im neuen Google Style erstellt.

In meiner Vorlage, hab ich teilweise CSS3 verwendet um auf unnötige Grafiken zu verzichten. Dabei kamen diverse CSS3 Definitionen zum Einsatz die ich hier kurz erklären möchte.

Zum einen legen wir mit Hilfe von CSS3 abgerundete Ecken fest und den sog. Graniteffekt nutzen wir für den optischen Farbverlauf ohne dabei auf Bilder zurückgreifen zu müssen. Ausserdem nutzen wir „box-shadow“ um den Buttons einen leichten Schlagschatten zu verleihen.

Leider unterstützen noch nicht alle Browser in allen Versionen die von mir verwendeten Angaben zu 100%. Um dir eine Übersicht dazu zu geben, habe ich dies mit in den CSS Bereich notiert.

Hier gehts zur Demo

Beispielsweise:

HTML

<a class="gbutton grau" href="#">Button</a>

CSS

a.gbutton {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	text-decoration:none;
	padding:5px 7px;
	line-height:31px;
	border-width:1px;
	border-style:solid;
	/*CSS3 Kompatibel in Firefox 3.5+, IE 9+, Safari 3.0+, Opera 10.5+, Chrome 4.1+*/
	-moz-border-radius: 2px 2px 2px 2px;
	-webkit-border-radius: 2px 2px 2px 2px;
	border-radius: 2px 2px 2px 2px;
}
a.gbutton.grau{
	color:#444444;
	background-color:#f4f4f4;
	border-color: #dcdcdc;
	/*CSS3 Kompatibel in Firefox 3.5+, Safari 3.0+, Opera 9.5+, Chrome 4.0+*/
	text-shadow:0px 1px 1px #fff;
}
a.gbutton.grau:hover{
	border-color: #c6c6c6;
	/*Für Browser die kein gradient interpretieren können*/
	background:#f4f4f4;
	/*CSS3 für Webkit Browser*/
	background: -webkit-gradient (linear, left top, left bottom, from(#f4f4f4), to(#e4e4e4));
	/*CSS3 für Firefox 3.6+*/
	background: -moz-linear-gradient (top, #f4f4f4, #e4e4e4);
	/*CSS3 für IE*/
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4f4f4', endColorstr='#e4e4e4');
	/*CSS3 Kompatibel in Firefox 3.5+, IE 9+, Safari 3.0+, Opera 10.5+, Chrome 4.0+*/
    -moz-box-shadow: 0 2px 0 #ddd;
	-webkit-box-shadow:0 2px 5px #ddd;
    box-shadow: 0 1px 2px #ddd;
}

Die kleinen schicken Icons stammen übrigens nicht von mir, diese habe ich zur Veranschaulichung reingenommen. Du kannst sie hier kostenfrei runterladen.

Ich habe dir mein Packet mit HTML/CSS und einer kleinen PSD zusammengepackt und zum Download auf den Server geladen. Mich interessiert sehr, was du von CSS3 hältst! Nutzt du diese oder andere CSS3 Techniken bereits oder hältst du noch an CSS2.1 fest?

Ich bin der Meinung das nicht unbedingt jede Seite auf den Pixel genau in allen Browsern gleich aussehen muss. Sicherlich gibt es stellen wo dies notwendig für die korrekte Darstellung ist, aber es gibt auch stellen wo es nicht lebensnotwendig ist.

Viel Spass damit!