Kategorien
JavaScript & jQuery Programmierung

Gekippt: HTML-Elemente als Parallelogramme darstellen mit Maskew

Mit der CSS3-Eigenschaft „transform“ lassen sich HTML-Elemente als Parallelogramme darstellen, indem man sie optisch kippt. Allerdings wird durch die Verwendung dieser Eigenschaft das gesamte Element samt Inhalt verzerrt, was mindestens bei Bildern in der Regel eine unerwünschte Optik nach sich ziehen wird. Die JavaScript-Bibliothek Maskew hingegen maskiert ein HTML-Element lediglich mit einem gekippten Rechteck (also einem Parallelogramm). Der eigentliche Inhalt wird unverzerrt dargestellt.


Beispiele für mit Maskew erstellte Maskierungsrahmen

HTML-Elemente als Parallelogramme: Schicke Rahmen einfach erstellen

Frei definierbare Formen für HTML-Elemente sind auch mit CSS3 nur sehr eingeschränkt möglich. Neben Rechtecken lassen sich mit wenig Aufwand und ohne JavaScript zumindest Kreise und Ovale erstellen, mit denen auch Grafiken etc. maskiert werden können.Die Maskew Library erweitert das Spektrum der Maskierungsmöglichkeiten dank JavaScript um Parallelogramme.

Der Einsatz ist einfach. Zunächst wird die  JavaScript-Bibliothek, die keine 5 Kilobyte groß ist, ins HTML-Dokument eingebunden. Anschließend lässt sich der Maskew-Effekt mit einer Zeile JavaScript auf beliebige Blockelemente anwenden:

var maskew = new Maskew(document.getElementById("bild"), 10);

Dem Maskew-Objekt werden zwei Variablen übergeben. Die erste Variable enthält das Element, auf das der Effekt angewendet werden soll. Über die zweite Variable wird der Kippwinkel angegeben. Möglich ist ein Winkel zwischen 0 (ergibt ein Rechteck) und 45 Grad.

jQuery-Nutzer haben auch die Möglichkeit, Maskew als Plugin dafür zu verwenden:

var $maskew = $("bild").maskew(10);

Maskew mit Maus verändern

Wer ein wenig Dynamik in sein maskiertes Element bringen möchte, dem steht die Option „touch“ zur Verfügung. Sie sorgt dafür, dass sich das Parallelogramm per Maus verändern lässt. Man kann somit den Kippwinkel manuell anpassen, indem man die Maus mit gedrückter rechter Taste über das Bild bewegt. Ein entsprechender Cursor signalisiert diese Möglichkeit:

var maskew = new Maskew(document.getElementById("bild"), 10, {touch: true});

Fazit: Maskew ist ein netter Effekt, um Bilder und andere HTML-Elemente als Parallelogramme darzustellen, so dass sie sich von den üblichen Formen, die mit HTML und CSS möglich sind, abheben.

(dpe)

Kategorien
JavaScript & jQuery Programmierung

HTML5: Schicke Tooltipps mit Tooltipster für jQuery

Tooltipps sind eine feine Sache. Schließlich ermöglichen sie es, kurze Infos platzsparend genau dort unterzubringen, wo sie wichtig sind. Tooltipster stellt ein jQuery-Plugin zur Verfügung, mit dem sich schnell und einfach sehr ansprechende und individuelle Tooltipps realisieren lassen. Diese sind zudem HTML5-konform und ausschließlich per CSS gestaltet, was eine Anpassung des Aussehens einfach macht.


Tooltipster

Tooltipps über TITLE-Attribut auszeichnen

Tooltipster besteht aus zwei Dateien, einer JavaScript-Datei mit dem jQuery-Plugin und einer CSS-Datei, über die das Layout der Tooltipps angepasst wird. Beide Dateien müssen zusammen mit jQuery im HTML-Head eingebunden werden. Anschließend wird das Plugin gestartet:

$(document).ready(function() {
  $(".tooltip").tooltipster();
});

Im Beispiel wird das Plugin auf alle Elemente mit der Klasse „tooltip“ angewendet. Die Inhalte der Tooltipps werden über das gängige TITLE-Attribut ausgezeichnet. Das Plugin wandelt die Inhalte dieses Attributes anschließend in schicke Tooltipps um, deren Aussehen über die CSS-Datei beliebig angepasst werden kann:

<a href="http://www.drweb.de/" title="Dr. Web Magazin" class="tooltip">drweb.de</a>

HTML im Tooltipp möglich

Wer mehr als reinen Text in einem Tooltipp unterbringen möchte, kann dies mit Tooltipster tun. Das Plugin erlaubt es, HTML-Elemente innerhalb des TITLE-Attributes zu platzieren. Diese werden per JavaScript entsprechend umgesetzt:

<a href="http://www.drweb.de/" title="<img src='drweb.png' width='50' height='50' / class="tooltip">Dr. Web Magazin">drweb.de</a>

Die Auszeichnung mag ein wenig befremdlich aussehen; aber sie funktioniert. Zu beachten ist hierbei lediglich, dass der HTML-Quelltext innerhalb des Tooltipps bei ausgeschaltetem JavaScript als reiner Text ausgegeben wird. Wer sich die Standarddarstellung des TITLE-Attributes als Fallback erhalten möchte, sollte auf HTML im Tooltipp verzichten.

