CSS3 als Photoshop Ersatz? Buttons und Grafiken.

css3-poker-cards-and-buttons

CSS3 ist zurecht in aller Munde und ich habe bereits vor einiger Zeit die neuen Möglichkeiten von CSS3 aufgegriffen. In letzter Zeit haben sich jedoch die allgemeinen Blog-Posts zum Thema CSS3 Buttons vermehrt weshalb ich mich noch einmal ausführlicher mit diesem Thema auseinander gesetzt habe. Es ging mir in erster Linie darum zu testen was mit simplem CSS3 möglich ist. Sauberer oder gar semantischer Quellcode standen in diesem Test ausnahmsweise mal im Hintergrund. Es ging mir in erster Linie darum auszuprobieren was mit CSS3 heute schon möglich ist.
Die Ergebnisse meines Experimentes möchte ich Euch natürlich nicht vorenthalten.

Web Design mit Sass

Eine Einführung in moderne Stylesheets.

In unserem Shop kaufen
ePub, Mobi + PDF

Bei Amazon kaufen
Kindle-Version

Vorüberlegung

Der Sinn des ganzen Experimentes war es herauszufinden in wie fern CSS3 das Design-Tool Photoshop ablöst und somit den alltäglichen Workflow beschleunigt.
Ein Button-Set in Photoshop zu gestalten, als Sprite abzuspeichern und anschließend auch noch mit CSS zu anzupassen dauert in jedem Fall länger als den Button einmalig mit CSS3 zu gestalten und später mit beliebigen Texten zu füllen. Bei den nachfolgenden Beispielen habe ich mir berühmte Button-Stile herausgesucht und versucht diese mit CSS3 nachzubilden.

Alle Beispiele in diesem Artikel sind ausschließlich für die Webkit-Browser Safari und Chrome enstanden. Da die Webkit-Engine angesprochen wird ist der CSS-Code nach der 3.0 Spezifikation nicht valide.

Demo-Website anschauen

CSS3 Aqua Button

Der Aqua-Button ist einer der berühmtesten Button-Design-Stile überhaupt. Der Aqua-Style wird von Apple innerhalb des Betriebssystems eingesetzt und zeichnet sich durch seine extrem plastische, transparente und hoch glänzende Erscheinung aus. Mit pure CSS3 sieht der Button folgendermaßen aus:

CSS3 Aqua Button

HTML-Code:

<a href="#" class="aqua-button">
	<span class="shine"></span>
	<span class="glow"></span>
	CSS3 Aqua Button
</a>

CSS-Code:

.aqua-button {
	background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#529DFF), to(#376CBF));
	display:block;
	height:21px;
	width:160px;
	-webkit-border-radius:14px;
	font-size:13px;
	color:white;
	text-decoration:none;
	border:1px solid #2a62ab;
	position:relative;
	padding:6px 1px 1px 1px;
	text-align:center;
	text-shadow:1px 1px 1px #000;
	font-weight:bold;
	-webkit-box-shadow:0px 1px 2px #999;
}
.aqua-button span.shine {
	position:absolute;
	height:20px;
	width:156px;
	-webkit-border-radius:14px;
	margin:-5px 0 0 2px;
	background-image: -webkit-gradient(linear, 0% 0%, 0% 50%, from(rgba(132, 213, 255, 0.8)), to(rgba(132, 213, 255, 0.0)));
	border-top:1px solid #b5e1ff;
}
.aqua-button span.glow {
	position:absolute;
	height:10px;
	width:150px;
	margin:10px 0 0 5px;
	-webkit-border-radius:15px;
	background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(198, 242, 255, 0.0)), to(rgba(105, 172, 232, 1.0)));
	border-bottom:1px solid #85c0f6;
}

CSS3 Moderner Button

Der folgende Button ist nicht sonderlich spektakulär, findet sich aber auf aufgrund seiner vielseitig einsetzbaren und modernen Erscheinung auf einer Unzahl von Websites wieder.

CSS3 Modern Button

HTML-Code:

<a href="#" class="modern-button">
	CSS3 Modern Button <span class="icon">&rsaquo;</span>
</a>

CSS-Code:

.modern-button {
	-webkit-border-radius:7px;
	font-size:13px;
	color:#291919;
	font-weight:bold;
	text-decoration:none;
	background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f34f23), to(#cf0014));
	padding:10px 20px 7px 20px;
	-webkit-box-shadow:0px 1px 2px #999;
	text-shadow:0px 1px 0px #fe6c6c;
	border-bottom:1px solid #78000c;
}
.modern-button .icon {
	-webkit-border-radius:100px;
	font-size:15px;
	margin:0 -10px 0 10px;
	color:#291919;
	font-weight:bold;
	text-decoration:none;
	background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#cf0014), to(#f34f23));
	padding:2px 9px;
	text-shadow:0px 1px 0px #fe6c6c;
	border-top:1px solid #b30410;
	border-bottom:1px solid #f96d48;
}

CSS3 Aero Button

