Applying Alpha Channels to JPGs
For 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
Flash 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
This 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.
In 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
- CSS3, Design, HTML5, SVG
- 4 Comments
Finally! csswarp.js for dynamic Text warping
Finally 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.
Fresh from the Lab: CSS3 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.
moreThe Matrix Revolutions (CSS 3D – 2)The Matrix Revolutions (CSS 3D – 2)
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?
The second part in this mini-series on css 3d covers matrix-transformations. What is this mysterious thing and how can we use it?
moreCSS 3D Transforms verstehen (CSS 3D – 1)Understanding CSS 3D Transforms (CSS 3D – 1)
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.
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.
moreCanvas vs. SVG vs. FlashCanvas vs. SVG vs. Flash
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.
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