Individuelle Themes und Einstellungen

Neben dem Standard-Theme sind weitere individuelle Themes per CSS möglich. Die Themes werden über den Plugin-Aufruf als Option übergeben:

$(".tooltip").tooltipster({
  tooltipTheme: ".mein-tooltip"
});


Tooltipp mit HTML-Elementen

Außerdem stehen weitere Optionen zur Verfügung, über die das Verhalten der Tooltipps gesteuert werden kann. So kann beispielsweise festgelegt werden, ob der Tooltipp an einer festen Position stehen oder ob er sich am Mauszeiger orientieren soll:

$(".tooltip").tooltipster({
  followMouse: true
});

Fazit: Tooltipster ist ein praktisches Plugin, um schicke Tooltipps ohne großen Aufwand realisieren zu können.

(dpe)

Kategorien
Design Essentials HTML/CSS Icons & Fonts

Weder Grafik, noch Font: Icons aus reinem CSS3 mit One-Div.com

Icons werden auf vielen Websites eingesetzt – machen sie doch gerade bei Links ohne (viel) Text schnell deutlich, was gemeint ist. In Zeiten hochauflösender Displays werden pixelbasierte Icons mehr und mehr durch Vektor-Icons abgelöst. Denn gerade die filigran gestalteten Icons wirken auf kleinen Displays entweder zu klein oder (bei Vergrößerung) sehr schwammig. Neben dem Einsatz von Icon-Webfonts gibt es Icons aber auch als reine CSS3-Inkarnation.


Icongalerie von one-dev.com

Auf der Seite one-div.com gibt es eine Galerie, die Icons ausstellt, die allesamt ausschließlich mit CSS3 realisiert sind. Es handelt sich dabei um teils typische Icons für Bedienelemente, soziale Netzwerke und zur Visualisierung unterschiedlicher Medien. Die Icons sind – auch bedingt durch CSS3 – schlicht gehalten und einfarbig.

Icons mit Quelltext und Hinweisen

Jedes Icon ist mit drei Buttons ausgestattet, über den der HTML- und CSS-Quelltext angezeigt und automatisch in die Zwischenablage kopiert wird. Außerdem gibt es die Möglichkeit, eine fertige HTML- und CSS-Datei mit dem Icon als ZIP-Datei herunterzuladen.

Darüber hinaus wird für jedes Icon ein Hinweis eingeblendet, der Auskunft darüber erteilt, welcher Browser das CSS3-Icon problemlos darstellen kann, wo es Probleme gibt und wo es gar nicht klappt. Der Hinweis wird für Chrome, Firefox, Safari, Opera und den Internet Explorer eingeblendet. Die Betreiber sind bestrebt, die Icons zumindest für Chrome, Safari und Firefox kompatibel zu machen.

Derzeit befinden sich gut 80 CSS3-Icons in der Galerie. Zusätzlich kann jeder selbst Icons einreichen, sodass die Anzahl bei entsprechendem Interesse an dem Projekt sicher noch steigen wird.

Animierte Icons möglich

Der große Vorteil von CSS3-Icons im Vergleich zu Webfont- oder SVG-Icons ist der, dass sie animierbar gemacht werden können – entweder als Hover-Effekt mit der „transition“-Eigenschaft oder als durchgängige Keyframe-Animation per „animation“-Eigenschaft.

Einige wenige bewegte Icons sind in der Galerie enthalten. Bewegung lässt sich aber auch selbst in die Icons bringen. Wer sich mit den Pseudoelementen „before“ und „after“ sowie den CSS3-Transitions auskennt, wird schnell aus einem statischen Icon ein animiertes erstellen können.

Fazit: One-dev.com bietet einige nützliche Icons und viele Anregungen, um selbst Icons per CSS3 gestalten und bei Bedarf animieren zu können.

(dpe)

Kategorien
Design HTML/CSS

Centurion – Neues HTML5/CSS3-Framework für Rapid Responsive Prototyping

Und schon wieder ist ein neues HTML5/CSS3-Framework für die beschleunigte Web-Entwicklung erschienen. Wer soll da noch den Überblick behalten? Centurion wirkt auf den ersten Blick wie eine Mischung aus Twitters Bootstrap und dem 960.gs. Entwickler Justin Hough will Centurion mehr als Boilerplate zur schnellen Theme-Entwicklung verstanden wissen. In der Tat ist es für ein ausgewachsenes Framework im Vergleich zu anderen Vertretern zur Zeit noch etwas schmächtig…

Centurion – Framework oder Boilerplate?

Mir persönlich gefällt Houghs Entscheidung, Centurion mit SASS zu entwickeln und auch so zu publizieren. Immerhin ist Centurion in der Form des browser-lesbaren CSS deutlich komplex. Die Verwendung von SASS erlaubt es dem Entwickler, und insbesondere dem, der das Framework nicht selbst erstellt hat, den Überblick zu behalten.

