eleqtriq

Applying Alpha Channels to JPGs

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

The Holy Grail of Image Scaling

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

The 4 Slice Scaling Technique for SVG

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

Everything is Relative. The Art of the Adaptive Image.

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

Finally! csswarp.js for dynamic Text warping

HTML text warpingFinally the first incarnation of csswarp.js is ready. Now it's possible to have warped text that follows a path even when content is served dynamically. An extensive set of configuration options gives you the ability to control every aspect of your warp.

more

Fresh from the Lab: CSS3 Text-Warping

HTML text warping

My latest experiment: this little web application will make it easy for you to "warp" HTML-text. Create native text that follows the flow of an arbitrary bezier path or wrap it around a circle like you do in Illustrator.

more

The Matrix Revolutions (CSS 3D – 2)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?

Thumb

The second part in this mini-series on css 3d covers matrix-transformations. What is this mysterious thing and how can we use it?

more

CSS 3D Transforms verstehen (CSS 3D – 1)Understanding CSS 3D Transforms (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.

Thumb

I had a lot of fun last week playing with the new CSS 3D Transforms. This short mini-series is intended to help developers get ready for the next generation of Webkit-browsers.

more

Canvas vs. SVG vs. FlashCanvas 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.

Thumb

HTML5 is gaining momentum and we designers increasingly often have to decide which method to choose for rendering complex animations in the browser: canvas, svg or flash? Maybe this experiment can help to get a feeling for speed and responsiveness of the different rendering-methods.

more