devatrox

Wen es interessiert und wer sich nicht durch mein Stylesheet wurschteln will, meine Buttons hier im Blog sehen so aus:

input[type=submit] {
	width:auto;
	text-shadow:0 1px 0 #fff;
	padding:.2em .7em;
	border:1px solid #ddd;
	border-bottom-color:#ccc;
	border-top-color:#eee;
	border-radius:1em/2em;
	-moz-border-radius:1em/2em;
	-webkit-border-radius:1em 2em;
	background:#fff;
	background:-moz-linear-gradient(top,#fff,#ddd);
	background:-webkit-gradient(linear, 0 top, 0 bottom, from(#fff), to(#ddd));
	box-shadow:0 1px 3px rgba(0,0,0,.1);
	-moz-box-shadow:0 1px 3px rgba(0,0,0,.1);
	-webkit-box-shadow:0 1px 3px rgba(0,0,0,.1);
}
input[type=submit]:hover, input[type=submit]:focus {
	cursor:default;
	color:#911;
	box-shadow:0 1px 3px rgba(0,0,0,.2);
	-moz-box-shadow:0 1px 3px rgba(0,0,0,.2);
	-webkit-box-shadow:0 1px 3px rgba(0,0,0,.2);
}
input[type=submit]:active {
	box-shadow:0 1px 3px rgba(0,0,0,.1);
	-moz-box-shadow:0 1px 3px rgba(0,0,0,.1);
	-webkit-box-shadow:0 1px 3px rgba(0,0,0,.1);
}

Hier können wir so einen Button bei der Nahrungssuche beobachten:

Und hier eine Großaufnahme, wie ihn Chrome 5 unter Windows sieht:

Es macht Spaß so zu arbeiten. IE6 bekommt durch die Nicht-Unterstützung von Attribut-Selektoren einen Standardbutton hingerotzt. IE7 und 8 ein eckiges weißes Ding. Opera fehlt nur noch die gradient-Unterstützung. Die Syntax des -webkit-gradient ist total unausgereift und lang. Mozillas Version gefällt mir als Minimalist und Code-Komprimierer dagegen außerordentlich gut.

---

Vielleicht schreibe ich ab jetzt weiter über solche Dinge. Da kenne ich mich wenigstens mit aus und kann öfter mal was bringen. Eventuell packe ich das irgendwann auch in eine Extra-Kategorie. Aber auch meine 2-3 Stammgäste, die mit solchen Themen nichts anfangen können, bekommen noch was zu lesen. Dieses Jahr noch, versprochen.