Nach eigenen Angaben entstand Centurion vornehmlich aus dem eigenen Bedarf. Als Front-End-Entwickler und Mitgründer der Webdesign-Schmiede Room 316 Studios benötigt Hough natürlich stets eine solide Basis für die Entwicklung des nächsten Kundenprojekts. Wie Hough in einem Blogpost zum Framework erläutert, brauchte er Jahre, zu erkennen, dass, ungeachtet der schlussendlichen Optik, allen Web-Projekten Gesetzmäßigkeiten und grundlegende Elemente gemeinsam sind. Diese versuchte er für sich zu erarbeiten. Als Ergebnis entstand Centurion.

Centurion ist so angelegt, dass es prinzipiell die Basis eines beliebigen Themes für ein beliebiges CMS oder auch ein reines Frontend sein kann. Mittlerweile trägt Centurion die Versionsnummer 3 und befindet sich weiterhin in reger Entwicklung. Die letzten größeren Änderungen am Projekt datieren aus der Zeit zwischen Weihnachten und Silvester. Offenbar ist Hough, der sich offensiv zu seinem Glauben bekennt, auch hinsichtlich seiner Projekte sehr leidenschaftlich.

Ungeachtet der Bezeichnung als Framework ist Centurion eher als Boilerplate angelegt, dabei aber nicht so limitiert. Ich denke, Hough würde nicht widersprechen, wenn man Centurion irgendwo in der Mitte zwischen den beiden Ansätzen einordnete.

Sollten Sie übrigens trotz hoher Versionsnummer noch nie von Centurion gehört haben, so wundern Sie sich nicht. Die ersten beiden Versionen des Frameworks verwendete Hough ausschließlich für seine eigenen Projekte. Erst mit der aktuellen Version geht er an die Öffentlichkeit und stellt das Projekt unter den Lizenzen GPL und MIT zur kostenlosen Nutzung auch in kommerziellen Projekten zur Verfügung.

Centurion – starke Anleihen bei Bootstrap und 960.gs

Mich erinnert Centurion an zwei Projekte, die ich bereits seit langem kenne. Das Grid von Centurion erinnert nicht nur von der Ausdehnung mit seinen 960 Pixeln, sondern auch hinsichtlich seiner Syntax an 960.gs, welches ich bereits vor vier/fünf Jahren erstmalig zum Einsatz brachte. Das grafiklose Styling grundlegender Bedienelemente, insbesondere der Buttons erinnert stark an Twitters Bootstrap. Auch der grundlegende Klassen-Ansatz lässt an die großen Vorbilder erinnern.

Will man in Centurion ein Grid definieren, das die 12 verfügbaren Spalten in vier gleiche Container trennt, so verwendet man die Syntax class=“grid–3”. In 960.js würde man den identischen Effekt unter Verwendung von class=“grid_3” erzielen. Anders als 960.gs, das auch mit 16 Spalten arbeiten kann, ist Centurion auf das 12 Spalten-Layout begrenzt.

Neben dem Spalten-Layout ist auch das gesamte optische Styling klassen-basiert. So erreicht man diese schicke Tabellenoptik:

Durch das Hinzufügen dieser Klasse zum Table-Element:

Damit der optische Effekt korrekt funktioniert, muss allerdings auf eine semantisch korrekte Auszeichnung der Tabelle geachtet werden, etwas, das nicht jeder Webdesigner, speziell die, die schon sehr lange dabei sind, gewohnt sein wird. So muss das aussehen:

Table Header
Content This is longer content
Table Footer

Centurion – responsiv mit Media Queries

Hough verspricht voll responsives Verhalten bis hinunter zu 320 Pixeln Bildschirmbreite. Setzte er in der ersten Version des Frameworks noch auf JavaScript, um das responsive Verhalten zu gewährleisten, also Stylesheets per JavaScript in Abhängigkeit von der Screen-Größe zu wechseln, verwendet Centurion seit Version 2 konsequent Media Queries. Das Grid verhält sich sogar im ewigen Sorgenkind Internet Explorer responsiv, die meisten übrigen Elemente allerdings nicht. In der Tat gab sogar responsives Design, respektive dessen radikalere Diktion “Mobile First”, überhaupt erst den Denkanstoß, aus dem sich letztlich Centurion entwickelte.

Schlussendlich kann ich zum jetzigen Zeitpunkt nichts negatives zu Centurion sagen, mit Ausnahme der Tatsache, dass derzeit die Dokumentation hauptsächlich aus Lücken besteht. Das sei einem Projekt, dass seit 10 Tagen öffentlich ist, allerdings verziehen. Die wenigen fertigen Teile der Anleitung lassen indes erkennen, dass Hough den Part sehr ernst nimmt. Was da ist, ist gut. Mit Hilfe der Community soll ein “robustes” (Zitat des Entwicklers) Werk daraus werden, das die Verwendung von Centurion nicht gerade zum Kinderspiel, aber doch so leicht wie möglich machen soll.

Links zum Beitrag:

Kategorien
Essentials Freebies, Tools und Templates

Herr der (drei) Ringe: Ringmark testet Mobilbrowser auf HTML5-Tauglichkeit

