eleqtriq

Applying Alpha Channels to JPGs

(English) Alpha JPGFor a long Time we have been waiting for a highly compressed image format that allows semi-transparent areas and is available in every browser. Well, it's been here all the time! Reduce page weight by replacing PNGs with semi transparent JPGs.more

(English) The Holy Grail of Image Scaling

(English) 9 Way SlicingFlash and Illustrator users had the luck to enjoy image scaling with a 9-sliced scaling grid for years. Applying this grid to graphics gives us unmatched scaling flexibility. Here's how to get a hold of this technique in web development with the help of some clever SVG tricks.more

(English) The 4 Slice Scaling Technique for SVG

(English) 4 Way SlicingThis is a method to create highly flexible SVG images from 4 overlappping tiles. Learn it and then never go back to traditional CSS background images again.more

(English) Everything is Relative. The Art of the Adaptive Image.

(English) ZombieIn responsive design it's not only about how big an image will display and which density we must feed to the browser. The image itself must be adaptive, change its content according to the context. In loose order I will try some not so common adaptive image techniques here.more

Geschafft! csswarp.js für dynamisches Text-Warping

HTML text warpingEndlich hatte ich Zeit, die erste Inkarnation von csswarp.js fertigzustellen. Nun ist es möglich, auch dynamischen Content aus dem CMS zu warpen. Zudem gibt es jede Menge Möglichkeiten zur Konfiguration.more

Aus dem Labor: Text-Warping mit CSS3

HTML text warping

Mein jüngstes Experiment: diese kleine Webanwendung macht es möglich HTML-Text zu "warpen". Nativer Text im Browser der an einem Pfad entlang ausgerichtet wird oder um einen Kreis rotiert wie man es sonst von Illustrator her kennt, ist somit kein Ding der Unmöglichkeit mehr.

more

The Matrix Revolutions (CSS 3D – 2)

Thumb

Im 2. Teil meiner Serie über 3D CSS-Transformationen geht es nun um die Matrix. Was hat es mit diesem geheimnisvollen Ding auf sich und wie kann man es einsetzen?

more

CSS 3D Transforms verstehen (CSS 3D – 1)

Thumb

Ich hatte die letzten Tage eine Menge Spaß dabei, mit CSS 3D-Transformationen herumzuspielen. Diese kleine Miniserie soll eine kurze Einführung sein für alle, die sich schonmal für das nächste Webkit-Update in Stellung bringen wollen.

more

Canvas vs. SVG vs. Flash

Thumb

HTML 5 ist auf dem Vormarsch und damit einher geht für uns Designer die Frage, welche Darstellungsmethoden für komplexe Animationen am besten geeignet sind, Canvas, SVG oder Flash? Dieses Experiment soll helfen, ein Gefühl für die Geschwindigkeit und Responsivität der Rendermethoden zu bekommen.

more