Tag: inspiration

ColorBlendy: Farben im Browser mischen

In Bildbearbeitungsprogrammen lassen sich über die "Blending Modes" mehrere Ebenen miteinander mischen. Dabei können verschiedene Methoden der Überblendung eingestellt werden (wie etwa "Überlagern", "Negativ multiplizieren" oder "Abdunkeln"). Je nach Modus entstehen unterschiedliche Belichtungen und Effekte.
Um mit Farben experimentieren zu können, bieten sich solche Überblendungen an. Ein Projekt, welches beim 10K Apart-Contest eingesandt wurde, bietet genau diese Möglichkeit: Mit ColorBlendy lassen sich 2 Farbwerte durch verschiedene Überblendungsmethoden mischen, so dass eine dritte Farbe entsteht.

Bei ColorBlendy müssen lediglich die beiden HEX-Codes der gewünschten Farbwerte eingegeben — anschließend können die Farben über 5 Methoden vermischt werden.
Der Entwickler, Andrey Petrov, hat die Überblendungen zudem nicht mit dem HTML5-Element "canvas", sondern mit JavaScript umgesetzt. Dadurch funktioniert das kleine Tool auch unter Internet Explorer.

Webdesign: Muster für interaktive Bedienelemente

Umfangreiche und anschauliche Bücher stellen neben Ressourcen aus dem Internet die beste Methode dar, um sich mit einem Thema vertraut zu machen. Ein schönes Werk zum Thema Web-Benutzeroberflächen stellt beispielsweise ein Buch vom O’Reilly-Verlag dar, in dem Prinzipien und Entwurfsmuster für interaktive Web-Auftritte behandelt werden. Passend zum Buch gibt es eine Website, auf der sich die Inhalte des Buches in einer kurzen Übersicht betrachten lassen. Weiterhin finden sich auf der Seite aber auch interessante Blog-Artikel: In diesem Beitrag werden 12 Beispiele zu bekannten Bedienelementen vorgestellt und beschrieben.

Dabei geht es also hauptsächlich um die Gestaltung und Darstellung von Spalten, Tabellen, Suchergebnissen, Formularen, Paletten oder sonstigen Anwendungsbereichen. In dem Beitrag finden sich zu jedem Entwurfsmuster verschiedene Screenshots von vorbildlichen Beispielen.
Weiterhin gibt es in dem Blog schöne Beiträge über Web-Komponenten oder interaktive Steuerelemente von Websites. Einen guten Artikel über die zukünftige Welt des User Interface Designs gab es übrigens im Februar bei WebDesignerWall.

CSS 3.0 Maker: CSS3-Effekte im Browser erstellen

Inzwischen sind Editoren, die fertigen CSS3-Code für neue Effekte generieren, massenhaft im Netz vertreten. Neben dem CSS3 Playground oder dem CSS3 Generator gibt es nun den CSS 3.0 Maker, der ebenfalls komfortable Werkzeuge für die Erstellung von neuen CSS-Effekten bietet.

So können mit dem Online-Editor CSS-Codes für Textschatten, Verläufe, abgerundete Ecken, Animationen, Rotationen oder @font-face-Deklarationen erstellt werden. Die Seite bietet schöne Echtzeit-Werkzeuge, mit denen sich die verschiedenen Effekte sehr gut anpassen und einstellen lassen. Derartige Editoren sind für CSS3-Effekte notwendig, da sich genaue Anpassungen und visuelle Kleinigkeiten direkt betrachten lassen. Aktuelle CSS3-Editoren unterscheiden sich kaum von ihrer Funktionalität — für Webentwickler zählen im Endeffekt nur die Bedienbarkeit eines Editors und der persönliche Geschmack.

jQuery Image Scroller: Mini-Vorschau zur Navigation

Kürzlich berichtete ich über das jQuery-Plugin miniZoomPan, mit dem sich Bildausschnitte eines größeren Bildes in einem Ausschnitt bewegen lassen. Ein ähnliches Skript gibt es nun von Trevor Davis: Mit dem jQuery Image Scroller wird eine kleine Vorschau eines Bildes eingeblendet, über die das Ursprungsbild angesehen und verschoben werden kann.

In dem Blog-Eintrag werden die verschiedenen Teiles des Plugins beschrieben. Zudem gibt es eine Demo-Seite, auf der das Skript getestet werden kann. Die Implementierung erfolgt wie gehabt:

• $(document).ready(function() {
• $("element").imageScroller();
• });

Auf der Miniatur-Vorschau wird also eine graue Fläche angezeigt, die den sichtbaren Bereich repräsentiert. Wird sie mit der Maus bewegt, verschiebt sich dementsprechend das Original-Bild im Sichtbereich. Dadurch können alle Bereiche von größere Grafiken (wie etwa von Produktbildern) im Detail angesehen werden. Das Skript ist momentan auf ein vertikales Verschieben ausgelegt, so dass die Breite des Original-Bildes festgelegt werden muss. Eventuell folgt bald eine Möglichkeit für eine horizontale Verschiebung.

jQuery miniZoomPan: Plugin zur Bildvergrößerung