Mit HTML5, CSS3 und neuen JavaScript-Methoden lassen sich aufwändige und umfangreiche mobile Webapps realisieren, die nativen Apps für Smartphones und Tablets beinahe in nichts nachstehen. Doch ist Ihr Mobilgerät beziehungsweise dessen Browser gewappnet für zeitgemäße HTML5-Apps? Der Benchmark-Dienst Ringmark findet es heraus.

Ringmark ist eine webbasierte Test-Suite, die für Mobilgeräte optimiert ist, aber natürlich auch auf anderen Geräten funktioniert. In drei Durchgängen, den sogenannten Ringen, fragt Ringmark die unterschiedlichen HTML5- und CSS3-Möglichkeiten ab und gibt aus, welche Funktionen der Browser unterstützt.

Die drei Ringe von Ringmark

Der erste Ring, den der Browser durchläuft, fragt allgemeine Möglichkeiten ab, wie CSS3-Animationen und -Transitions, 2D- und 3D-Transformations sowie die Unterstützung von Canvas. Jeder aktuelle Browser – vom Internet Explorer mal abgesehen – dürfte die erste Stufe des Tests bestehen.

Da hier keine speziellen Funktionen für Mobilgeräte abgefragt werden, haben auch Desktop-Browser mit diesem Test keine Probleme. Der zweite Ring fragt neben weiteren CSS3-Eigenschaften wie Media Queries auch spezielle Funktionen für Mobilgeräte ab. Dazu zählen der Offline-Modus sowie Device-Orientation- und Multi-Touch-Events. Spätestens bei diesen beiden Events wird jeder Desktop-Browser versagen.

Grundsätzlich lässt sich behaupten, dass ein Browser, der den zweiten Ring erfolgreich durchläuft, für Audio- und Video-Apps sowie für 2D-Spiele und Apps mit Webcam-Funktion geeignet ist. Browser, die den dritten Ring fehlerfrei absolvieren, sind bestens geeignet für alle möglichen HTML5-Apps. Dazu gehören 3D-Spiele sowie Messaging- und Video-Streaming-Apps.

Support für verschiedene Browser abfragen

Wer nicht nur seinen eigenen Browser testen will, sondern mehr über die Unterstützung von HTML5 und CSS3 durch andere gängige Mobilbrowser erfahren möchte, kann sich aus einer Liste einen Browser aussuchen und nachschauen, welche Ringe der Browser fehlerfrei absolviert.


Detailansicht

Zu den Browsern, die abgefragt werden können, gehören aktuelle Android- und iPhone-Browser sowie Chrome, Opera und der Internet Explorer – natürlich in der jeweiligen Mobilversion.

Fazit: Ringmark liefert sehr übersichtlich einen Überblick über unterstützte HTML5-Funktionen. In einer Detailansicht kann man sich zudem über Einzelheiten (unterstützte HTML5-Elemente, CSS3-Eigenschaften, APIs etc.) informieren.

(dpe)

Kategorien
Design HTML/CSS

easings.net: Bremsen und Beschleunigen mit CSS3

Mit der Einführung von CSS3 sind auch animierte Hover-Effekte und andere Übergänge möglich. Für die Transitions – wie diese Form der Animationen genannt werden – existieren mehrere vordefinierte Effekte, die sogenannten Easings. Sie unterschieden sich in der Art der Beschleunigung und des Abbremsens der Bewegung. Die Seite easings.net hat eine Reihe zusätzlicher Easings zusammengestellt und liefert den passenden Quelltext dazu.


Übersicht über alle Easings

Zu den Standard-Easings von CSS3 gehören einfache Ease-In- und Ease-Out-Effekte, die Animationen entweder am Anfang und/oder am Ende abbremsen oder beschleunigen. CSS3 ermöglicht jedoch auch die Definition eigener Easings, die über eine individuelle Bézierkurve definiert werden.

Auf easings.net gibt es eine Galerie mit 30 verschiedenen Animationseffekten, die über die Standard-CSS3-Easings hinausgehen. Für jeden einzelnen Effekt steht eine Vorschau zur Verfügung, in der die Bézierkurve dargestellt und die Bewegung beispielhaft ausgeführt werden kann. Außerdem liefert die Seite für jedes Easing den passenden Quelltext gleich mit dazu.

Easings für CSS3 und jQuery-Plugin

Die Easings, die direkt per CSS3 ausgeführt werden können, erlauben nur relativ einfache Bézierkurven. Komplexere Easings, bei denen beispielsweise ein Abfedern oder eine Elastizität in einer Animation dargestellt werden sollen, lassen sich nur mit Hilfe von JavaScript realisieren.

Daher liefert easings.net nicht nur die Bézierkurven für CSS3, sondern immer auch den richtigen Quelltext für das jQuery-Easing-Plugin, welches sehr viel komplexere Animationsübergänge erlaubt. In dem Plugin sind die 30 vorgestellten Easing-Effekte bereits implementiert, weshalb nur der entsprechende Easing-Name angegeben werden muss.

Easings für SASS

Neben der CSS3- und jQuery-Ausgabe bietet easings.net mit der Erweiterung Ceaser Easing Animation auch eine  Ausgabe für das CSS3-Framework Compass. Die Erweiterung ermöglicht es, vordefinierte Easings einfach zu übernehmen, ohne die entsprechende Bézierkurve angeben zu müssen.

