devatrox

Animationen mit CSS3

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

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:

CSS3 Button

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.

Delicious links for 2010-03-07

CSS: Smooth Fonts unter Windows (Update)

Smooth FontDa 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.

Brett vorm Kopf


Hab ich eigentlich schon erzählt, dass ich totaler Brettspiele-Fan bin? Ich will das nur loswerden, weil ich ziemlich traurig bin, dass ich nur so selten (an Weihnachten mit der Familie) zu diesem Glück komme, da ich kein Schwein hier kenne, das ähnliche Hobbies hat. Es geht doch echt nichts über einen Brettspielabend bis tief in die Nacht mit Carcassonne, Siedler, Manhattan, Monopoly und was es nicht alles gibt, mit Bier oder Wein und Gedöhns und so. Ich rufe auf, spielt Brettspiele! Besonders mal hier in Kölle, weil dann spiel ich mit. Echt ma.

Totally unrelated

Ihr könnt jetzt das „blog.“ vor der URL weglassen. Wurde auch wirklich mal Zeit. Und noch was: Ich bin jetzt schon seit geraumer Zeit alleine mit meinem neuen Blogtheme unterwegs (dank Theme Test Drive), welches ich inzwischen schon wieder komplett umgeschmissen habe. Es ist NOCH simpler geworden als geplant. Da werden einige warscheinlich sagen, „Ja was hat er denn gemacht, so Themes gibt’s doch schon zuhauf! Wieso braucht der da so lange dafür?“ Tja, ich mag’s und ich werde euch das aufzwingen. Nicht mehr lange. Und wer meckert, dem hau ich op de Schnüss!

Und außerdem: Google Buzz ist doof. So.

Update: Ach komm, was soll das Gezeter, ich hau den Theme jetzt einfach raus und wenn was nicht geht, dann einfach stillsitzen und warten. Ich bau ja noch.

Delicious links for 2010-02-16

Delicious links for 2010-01-09

Ergebnis unseres Travelbug-Rennens

Der ein oder andere wird sich vielleicht nicht erinnern, ich habe ja mit Geocaching-Freunden ein Travelbug-Rennen gestartet. Ich verkünde nun hiermit die Ergebnisse, denn das Rennen endete offiziell am 25. Dezember.

  1. DeLonge (21.040)
  2. Manibo (14.822)
  3. dev-atrox (13.586)
  4. holzmini (1.043)
  5. waldtchias (362)

So sah das eigentlich schon eine ganze Weile aus. DeLonge hatte mit seinem kurzen Hong Kong-Aufenthalt einfach zuviel Vorsprung und Manibo überholte mich, als er mal eben ganz frech in die USA reiste, während ich weiterhin Europa unsicher machte – mit einem Fast-Besuch in Afrika, rein geografisch gesehen, denn leider gehört Teneriffa offiziell zu Spanien, das wären immerhin 600 Punkte mehr gewesen. Dafür war aber mein TB am aktivsten und ich habe insgesamt die meisten Länder und Bundesländer angesteuert. Schade finde ich aber, dass der aktuelle Träger meines TB etwas unzuverlässig ist. Anfang Dezember hat er ihn in Schweden mitgenommen und verkündet, er würde ihn in einer Woche weit weg bringen. Nun sind drei Wochen um, er ist/war mittlerweile in Thailand (!) und nichts ist passiert. Das hätte mir noch den zweiten Platz beschert, wenn nicht noch mehr.
Schade ist auch, dass die TBs von holzmini und waldtchias bereits im März spurlos verschwunden sind.

Die Reise des dev'schen Travelbugs

Es war jedenfalls ein spannendes Rennen und ich möchte mich bei all den freundlichen Cachern bedanken, die unsere TBs vorangebracht haben. Ich werde die Reisenden natürlich noch weiter verfolgen, denn das Ende des Rennens bedeutet ja nicht, dass die TBs jetzt in Rente gehen.

Delicious links for 2009-12-26

Was ich so treibe.

Ab jetzt verspreche ich einfach nicht mehr, dass ich noch regelmäßig Blogeinträge schreibe. Das ist wie „Ich höre mit dem Rauchen auf“. Wenn es nicht klappt – was sehr warscheinlich ist – war es nur wieder ein leeres Versprechen. Soviel schon mal im Voraus, als Abschreckung für alle potenziellen Feed-Abonennten.

So, jetzt aber zum Thema. Derzeit sitze ich zuhause, warte auf Antwort von Bewerbungen. Mir fliegen Gedanken durch den Kopf, die sich mit Selbstständigkeit beschäftigen. Deshalb habe ich auch im Moment viel Zeit und je mehr Zeit ich habe, desto weniger produktiv bin ich. Aber immerhin bastel ich ja gerade eifrig an einem neuen Blogdesign, das ich dann eventuell auch unter GNU GPL in die offizielle WordPress Theme-Datenbank einspeisen werde. Soviel schon mal: Es wird minimalistisch, so wie der Inhalt damit der Inhalt in den Vordergrund rückt.

Das Design ist diesmal von Grund auf selbst gemacht, nicht wie im aktuelle Theme nur etwas verändert. Einzig das „Fahrgestell“ basiert auf dem Basis-Theme von Frank Bültge. Das macht die Sache etwas einfacher für mich, da ich PHP gerade erst lerne und so. Ist schon erstaunlich, wie lange ich das vor mir hergeschoben habe. Aber genau dadurch lerne ich sogar noch viel schneller. Vielleicht wird das Ganze auch in HTML5 geschrieben, also für ältere Browser und unser aller Sorgenkind nur mit einem kleinen JavaScript-Hack korrekt darstellbar. Mal schauen.

Ansonsten passiert nicht viel in meinem Leben. Ich war jetzt seit 3 Monaten nicht mehr geocachen, aber zur Weihnachtszeit mit der Familie wird da sicher noch was draus. Wie bereits irgendwo hier gesagt, alleine macht mir das nicht mehr soviel Spaß. Beim Travelbug-Rennen bin ich übrigens derzeit Dritter und sofern kein Wunder geschieht, wird das auch so bleiben, da das Rennen bereits am 25. Dezember endet. Immerhin kann ich behaupten in den meisten Ländern und Bundesländern gewesen zu sein. Derzeit befindet sich mein Coin in Schweden.

Kürzlich hatte ich einen Rohrbruch. Gut ist, dass ich alles am selben Tag schon wieder nutzen konnte. Schlecht ist, dass die Wand seitdem offen steht und ich jetzt jeden Morgen früh aufstehen muss, um dem Mann – möglichst nicht im Halbschlaf – die Tür zu öffnen, falls er denn mal endlich kommt. Fliesen müssten noch bestellt werden, sagte man mir. Wie lange das dauert sagt man mir nicht.

Ingesamt ist meine Stimmung aber sehr gut. Ich bin nicht arm, falle also nicht in die sonst übliche Winterdepression. Und weil ich so gut drauf bin, könnt ihr mir hochinteressante Fragen über meine hochinteressante Person bei formspring.me stellen, die ich höchstpersönlich mit hochinteressanten Antworten versehen werde. So. Twittern tu ich übrigens auch wieder etwas häufiger.