devatrox » "css" Tag-Archiv – devatrox

Animationen mit CSS3

Jason — Wed, 31 Mar 2010 21:05:50 +0000

Ich bin ja ein großer Fan von CSS3. So sieht mein Header-Schriftzug jetzt aus (nur für Webkit-Browser):

h1 a {
	-webkit-animation-name: colorChange;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-webkit-animation-duration: 7s;
}
@-webkit-keyframes colorChange {
	0% { color:#911; }
	33% { color:#1a1; }
	66% { color:#09e; }
	100% { color:#911; }
}

Klein, aber fein.

Weiß jemand wie man Animationen für den :hover quasi pausieren kann und dafür eine feste Farbe nehmen? Ein einfaches color:wieauchimmer scheint nämlich nicht zu reagieren und man muss auf andere visuelle Mittel zurückgreifen um das Mouse-Over zu signalisieren. Oder man erstellt quasi eine neue Animation, ohne Animation eben. Aber das gefällt mir so garnicht. Vorschläge erwünscht.

Man stößt ja des öfteren auf so kleine Macken bei der Nutzung von CSS3. Der animation-Shorthand will noch nicht so recht wie ich will. Und border-color in Verbindung mit border-radius, gradient und box-shadow auf einem Haufen (hat jetzt nichts mit diesem Beispiel zu tun) sieht echt unschön aus. Bei mir jedenfalls. Ich würde mir außerdem wünschen gradient auf Text anwenden zu können, ohne irgendwelche Workarounds. Aber das ist ja alles noch nicht fertig und wird sicher noch behoben.

Merke: Nur weil es CSS3 ist, werden Animationen nicht unbedingt besser. Rumschwirrendes Bling-Bling bleibt auch weiterhin nervig, wenn es falsch angewendet wird. Wir kennen das aus GIF-Zeiten.

CSS3 Button

Jason — Sun, 14 Mar 2010 12:14:23 +0000

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.

CSS: Smooth Fonts unter Windows (Update)

Jason — Sat, 06 Mar 2010 17:40:40 +0000

Da experimentiert man so vor sich hin und bemerkt plötzlich, dass bei der Nutzung von text-shadow die Schrift auch unter Windows, wie von Zauberhand so schön geglättet aussieht, wie auf dem Mac. „Hm“, dachte ich mir, „aber was wenn man keinen Schatten will, aber trotzdem den Effekt?“. Nichts leichter als das! Einfach den Schatten mit ~~rgba~~ transparent unsichtbar machen: text-shadow:transparent 0 0 1px; (dieses 1px muss aber bleiben, damit das ganze aktiv wird).

„Toll“, dachte ich mir dann, „hab ich endlich mal was entdeckt“ (man stelle sich die Eingangsszene aus „2001″ vor), aber eben lese ich zufällig den Post auf CreativityDen, über sein neues Blog-Theme, der diese Methode so ganz flapsig nebenbei in einem Satz erwähnt und ich war wieder nur zweiter (oder dritter oder vierter).

Was soll’s. Wichtig ist, dass ich sie alleine entdeckt habe und mein Blog dadurch für uns Windows-User ein kleines Optik-Update bekommen hat. Und wer das nicht sieht, hat wohl ClearType im System deaktiviert.

Update: War ja klar, Firefox interessiert das nicht die Bohne. Dann müsst ihr halt auf Chrome wechseln. Ist sowieso besser.