Fazit: easings.net bietet eine sehr schöne Zusammenstellung unterschiedlicher Easing-Effekte samt passenden Quelltextes für unterschiedliche Einsätze.

(dpe)

Kategorien
Design HTML/CSS

CSS3: Native Feature-Detection mit @supports

Wer mit CSS3 arbeitet, läuft immer Gefahr, dass ein Browser bestimmte CSS-Eigenschaften nicht interpretieren kann. Das betrifft nicht nur ältere Browser, wie der aktuelle Internet Explorer beweist. Dienste wie Modernizer erkennen, welche Eigenschaften ein Browser versteht und welche nicht. Mit der „@supports“-Regel gibt es jedoch auch eine native Feature-Detection – derzeit allerdings nur für Opera.

CSS-Eigenschaften mit „@supports“ definieren

Mit der „@supports“-Regel ist es möglich festzustellen, ob ein Browser eine bestimmte CSS-Eigenschaft beherrscht. Nur wenn dies der Fall ist, werden die CSS-Regeln, die innerhalb von„@supports“ definiert sind, auch ausgeführt:

@supports (box-shadow: 5px 5px 10px 10px black) {
  div {
    box-shaow: 5px 5px 10px 10px black;
  }
}

Die Eigenschaft in der runden Klammer gibt die zu prüfende Eigenschaft an. Alles, was in der geschwungenen Klammer steht, wird ausgeführt, wenn der Browser die zu prüfende Eigenschaft versteht. Interessant wird die Funktion natürlich erst, wenn man auch eine Alternative ausgeben kann – für den Fall, dass der Browser die Eigenschaft eben gerade nicht unterstützt:

@supports not (box-shadow: 5px 5px 10px 10px black) {
  div {
    border: 1px black;
  }
}

Im Beispiel wird für den Fall, dass ein Browser die Eigenschaft „box-shadow“ nicht unterstützt, ein einfacher schwarzer Rahmen gezeichnet.

Komplexe Abfragen mit AND und OR

Mit der „@supports“-Regel sind auch Abfragen mehrerer Eigenschaften gleichzeitig möglich. Dazu gibt es die beiden Operatoren AND und OR, die sich beliebig kombinieren lassen, um komplexe Abfragen realisieren zu können:

@supports (text-shadow: 5px 5px 5px black) and (box-shadow: 5px 5px 10px 10px black) {
  div {
    text-shadow: 5px 5px 5px black;
    box-shadow: 5px 5px 10px 10px black;
  }
}

@supports (text-shadow: 5px 5px 5px black) and not (box-shadow: 5px 5px 10px 10px black) {
  div {
    border: 1px black;
    box-shadow: 5px 5px 10px 10px black;
  }
}

Wie man es aus Programmiersprachen kennt, ist es möglich, mehrere AND- und OR-Abfragen zu verschachteln, indem man sie in runde Klammern setzt.

Browser-Unterstützung

Derzeit unterstützt nur Opera ab Version 12.10 die „@supports“-Regeln. Mozillas Firefox soll mit der Version 17 folgen. Da beide Browser bereits einen Großteil aktueller CSS-Eigenschaften unterstützen, wird man die „@supports“-Regel erst zukünftig sinnvoll einsetzen können – wenn es mit CSS4 wieder neue Eigenschaften gibt.

(dpe)

Kategorien
Design HTML/CSS Inspiration Showcases

33 schicke kostenlose Webseiten-Vorlagen auf der Basis von HTML5/CSS3

Webseiten-Vorlagen sind gern gesehene Startpunkte für eigene Designbemühungen. Das gilt im Grunde immer, aber ganz besonders, wenn man entweder einen Kunden zufrieden stellen will, der einen Igel in der Tasche hat oder man sich ohne tiefere Kenntnisse selbst an das Design seiner eigenen Website machen will. Auch die Söhne vom Maier aus der Buchhaltung, die bald Abi machen, aber ganz viel Ahnung vom Webdesign haben und schon die Website vom Philatelisten nebenan erstellt haben, sind dem Hörensagen nach stets auf der Suche nach Vorlagen.


Nova

Egal, welcher Gruppe Sie angehören, sie sollten auf jeden Fall mit der Zeit gehen und die Zeichen der Zeit stehen nun einmal ganz klar auf HTML5 und CSS3. Durch die Verwendung dieser Webstandards werden ihre Websites zwar nicht notwendigerweise hübscher, aber auf jeden Fall zukunftssicherer und zugänglicher im Sinne der Barrierefreiheit. Wir zeigen Ihnen deshalb im folgenden Beitrag 33 Vorlagen, die ausnahmslos auf der Basis der neuen Standards arbeiten und kostenlos eingesetzt werden können. Viel Spaß dabei!

HTML5/CSS3: Die vorgestellten Vorlagen im Überblick

(dpe)

Kategorien
JavaScript & jQuery Programmierung

UICloud: Neuer Dienst für Designer und Webentwickler bietet mehr als 25.000 Elemente für die UI-Entwicklung

