Kurz gecodet: Farbverläufe und Animationen

Eine kleine Spielerei mit diversen CSS3-Eigenschaften und CSS3-Funktionen.

<style type="text/css">
	.quadrat {
		color: #fff;
		height: 300px;
		width: 300px;
		font-size: 24px;
		line-height: 300px;
		text-align: center;
		background: blue;
		/* css3 magic from here on */
		/* Gradient Background mit Hintergrundbild, zunächst Webkit */
		background-image: url(img/twitter.png), -webkit-gradient(linear, left top, right bottom, from(blue), to(#fff));
		/* Dann der etwas andere Code für Gecko 1.9.2 (FF 3.6b3) */
		background-image: url(img/twitter.png), -moz-linear-gradient(top left, blue, #fff);
		background-position: -200px 0, 0 0;
		background-repeat: no-repeat;
		/* beim Schatten scheint man sich zumindest sprachlich einig zu sein */
		-webkit-box-shadow: 5px 5px 15px #999;
		-moz-box-shadow: 5px 5px 15px #999;
		/* Aber CSS-Transisitions kann nur Webkit */
		-webkit-transition: all 250ms;
	}
	.quadrat:hover {
		/* und noch mehr transition magie */
		-webkit-transform: rotate(20deg);
		-moz-transform: rotate(20deg);
	}
</style>

Und wie das dann aussieht, sehen wir dann hier. Im Firefox 3.5 geht das so, sieht besser in Firefox 3.6b3 aus und macht in aktuellen Safari und Chrome richtig Spass. Der Rest… geht leer aus. 🙂

I’ve got to dance

httpvh://www.youtube.com/watch?v=5OizzpOhJw0

Eine bessere Darstellung von »Party« in den Neunzigern habe ich noch nicht gesehen. Gut, wir hatten keine Harlekin-Mützen und auch kein A-Team, aber Sysnths&Strings und Knicklichter und hier und dort mal ein Staubsauger auf dem Rücken…

BTW… Spaced ist, zusammen mit Shaun of The Dead, sicherlich das coolste, was Simon Pegg bisher gemacht hat. Immerhin hat er’s aber ja bis ins amerikanische Kino gebracht. Jessica Heynes hingegen habe ich nur einmal in einer Doctor Who Folge wieder gesehen…

httpvh://www.youtube.com/watch?v=q9is5gJORl4

Auf allen Kanälen

Mir fällt immer öfter auf, dass ich doch auf ziemlich vielen Kanälen sende, nicht nur hier in diesem Blog—und hier gibt es auch schon mehrere Sendungen. Vielleicht ein guter Moment, mal die Kanäle und Sendungen des Codecandies-Webfunk neben dem normalem Blogging mal zusammenzutragen und zu sortieren.

Twitter

Die Informationssammlung und Verbreitung ist bei mir sehr granuliert. Das fängt beim Twittern an, wo ich zugegeben wenig Links, oft aber viel blödes Zeug und Unsinn verbreite. Unter @nicobruenjes kann man an diesem Quatsch teilhaben (und der eine oder andere Musiktipp fällt auch noch dabei ab). Wer Twitter als Ersatz für den RSS-Reader nutzt, wovon ich ausdrücklich abrate, der kann auch den Feed dieses Blogs dort finden unter @codecandies. Aber da abonniert doch besser den echten Feed, auf den komme ich noch gleich.

2833258414_44e2cae01e_b

Google Reader

Ich hatte dem Google Reader einige Zeit abgeschworen, da ich der Ansicht war, auf diesem Gebiet gäbe es genug Alternativen, da könne man auf Google auch mal verzichten. Prompt führte Google das gegenseitige followen auch im Google Reader ein, ein Hammertool, was dazu geführt hat, das ich in einem regelrechten Ökosystem mit Freunden udn Kollegen hänge, beinahe soetwas wie ein Lesekreis. Das Sharen von Postings noch während oder direkt nachdem man es im Reader konsumiert hat, ist die schnellste und bequemste Art, meinem Lesekreis mitzuteilen, was ich für interessant für sie halte. Diese persönliche Ansprache ist dabei sehr wichtig, fast nie benutze ich die doch auch vorhandene Möglichkeit, direkt vom Reader zu Twitter zu posten und so wesentlich mehr Leuten einen guten Text zu übermitteln. Meine Shared Items jedenfalls finden sich hier, jeder Leser ist eingeladen, sich da einzuhängen.

Bookmarks

Bin ich der Ansicht, ein Artikel, Tutorial o.ä. ist wichtig genug für meine Blogleserschaft (das fällt eigentlich immer mit meinem Wunsch zusammen sich einen Link für späteren Gebrauch zu merken, also „was ich gebrauchen kann“ = „interessant für meine Leser“), aber ich will nicht selbst meinen Senf dazugeben, dann landet er als Bookmark in meiner öffentlichen Bookmarksammlung. Die hat auch einen eigenen Feed.

Die Aussichten

Als nächstes wird dann wohl Google Wave als Werkzeug dazukommen, obwohl ich es zumindest im Moment dort noch ein wenig zu langweilig finde. Aber sei’s drum, auch dort findet man mich, Einladungen dazu gibt’s ja inzwischen wie Sand am Meer…

jQSlickWrap

jQSlickWrap is a plugin for jQuery which enables you to easily and accurately wrap your text around the content of floated images. Nutzt HTML5-Canvas.

Kurz gecodet: Multiple Backgrounds

Es hat sich vielleicht schon ein wenig herumgesprochen: Safari, Google Chrome und demnächst auch Firefox unterstützen multiple backgrounds. Ein kleines Snippet aus dem CSS zu 9:

html body {
	background: url(img/9-freigestellt-666633.jpg) #666633 no-repeat 100% 107%;
	background: url('img/juteverlauf.jpg') repeat-x 0 0, url(img/9-freigestellt-666633.jpg) #666633 no-repeat 100% 107%;
	-moz-background-size: 300px 645px, contain;
}

Die einzeln gesetzte background ist ein Fallback für jene Browser, die noch keine multiplen Hintergründe kennen. Dann werden die multiplen Backgrounds gesetzt, mit allen weiteren Eigenschaften. Als Zugabe hier noch -moz-background-size. background-size wird zwar auch von Safari und Chrome (mit Prefix -webkit-) unterstützt, der kennt allerdings noch nicht das Schlüsselwort contain, das das Hintergrundbild auf die Seitenbreite skaliert.

Ein wenig ausgefegt

Nebenbei, warum es in den letzten Wochen hier so ausnehmend leise war: ich habe am Blog geschraubt. Unter der Haube werkelt jetzt ein frisches HTML5 und ich habe viel am CSS gemacht, vor allem verkleinert. Die Druckstyles fehlen noch, fällt mir da auf.

Jetzt wo es schon in aller Munde ist, ist vielleicht ein schlechter Zeitpunkt, mit individuell gestalteten Artikeln daher zu kommen. Und es gibt auch schon die ersten bissigen Kommentare im voraus, schließlich war ich auch nicht wirklich überzeugt. Aber ich gehöre auch gewöhnlich nicht zu den Armeen von Gestal­tern, die auf irgendwelche Züge aufspringen. Vielmehr hatte jüngst Ben meinen Konkurrenzgeist geweckt und ich hatte damit begonnen, das Blog so zu bauen, dass man auch mal etwas Ausgefallenes machen kann. Das ist nun fertig und Trend hin oder her… hier ist dann auch das erste Produkt: 9…