Tutorial

3D-Text mit CSS3

Posted in CSS, Tutorial, Typographie, Webdevelopment on October 16th, 2010 by admin – Be the first to comment

Ein netter Effekt, den ich auf html5boilerplate.com gefunden habe:

Der Effekt funktioniert (natürlich) nicht im Internet Explorer, aber wen stört das schon?

Hier der CSS-Code:

font-family: MolotRegular, Arial, sans-serif; /* Am besten eignet sich eine kantige Schriftart */
text-shadow: black 1px 1px 0px, #476871 2px 2px 0px, #476871 3px 3px 0px, #476871 4px 4px 0px, #476871 5px 5px 0px, #476871 6px 6px 0px, #476871 7px 7px 0px; /* Netter Trick, nicht? */
text-transform: uppercase; /* Verschandle nicht dein HTML mit Großbuchstaben */

Die Schrift ist übrigens auf FontSquirrel zu finden, aber passt bei dieser Lizenz bitte höllisch auf!

Animierte Favicons

Posted in Development, Icons, Tutorial, Webdevelopment on October 7th, 2010 by admin – Be the first to comment

Es gibt nichts schlimmeres als nervige Gif-Animationen. Es sei, ich setzte sie ein.

Daher habe ich mir überlegt, statt einem langweiligen Favicon mal was bewegtes zu verwenden. Leider musste ich mir sagen lassen, dass nur Opera und Firefox diese unterstützen. Google und Apple meinen es wohl gut mit unserem Sehnerv und akzeptieren nur unbewegte Bilder.

So dachte ich auf jeden Fall, bis ich auf “Defender of the Favicon” stieß. Dort hat jemand wirklich Defender in einem Favicon spielbar gemacht – was sowohl in Chrome und Opera funktioniert.

Die Idee ist eigentlich relativ einfach: Man nehme ein 16x16px Canvas, male beliebigen Inhalt darauf, lese das PNG als Data-URL aus und weise es dem passenden <link>-tag zu.

Auf HTML-Seite sieht das ganze so aus:

<head>
...
<link rel="shortcut icon" href="favicon.png" id="favicon" type="image/png" />
...
</head>
<body>
...
<canvas id="favicon_canvas" width="16" height="16" style="display: none;"></canvas>
</body>

Das Javascript sieht folgendermaßen aus:

var ctx = document.getElementById('favicon_canvas').getContext('2d'); 
var icon = document.getElementById('favicon');
 
 
function setFavicon() {
	ctx.fillStyle = 'blue';  
	ctx.fillRect (0, 0, 16, 16);
	// Die Ecken "abrunden"
	ctx.clearRect(0,0,1,1); 
	ctx.clearRect(15,0,1,1);
	ctx.clearRect(0,15,1,1);
	ctx.clearRect(15,15,1,1);
	icon = document.getElementById('favicon');
	(newIcon = icon.cloneNode(true)).setAttribute('href',ctx.canvas.toDataURL());
	icon.parentNode.replaceChild(newIcon,icon);
}

Und schon hat man ein blaues Favicon mit leicht abgerundeten Ecken. Packt man das ganze jetzt noch in ein setInterval() hat man ein ähnlichen Effekt wie bei dem animierten GIF im Firefox.

Auf marekventur.de habe ich jetzt alle drei Favicon-Arten kombiniert: Der IE sieht nur ein statisches Bild, Firefox spielt ein animiertes GIF und Opera und Chrome zeigen eine Welle, die wie der Schriftzug die Farbe und den “Wasserstand” wechselt. Safari macht leider gar nichts. C’est la vie.

Tutorial: Color changing liquid effect with jQuery

Posted in Development, Tutorial, Webdevelopment, jQuery on October 4th, 2010 by admin – 2 Comments

This tutorial is on how to archieve a color changing liquid effect (like this one) with jQuery. It’s actually quite easy to implement, altough there is a small trap. It’s made with plain CSS2 and will run in every modern browser (note: I don’t consider IE6 as a “modern browser”).

LayersThe trick is to use three layers: The first is the symbol or the text, with the essential parts left transparent, the second is a gray layer with a transparent wave at the bottom an the last is a solid CSS-background-color. With some jQuery-magic to animate the second layer you can create an effect of wavy liquid.
read more »