UICloud ist ein ganz frisches Projekt. Erst im Juli 2012 gestartet, kann es bereits zum jetzigen Zeitpunkt mehr als 25.000 UI-Elemente in mehr als 1.000 Sets vorweisen. Der gesamte Bestand ist kostenlos nutzbar, auf individuelle Lizenzvorgaben ist aber zu achten. Hinter dem Dienst steckt Jack Cai, ein Freelancer, spezialisiert auf Icon- und GUI-Design, der zwar chinesische Wurzeln hat, sich aber dennoch in Southampton ganz wohl zu fühlen scheint. Mit UICloud legt Cai sein Meisterstück vor. Die Plattform ist einfach zu bedienen, intuitiv ist das richtige Wort. Auf UICloud zu stöbern macht regelrecht Spaß. Das Design ist modern und elegant, ie Inhalte übersichtlich angelegt. Genug Gründe also, sich die Plattform einmal näher anzusehen.

UICloud: Die Startseite kommt spontan bekannt vor

Mit einiger Wahrscheinlichkeit wird die Startseite die erste Seite sein, die Sie von UICloud zu sehen bekommen. Mein erster Gedanke war, ich wäre auf einem eben frisch relaunchten Google gelandet. Die Ähnlichkeiten sind offensichtlich: eine große Suchbox in der Mitte, eine dunkle Navigationsleiste am oberen Rand des Browserfensters, eine Schaltfläche mit der Aufschrift „Search“. Aber, warum auch nicht? Usability muss man nicht täglich neu erfinden. Das minimalistische Design, das für Google funktioniert, funktioniert ebenso gut für UICloud.

UIClouds Startseite

Ausgehend von der Startseite gibt es verschiedene Wege, sich dem enthaltenen Content zu nähern. Zunächst könnte man einen freien Suchbegriff verwenden, um zu schauen, welche Ergebnisse diese Vorgehensweise zu Tage fördert. Vorausgesetzt, es wird ein Ergebnis generiert, wäre das selbstverständlich der schnellste Weg zum Erfolg. Ich versuchte es mit dem Begriff „Metro“ und war durchaus zufrieden mit der Rückmeldung. Sowohl Metro UI CSS, wie auch das neue BootMetro Design-Framework ermittelte UICloud. Übrigens nutzte ich absichtlich ein eher spezielles Suchwort, um zu schauen, wie breit UICloud aufgestellt ist. Tippen Sie etwas generisches, wie „progress bar“, werden Sie sich vor Ergebnissen kaum retten können.

UICloud: So kann ein Suchergebnis aussehen

Verlässt man die Startseite, wandert die Suchbox an den oberen Bildschirmrand, wo sie in etwas kompakterer Ausführung von überall her verwendbar bleibt.

UICloud: Andere Wege, relevanten Content zu erreichen

Wenn Sie her zum Stöbern und weniger zum gezielten Suchen neigen, werden Sie von UICloud ebenso bedient. Die Funktion „Browse“ lädt Sie ein, den gesamten Bestand zu durchstöbern. Alle enthaltenen Sets werden in einer grafischen Liste mit lediglich den wichtigsten Informationen dargestellt. Jeweils 24 Inhaltselemente finden sich auf einer Matrix von 6 x 4 Screenshots. Inhalte lassen sich nach verschiedenen Kriterien sortieren. So ist es möglich, die neuesten Einreichungen, die bestbewerteten Pakete oder die populärsten nach Downloadzahlen anzeigen zu lassen. 45 Seiten mit rund 1.100 Sets gewährleisten, dass Sie schnell jede Menge Zeit verbrennen.

UICloud: Browsen durch die neuesten und populärsten Inhalte

Sie haben keine Zeit zu verleren oder suchen nach bestimmten Elementen, etwa Android UI-Elementen? Dann werden Sie wohl auf UIClouds Kategorieansicht zurück greifen. Diese Ansicht zeigt die Inhalte in strukturierter Form. Kategorien, wie Android, Apple, Windows, PSD und andere leiten Sie nicht in die Irre. Über die Wahl der vergebenen Kategorien könnte man streiten. Nicht alle sind offensichtlich sinnvoll.

UICloud: die Kategorieansicht

Unzweifelhaft nützlich ist die zweite Möglichkeit der Kategorie-Navigation. Hier sortiert UICloud Elemente nach ihren Anwendungsbereichen. Die Kategorien lauten Buttons, Forms, Sliders, Switches etc. und lassen wohl keinen Nutzer rätselnd zurück. Eine dritte Möglichkeit erlaubt die Suche nach Farb-Schemata. Das ist nützlich, wenn Ihnen noch das eine letzte Element in einer bestimmten Farbe fehlt.

Auf der Suche nach einer bestimmten Farbe?

UIClouds Einzelansicht: Alle wichtigen Fakten im Überblick

Egal auf welchem Weg man sich dem Gesuchten nähert, am Ende steht eine sehr informative, übersichtlich strukturierte Einzelansicht des UI-Sets.

UIClouds Einzelansicht bietet alle wesentlichen Informationen auf einen Blick