Der Aero-Button ist das typische Merkmal der Windows Vista Serie. Typische Merkmale sind der untere Glow, der gläserne Look und der starke Glanz von oben.

CSS3 Aero Button

HTML-Code:

<span class="offset">
	<span class="outline">
		<a href="#" class="aero-button">CSS3 Aero-Button</a>
	</span>
</span>

CSS-Code:

.aero-button {
	background-image:-webkit-gradient(linear, 0% 52%, 0% 96%, from(#354D57), to(#127A85), color-stop(0, #042531));
	padding:10px 20px 7px 20px;
	color:white;
	text-decoration:none;
	-webkit-border-radius:3px;
	border-top:1px solid #616a72;
	border-right: 1px solid #627179;
	border-left: 1px solid #627179;
	border-bottom:1px solid #6db1b8;
	outline-offset:1px solid white;
	text-shadow:1px 1px 1px #000;
	font-size:13px;
	-webkit-box-shadow:0px 0px 2px white;
	float:left;
}
span.outline {
	border:1px solid #191919;
	float:left;
	-webkit-border-radius:4px;
	padding:1px;
}
span.offset {
	border:1px solid #414141;
	float:left;
	-webkit-border-radius:8px;
	padding:1px;
}

CSS3 Poker Cards

Mein letztes Experiment ist etwas weniger praxistauglich als die oben erwähnten Buttons. Bei den Spielkarten wollte ich einfach nur ausprobieren was möglich ist. Die Kartenbeschriftungen sind ganz gewöhnliche HTML-Entities. Mit der CSS3-Eigenschaft rotate und negativem margin wurden die Karten gedreht und übereinander positioniert.

CSS3 Poker Cards

HTML-Code:

<a href="#" class="card hearts">
	<span>&hearts;</span>
	<sub class="topleft">A</sub>
	<sub class="topright">A</sub>
	<sub class="bottomright">A</sub>
	<sub class="bottomleft">A</sub>
</a>
<a href="#" class="card spades">
	<span>&spades;</span>
	<sub class="topleft">A</sub>
	<sub class="topright">A</sub>
	<sub class="bottomright">A</sub>
	<sub class="bottomleft">A</sub>
</a>
<a href="#" class="card diams">
	<span>&diams;</span>
	<sub class="topleft">A</sub>
	<sub class="topright">A</sub>
	<sub class="bottomright">A</sub>
	<sub class="bottomleft">A</sub>
</a>
<a href="#" class="card clubs">
	<span>&clubs;</span>
	<sub class="topleft">A</sub>
	<sub class="topright">A</sub>
	<sub class="bottomright">A</sub>
	<sub class="bottomleft">A</sub>
</a>

CSS-Code:

.card {
	font-size:70px;
	text-decoration:none;
	background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f3f3f3), to(#dedede));
	padding:10px;
	-webkit-border-radius:5px;
	-webkit-box-shadow:0px 1px 3px #000;
	position:relative;
	float:left;
	margin:0 15px 0 0;
	border-top:1px solid white;
}

.card sub {
	font-size:10px;
	position:absolute;
	-webkit-border-radius:100px;
	text-shadow:none;
}

.topleft {
	top:0;
	left:4px;
}

.topright {
	top:0;
	right:4px;
}

.bottomright {
	bottom:0;
	right:4px;
}

.bottomleft {
	bottom:0;
	left:4px;
}

.hearts {
	color:red;
	text-shadow:0px -1px 1px #740003;
	-webkit-transform: rotate(-15deg);
}

.hearts span {
	padding:0 10px;
	background:white;
	-webkit-border-radius:5px;
}

.spades {
	color:#333;
	text-shadow:0px -1px 1px #000;
	-webkit-transform: rotate(-7deg);
	margin:0 0 0 -40px;
}

.spades span {
	padding:0 12px;
	background:white;
	-webkit-border-radius:5px;
}

.diams {
	color:red;
	text-shadow:0px -1px 1px #740003;
	-webkit-transform: rotate(7deg);
	margin:-20px 0 0 -40px;
}

.diams span {
	padding:0 12px;
	background:white;
	-webkit-border-radius:5px;
}

.clubs {
	color:#333;
	text-shadow:0px -1px 1px #000;
	-webkit-transform: rotate(15deg);
	margin:20px 0 0 -45px;
}

.clubs span {
	padding:0 8px;
	background:white;
	-webkit-border-radius:5px;
}

CSS3 in der Praxis?

Nutzt Ihr CSS3 schon in aktuellen Projekten und wenn ja in welcher Form? Gestaltet Ihr ganze Seitenelemente wie Buttons mit purem CSS3 oder beschränkt sich der Einsatz eher auf Details wie abgerundete Ecken? Und wie verhaltet Ihr Euch im Hinblick auf die Browser die noch kein CSS3 können? Bietet Ihr hier eine Fallback-Lösung an oder ignoriert Ihr fehlerhafte Darstellung in bestimmten Browsern?