eleqtriq

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

Natürliche Objektrotation mit CSS3 3D

CSS3 3D Object-Rotation

Ich hatte endlich mal Zeit, den letzten Teil meiner Serie von CSS 3D-Tutorials zu beenden. In diesem Teil werden wir lernen, wie wir einen 3-dimensionalen Packshot mit lediglich einigen Zeilen HTML/CSS erstellen können und wie wir anschließend mit etwas Javascript-Magie ein frei rotierbares Objekt schaffen. Funktioniert auch auf iPad und iPhone.

more

Spritebaker

Thumb

Seit längerer Zeit hatte ich nun schon vor, eine online-App zu bauen die das Generieren von Data-URI Sprites erleichtert. Um die Aufgabenstellung zu verschärfen, sollte für die App außerdem lediglich HTML und Javascript zum Einsatz kommen...

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

Kubische Bezierkurven in Flash

Thumb

Ein Nachteil von Flash ist die Tatsache, dass es nicht möglich ist in Flash kubische Bezierkurven zu zeichnen. Hier möchte ich eine Technik vorstellen, diese Art von Kurven mit hoher Präzision in Flash darzustellen. Sie nutzt das fl.motion package und ist eine Alternative zur weit verbreiteten "Generischen Mittelpunktsnäherung".

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

Quick Tipp: HR im Internet-Explorer stylen

Jeder der schon einmal versucht hat, den HR-Tag im Internet-Explorer mit CSS zu stylen weiss, dass das unmöglich ist: IE<8 akzeptiert nur ein kleines Subset von CSS-Attributen. Diese Skript hilft, das Problem zu umschiffen.

more