Die Einzelansicht zeigt einen oder mehrere große Screenshots des Elements oder Sets auf der linken Seite des Bildschirms. Bei mehreren Screenshots werden diese unterhalb des initial angezeigten Bildschirmfotos in Form einer Thumbnail-Galerie dargestellt. Rechts angeordnet finden sich die wichtigsten Informationen zum Produkt, darunter vor allem die zu beachtende Lizenz, sowie in welchen Formaten die Sets vorliegen und welche Dateien im Downloadpaket mitgeliefert werden.

Stellen Sie sicher, dass Sie in jedem Falle genau auf die Lizenz achten. Zwar sind alle gelisteten Elemente kostenfrei zu verwenden, allerdings kann es vorkommen, dass sie nicht zu jedem Zweck frei zu verwenden sind. Unser Beispielelement Metro UI CSS steht unter der lberalen MIT-Lizenz, aber andere Sets können teilweise nur für private oder nicht-kommerzielle Zwecke kostenlos verwendet werden.

Das allseits bekannte und bewährte Rating-System auf der Basis zu vergebender Sterne kommt für das Bewertungssystem zum Einsatz, das von den Besuchern des Dienstes ohne Registrierung benutzt werden kann. Die Anzahl der Downloads wird neben der Anzahl der Besucher des jeweiligen Sets angezeigt. Eine Vergabe von Tags ist ebenfalls vorgesehen und kann ebenfalls frei von jedem Besucher vorgenommen werden. In Anbetracht der Lustigkeit verschiedener Mitmenschen wird man sehen, inwieweit Jack Cai dieses Feature auf Dauer halten will.

Links zum Download, zu den Demos und zur Originalquelle des Sets finden sich unterhalb des Screenshot-Bereichs. Alle Ressourcen sind auf UICloud selber gehostet. Auf diese Weise ist das Angebot gut vor 404 und anderen Späßchen, die einem mit extern eingelinkten Inhalten widerfahren können, geschützt. Sollten Sie Zweifel an der Aktualität der hinterlegten Version haben, können Sie natürlich jederzeit auf der Originalquelle nachsehen.

Wie aus dem Blog-Umfeld bekannt, ist es auch auf UICloud möglich, Kommentare zu den angebotenen Elementen und Sets zu hinterlassen. Momentan ist der ommentarbestand insgesamt noch überschaubar. Aber Sie können natürlich jederzeit in die Vollen gehen und den nächsten Flamewar vom Zaun brechen.

UICloud: Jeder kann Sets einreichen

Das schnelle Wachstum der UICloud könnte allein durch die Arbeit einer einzelnen Person nicht erreicht werden. So ist es naheliegend, das Wachstum im Wege des Crowdsourcing zu generieren. Jeder Besucher kann UI-Sets über ein einfaches Formular zur Überprüfung einreichen. Alle Vorschläge durchlaufen einen redaktionellen Prozess, in dessen Verlauf sie geprüft, auf Eignung evaluiert und dann veröffentlicht werden. Da die Einreichung nicht über direkte Uploads, sondern das Posten des Links zur Originalquelle erfolgen muss, sind Urheberrechtsverletzung relativ unwahrscheinlich. Zumindest würden derartige Verletzungen mit hoher Wahrscheinlichkeit im Rahmen der redaktionellen Prüfung auffallen. UICloud wendet sich direkt an die Entwickler der Elemente und ruft sie dazu auf, etwaige Fehler in der Präsentation zu reklamieren oder auch die Entfernung der Sets aus der Plattform zu verlangen, wo sie das für erforderlich erachten.

Natürlich gibt es auch das obligatorische Kontaktformular für Menschen, die typischerweise solche Formulare verwenden…

UICloud: Button Builder – WYSIWYG-Generator für CSS-Buttons

UICloud begnügt sich nicht damit, eine großartige Ressource für das Finden von User Interface Elementen zu sein. Stattdessen bringt einen Baukasten für CSS-Buttons mit, den Button Builder. Hier kann man sich seinen Wunschbutton über eine intuitive grafische Benutzeroberfläche basteln. Es gibt etliche Standard-Vorschläge. Diese können jedoch in vollem Umfang auf die eigenen Bedürfnisse angepasst werden.

Der Button Builder wird Ihnen auf den ersten Blick vertraut vorkommen und stellt insichtlich seiner Bedienung niemanden vor Rätsel:

UIClouds Button Builder

Auf einem Canvas sehen Sie den Button in seiner vorkonfigurierten Darstellung. Wenn Sie jetzt Änderungen durchführen, werden diese unmittelbar auf dem Canvas angezeigt. Unterhalb des Canvas finden sich weitere vorkonfigurierte Button-Vorschläge. Oberhalb des Canvas befinden sich die Schaltflächen, mit deren Hilfe das korrespondierende HTML und CSS generiert wird. Die unscheinbar wirkende, rechts angeordnete Tabelle ist das eigentliche Herzstück des Button Builders. Hier liegt die Funktionalität zum Finetuning der zu erstellenden Buttons. Auf den ersten Blick mag man vermuten, es handele sich um eine statische Tabelle, die lediglich die Werte des angezeigten Buttons listet. Aber klicken Sie mal in die tabelle inein, jeder Wert kann auf einfache Weise angepasst werden.

