eleqtriq

SVG Partial Blur and iOS Style Translucency

(English) SVG TranslucencyIt's one of the lesser known features of SVG filters that they can be masked. Here's how to apply a partial blur to images and SVG elements. This way it's possible to create some nifty effects like tilt-shift or true iOS style translucency.more

The SVG Filter and why it’s awesome

(English) SVG Filter EffectI had the honour to write a post over at Smashing Magazine, where I take a closer look at SVG filters and the phantastic possibilties they offer designers to create astonishing type effects.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

Bessere CSS Sprites mit SVG

gene

CSS Sprites mit SVG bieten Möglichkeiten die diejenigen konventioneller CSS Sprites weit übertreffen. So können zum Beispiel oft benötigte Eigenschaften, die leider derzeit in der CSS Spec noch fehlen, wie z. B. "background-rotation" oder "background-opacity" mit SVG hervorragend simuliert werden. Dieser Artikel soll zeigen, wie SVG uns zusätzliche praktische Tools bei der Verwendung von CSS zur Verfügung stellen kann.

more

Update: traqball 2.0

traqball 2.0

Nach längerer Zeit habe ich traqball.js, meiner kleinen library für Gimbal-Lock freie 3D-Rotation von HTML-Elementen ein Update verpasst. Mit Bewegungsimpuls, einfacherer Konfiguration und mehreren Trackballs auf einer Seite seid Ihr nun der Mittelpunkt einer jeder Party!

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

Showcase: Pop-Up Buch mit HTML und CSS

Pop-up book

Ein kleines Demo das ich letztens zusammengebastelt habe: die gesamten CSS-Spielerein die CSS so unterhaltsam machen auf einmal: Animationen, Transitions, Transformationen, 3D...

more