Mit JavaScript-Bibliotheken lassen sich die ausgefallensten Bedienelemente und Effekte umsetzen. Es gibt mittlerweile unzählige jQuery-Plugins, die zur Verbesserung von Benutzeroberflächen im Web beitragen. Auch für Bildergalerien oder Slideshows stehen etliche Plugins zur Verfügung. Ein schöner Effekt für diesen Bereich stellt auch das Plugin "jQuery miniZoomPan" dar. Diese Funktionalität dürfte sich auf vielen Online-Shops wiederfinden: Fährt man mit der Maus über ein Vorschaubild, wird in dem Ausschnitt die Originalgröße des Bildes angezeigt. Anschließend lässt sich der Bildausschnitt durch Mausbewegungen verschieben.

Mit dem kleinen Plugin können also Details eines Bildes dargestellt werden, ohne dass ein separater Bereich (wie etwa eine Lightbox) geöffnet werden muss. Diese Funktionalität eignet sich vorzugsweise für Produktbilder oder auch Portfolio-Inhalte.
Das jQuery-Skript von Gian Carlo Mingati besteht aus einer JS- und einer CSS-Datei. Leider gibt es keine echte Dokumentation, weshalb die Implementierung im Quellcode des Beispiels angesehen werden muss:

• HTML-Code:
• <div id="zoom01">
• <img src="leaf_s.jpg" />
• </div>
•  
• jQuery-Code:
• $("#zoom01").miniZoomPan({
• sW: 200,
• sH: 250,
• lW: 370,
• lH: 462
• });

Definiert werden also die Dimensionen des Vorschaubildes sowie die der Originalversion. Im Quellcode des Plugins sind die beiden Varianten eines Bildes durch die Nachsilben "_s" (small) und "_l" (large) verankert. Dementsprechend müssen die Bider benannt werden. Optional können beim Plugin-Aufruf noch ein Rahmen sowie ein "Loading"-Bild definiert werden.

JS1k: JavaScript-Demos mit 1024 Bytes

Eigentlich wollte ich schon letzte Woche darüber berichten, doch da die Seite noch recht leer war, habe ich noch etwas gewartet. Inzwischen dürfte das Projket JS1k bekannt sein — dabei handelt es sich um einen Demo-Contest, bei dem es darum geht, JavaScript-Animationen bei einer Größe von maximal 1 KB zu realisieren. In den JavaScript-Snippets dürfen keine externen Frameworks verwendet werden. Hacks zur Optimierung und Minification sind hingegen zulässig. Mittlerweile stehen etliche Demos zur Begutachtung bereit.

In den bisherigen Einsendungen finden sich viele grafische Effekte und Spiele. Als Preise winken verschiedene Bücher, Beta-Accounts und Workshops. In der Jury befinden sich bisher Remy Sharp (JS Bin), Thomas Fuchs (Script.aculo.us) und Patrick H. Lauke. Einsendungen sind noch bis zum 10. September möglich.
Das Projekt wird zeigen, ob sich mit JavaScript eine ähnliche Demoszene entwickeln wird, wie es sie schon in anderen Programmiersprachen gibt.

Peculiar: Icon-Package mit CSS-Symbolen

Die wohl bekannteste Neuerung, die mit CSS3 möglich ist, dürften abgerundete Ecken sein. Dass sich durch diesen Effekt auch ansehnliche Symbole gestalten lassen, demonstriert der Designer Lucian Marin — sein Icon-Paket Peculiar besteht aus 45 Piktogrammen, die aus reinem CSS-Code erstellt wurden (border-radius) und somit auch bei einer vergrößerten Ansicht scharf dargestellt werden.

Die CSS-Symbole reichen von einfachen Video-Player-Icons bis hin zu Nachrichten-Symbolen oder Pfeilen. Durch den Einsatz der kleinen Piktogramme können unter Anderem HTTP-Requests eingespart werden. Das Paket darf zu Lernzwecken frei genutzt werden. Ist ein privater oder kommerzieller Gebrauch gewünscht, fällt ein kleiner Obolus von 25 USD an. In jedem Fall sind die Icons eine schöne Inspirationsquelle für die Möglichkeiten von CSS3. Die Grafiken können in allen modernen Browsern dargestellt werden und funktionieren auch in Internet Explorer, wenn CSS3 Pie auf der entsprechenden Seite integriert wird.

Firefox 4: Beta 2 mit CSS3-Transitions veröffentlicht

Mittlerweile ist die zweite Beta-Version von Firefox 4 erschienen — ein entsprechender Blog-Eintrag von Mozilla findet sich hier. Während die erste Beta-Version des kommenden Mozilla-Browsers Performance-Verbesserungen, Direct2D-Beschleunigung, HTML5-Features und diverse CSS-Möglichkeiten mit sich brachte, stehen mit der aktuellen Beta-Version CSS3-Transformationen zur Verfügung.

Mit den nativen CSS3-Transitions sind nun also Drehungen, Verzerrungen und Vergrößerungen möglich. Ein Beispiel aus dem Mozilla-Artikel:

• transform: rotate(350deg) scale(1.4) rotate(-30deg);

Weiterhin stehen Demos bereit, die verschiedene SVG-Filter und WebGL-Fähigkeiten zeigen. Neben visuellen Effekten wurde weiterhin die Performance von Firefox verbessert. Dies wird durch die "Retained Layers"-Technik erreicht, bei der Elemente in einer Cache-Ebene abgelegt werden und dadurch nicht immer neu dargestellt werden müssen.
Eine empfehlenswerte Quelle für CSS3-Animationen stellt übrigens Richard Bradshaw mit einer Website bereit.