UICloud: Feineinstellung für die CSS Buttons

Zwar können wir nicht wirklich eine Knappheit an Generatoren für CSS-Output im Web erkennen, ähnlich ausgerichtete Tools gibt es wie Bäume im Wald, aber UIClouds Button Builder hebt sich von der Masse ab und ist eine sehr intuitiv bedienbare Web App. Zumindest ist es die beste App für diesen Anwendungsfall, mit der ich bis jetzt gearbeitet habe.

UICloud: das generierte CSS

Jack Cai erzählte mir, dass der Button Builder nur der Anfang einer ganzen Serie von kleinen Generatoren sein wird. In naher Zukunft soll es auf UICloud möglich sein, auch Tabs, Menus, Fortschrittsbalken und einiges mehr generieren zu lassen.

Social Media: UICloud informiert auf mehreren Wegen über Neuzugänge im Bestand

Wollen Sie auf dem Laufenden bleiben, was sich bei UICloud so alles tut, so stehen Ihnen zu diesem Zweck mehrere Möglichkeiten zur Verfügung. Da wären erst einmal Twitter oder Facebook. Aber auch ein RSS-Feed, sowie eine Mailing-Liste – old-school par excellence – stehen zur Verfügung.

Welchen Weg Sie auch wählen, wählen Sie einen!

Links zum Beitrag:

Kategorien
Design HTML/CSS JavaScript & jQuery Programmierung

Makisu – Sushi-inspiriertes CSS 3D Navigations-Konzept mit jQuery

In den vergangenenen Monaten sind immer wieder mal CSS-Experimente in den Umlauf gebracht worden. Mir persönlich gefiel bis zum heutigen Tage stets Paperfold CSS am besten, aber auch Meny und andere, eher spielerische Ansätze stellten wir unseren Lesern vor. Makisu, ein ganz frisches Konzept für eine Dropdown-Navigation mit 3D Transforms, hat in meiner Gunst nun Paperfold CSS abgelöst; selten sowas schickes gesehen.

Makisu – die virtuelle Bambusmatte

Justin Windle aka soulwire aus dem Vereinigten Königreich legt mit Makisu ein Konzept für eine dreidimensionale Dropdown-Navigation vor, die Paperfold CSS ähnelt, aber darüber hinaus geht und auch optisch ausgereifter wirkt. Der merkwürdige Name entstammt dem Japanischen. Als Makisu werden Bambusmatten bezeichnet, mit deren Hilfe spezielle Sushi-Sorten hergestellt werden. Makisus können aber auch simpel zum Auspressen überschüssiger Feuchtigkeit aus etwa Früchten verwendet werden.

Justin Windles Makisu ist zwar weder für die Herstellung von Sushi, noch für das Auspressen von Früchten geeignet, zeigt aber optisch deutlich, warum der Name dennoch gerechtfertigt ist. Die Navigations-Dropdowns enthalten pro Zeile ein Item, das ein- und ausgerollt werden kann, wobei die Animation beim Entrollen nach hinten überschwingt und so tatsächlich einer nach unten ausrollenden Bambusmatte ähnlich sieht.


Screenshot während der laufenden Animation

Makisu ist als CSS-Konzept angelegt und verwendet CSS 3D Transforms, weshalb es derzeit nur in den aktuellen Versionen Chromes, des Firefox, Safaris, iOS und Android, sowie Blackberry, jeweils in deren Standardbrowsern, funktioniert. Auch der aktuelle Internet Explorer 10 soll Makisu darstellen können. Auf einem frischen Ultrabook, das ich derzeit teste, probierte ich es aus. Das Ergebnis ist durchwachsen. Das Ein-und Ausklappen der virtuellen Bambusmatte funktioniert zwar, aber der Nachschwingeffekt ist komplett abwesend. Zudem wirkt die ganze Animation schwerfällig. Der Internet Explorer bleibt sich also auch in seiner neuesten Inkarnation treu. Schön, wenn auf etwas Verlass ist.

Um Makisu einfacher einsetzbar zu gestalten, verpackte Windle die Funktionalität in ein jQuery-Plugin. In der Tat ist es auf diese Weise sehr simpel zu implementieren. Nachdem jQuery und das Plugin im Head des HTML-Dokumentes aufgerufen wurden, ist lediglich noch der Function-Call erforderlich. Dieser sieht in einer einfachen Variante so aus:

$( '.list' ).makisu({
    selector: 'li',
    overlap: 0.2,
    speed: 0.8
});

Die wichtigste Angabe stellt die Wahl des Selektors dar. In der Regel wird man hier das auch ansonsten zu Navigationszwecken etablierte Li-Element wählen. Die anderen Optionen befassen sich mit Geschwindigkeit und Überlappung. 3D-Effekte werden über die perspektivische Verzerrung mittels perspective und über Vertex Shading mit shading erzielt.

Makisu steht auf Github zum Download und zur kostenfreien Verwendung bereit. Es ist erst seit wenigen Tagen erhältlich und stellt ein Konzept dar. Vor dem Produktiveinsatz muss daher gewarnt werden. Aber schick aussehen tut es allemal…

Links zum Beitrag: