Kategorien
Apps HTML/CSS JavaScript & jQuery Responsive Design Webdesign

Progressive Web Apps: Mit HTML5 und JavaScript zur fast nativen App

Native Apps für Android- und iOS-Geräte haben in vielerlei Hinsicht große Vorteile gegenüber per HTML5 und JavaScript entwickelter Webanwendungen.

Kategorien
HTML/CSS Responsive Design Webdesign

Modernes Webdesign: Diese Fehler solltest du vermeiden

Webdesign und -entwicklung haben sich in den vergangenen Jahren enorm geändert. Daran ist vor allem auch das mobile Internet verantwortlich, was die Art und Weise, wann und wie wir das Internet nutzen, verändert hat. Vieles, was vor zehn Jahren noch gängig war, gilt heute als überholt. Selbst vieles, was vor zwei bis drei Jahren noch völlig aktuell war, gilt heute als veraltet. Welche Dinge solltest bei der Gestaltung und Entwicklung moderner Websites lieber nicht (mehr) machen?

Layouts nur für Desktopgeräte und Smartphones

Die Zeiten, in denen du deine Website nur für eine Ansicht entwickelt hast, sind ja nun schon lange vorbei. Und man findet mittlerweile nur noch wenige Websites, die ohne responsives Layout auskommen.

Doch häufig werden beim responsiven Layout nur zwei Geräte- beziehungsweise Displaytypen berücksichtigt: der klassische Monitor und das Smartphone. Dabei erhält zumindest das Desktoplayout eine feste Breite, während das mobile Layout häufig auf die gesamte Breite des Browserfensters ausgedehnt wird.

Die Unterscheidung nur zwischen Desktop und Smartphone ist mittlerweile jedoch viel zu kurz gegriffen. Denn es gibt mit Tablets und Phablets mittlerweile eine Vielzahl unterschiedlicher Geräte mit diversen Auflösungen. Die Unterscheidung zwischen nur zwei Typen wird dieser Entwicklung nicht gerecht. Daher solltest du dein Layout so flexibel halten, dass es auf allen Auflösungen funktioniert.

Auf großen Monitoren sollte dein Layout keine verschwenderisch großen Ränder links und rechts haben. Und auf Tablets sollte nicht das Layout für Mobilgeräte dargestellt werden.

Eigene Mobilversion deiner Website

Bleiben wir beim mobilen Webdesign. Als die Möglichkeiten responsiver Websites noch sehr eingeschränkt waren, wurden eigene Mobilversionen für Websites entwickelt. Noch heute haben vor allem große Newsportale immer noch eigene Mobilversionen, die meist über eine eigene Subdomain zugänglich sind.

Hier ergibt sich natürlich dasselbe Problem mit den Layouts. Darüber hinaus sind immer zwei Versionen einer Website zu pflegen. Und häufig funktioniert die Ausgabe der richtigen Version nicht. Da wird auf Tablets gerne mal die Mobilversion geladen, obwohl die Auflösung eigentlich problemlos die Desktopversion anzeigen könnte.

Inhalte fürs mobile Internet verstecken

Websites werden zunehmend komplexer. Das gilt für den Inhalt, aber auch für die Gestaltung. Großformatige Bilder und Grafiken werden kombiniert mit mehrspaltigen Texten und zusätzlichen Sidebars.

Und auch der Unterschied zwischen den Display- beziehungsweise Monitorgrößen wird immer größer. So gilt es heutzutage, Websites zu gestalten, die auf großen Monitoren ebenso gut aussehen wie auf kleinen Smartphones.

Das ist durchaus eine Herausforderung. Viele Webdesigner gehen da einen einfachen, aber nicht empfehlenswerten Weg. Angeblich verzichtbare Inhalte werden auf Smartphones einfach versteckt. Das mag im ersten Moment sinnvoll sein, um die Übersichtlichkeit einer Website auf einem Smartphone zu gewährleisten.

Aber da Websites oft häufiger mobil besucht werden als über einen Desktoprechner, ist dieses Vorgehen natürlich nicht im Sinne des Besuchers. Daher sollten auf Smartphones keine Inhalte vorenthalten werden. Vielmehr solltest du schauen, wie du alle Inhalte platzsparend und übersichtlich präsentierst. So kannst du Slider einsetzen oder Inhalte über eine Sidebar ausblenden und per Button einblenden lassen.

Fenster und Videos ungefragt über den Inhalt legen

Zu einer regelrechten Unsitte haben sich sogenannte „Modal Boxes“ entwickelt, die beim augenscheinlichen Verlassen einer Seite über den gesamten Inhalt selbiger gelegt werden. In solchen Bereichen wird dann beispielsweise auf den Newsletter oder auf irgendwelche Angebote hingewiesen.

Wenn man tatsächlich dabei ist, eine Seite zu verlassen, sind sie nicht störend. Wer aber nur versehentlich die Maus aus dem oberen Bereich der Seite hinausbewegt, wird bereits mit einem solchen Screen belästigt.

Wer seine Besucher also nicht verärgern will, sollte auf diese Pop-ups des modernen Webdesigns verzichten – so schön sie auch für einen Betreiber einer Website sein mögen.

Gleiches gilt für Videos, die ungefragt den Inhalt einer Website verdecken.

Einfache Auflösungen und falsche Bildformate

Das Internet ist nicht nur mobiler geworden; es ist auch hochauflösender geworden. Bei Displays und Monitoren spielt längst nicht mehr nur die Größe eine Rolle, sondern auch die Auflösung. So nimmt die Pixeldichte zu und die Auflösung wird immer schärfer.

Bei Bildern macht sich das zunehmend bemerkbar. In einfacher Auflösung sieht ein Bild auf einem hochauflösendem Display verwaschen und unscharf aus. Doch HTML5 und CSS3 erlauben es dir, Bilder für verschiedene Pixeldichten zu hinterlegen.

Nutze diese Möglichkeit, damit deine Website auch auf neuen Geräten nicht nur gut aussieht, sondern auch gestochen scharf ist. Wähle zudem das richtige Format für deine Bilder und Grafiken aus. Nutze JPEGs für Fotos, PNGs für Grafiken und SVGs für Vektorzeichnungen.

Systemschriften und zu kleine Schriften

Seit es Webschriften nach vielen Jahren in alle Browser geschafft haben, ist die Verwendung von Systemschriften nicht mehr nötig. Es gibt unzählige kostenlose und kostenpflichtige Schriften, die du in dein Webprojekt übernehmen kannst. Achte darauf, dass du es diese Schriften im neuen Format WOFF2 gibt. Dieses löst das bisherige Standardformat WOFF ab und ist dank besserer Komprimierung noch platzsparender. Und das ist gerade im mobilen Internet ein großer Vorteil.

Achte zudem darauf, dass du Schriften nicht zu klein einsetzt. Vor allem setze nicht auf eine einheitliche, feste Schriftgröße. Auf Smartphones sollten Schriften eine andere Größe haben als auf großen Monitoren.

Den Besucher warten lassen

Heutzutage erwartet man zurecht, dass Websites sich schnell aufbauen. Daher solltest du deine Website so entwickeln, dass sie schnell geladen wird. Optimiere Bilder und verwende das richtige Format.

Nutze Techniken wie das „<picture>“-Element, um immer passend große Bilder auszuliefern. Lade auf Smartphones Bilder in kleinerer Auflösung und nicht in einer Auflösung, wie sie auf einem großen Monitor benötigt wird.

Achte darauf, dass JavaScript die Ausgabe von HTML nicht blockiert oder verlangsamt und versichere dich, dass extern eingebundene Dateien deine Ladezeiten nicht negativ beeinflussen.

Kategorien
Design HTML/CSS JavaScript & jQuery Programmierung

Demnächst auf Ihrem Bildschirm: CSS3-Animations mit der neuen JavaScript-Methode animate()

Seit CSS3 sind Animationen in HTML-Dokumenten kein Problem mehr. Mit der „@keyframes“-Regel werden verschiedene Eigenschaften wie Position oder Größe eines HTML-Elementes definiert. Die dazugehörige „animation“-Eigenschaft sorgt dafür, dass die in den Keyframes festgelegten Eigenschaften in Bewegung geraten. Ganz ohne JavaScript und Plug-ins erstellen Sie so auch durchaus komplexe Animationen, die in allen modernen Browsern problemlos laufen. Problematisch wird es, wenn JavaScript ins Spiel kommen soll, um CSS3-Animationen zu erzeugen. Dabei ist JavaScript gerade für Animationen ein oft unverzichtbares Werkzeug. Denn manchmal müssen oder sollen einzelne Werte oder ganze Animationsabläufe errechnet werden.

css3_javascript_animate

CSS und JavaScript mit „animate()“-Methode kombinieren

Die neue „animate()“-Methode von JavaScript ermöglicht es, Animationen ausschließlich per JavaScript zu realisieren – allerdings unter Verwendung von CSS-Eigenschaften, um einzelne Keyframes für eine Animation zu definieren.

document.getElementById("element").animate([
  {height: "0"},
  {height: "100%"}
], {
  duration: 3000,
  iteration: 2,
  delay: 1000
});

Im Beispiel wird einem Element die Methode „animate()“ zugewiesen. Innerhalb eckiger Klammern werden beliebig viele Zustände einer CSS-Eigenschaft definiert – im Beispiel sind es Angaben für die Eigenschaft „height“. Jede Angabe wird als Objektliteral dargestellt. Es dürfen hierbei immer nur Werte für eine einzige CSS-Eigenschaft angegeben werden. Eine Kombination von „height“ und beispielsweise„width“ ist nicht möglich.

Zu beachten ist, dass die Werte für die CSS-Eigenschaften immer in Anführungszeichen stehen müssen. Die CSS-Eigenschaften selbst müssen JavaScript-konform angegeben werden, also „backgroundColor“ statt „background-color“.

In einem weiteren Objektliteral, das nach der eckigen Klammer folgt, werden Eigenschaften für die Animation definiert. Dazu gehören die Animationsdauer „duration“, die Anzahl der Wiederholungen „iteration“ sowie optional eine Verzögerung „delay“, welche festlegt, wann die Animation beginnen soll. Zeitangaben werden hierbei wie üblich in Millisekunden angegeben.

Mehrere Keyframes und ihre Dauer definieren

Für jede zu ändernde Eigenschaft muss die „animate()“-Methode separat aufgerufen werden. Will man neben der Höhe auch die Breite ändern, muss dies über einen erneuten Aufruf geschehen.

document.getElementById("element").animate([
  {width: "0", offset: 0},
  {width: "10%", offset, 1/3},
  {width: "100%", offset: 1}
], {
  duration: 3000,
  iteration: 2,
  delay: 1000
});

Im Beispiel wird für das Element die Breite geändert. Für die Animation sind drei verschiedene Zustände definiert. Die Breite soll von 0 über 10 Prozent bis 100 Prozent per Animation verändert werden. Die zusätzliche Option „offset“ gibt an, wieviel Zeit jeder definierte Zustand erhalten soll.

So wird die Animation von 0 zu 1o Prozent ein Drittel der Animation dauern, die Animation von 10 zu 100 Prozent zwei Drittel der Animation. Ausschlaggebend ist immer die Gesamtdauer der Animation, die per „duration“ angeben wird. In diesem Fall wird der erste Teil der Animation eine Sekunde dauern (ein Drittel von 3 Sekunden), der zweite Teil zwei Sekunden.

Statt den Wert für „offset“ als Bruch anzugeben, ist auch die Angabe als Dezimalzahl möglich. Der Wort muss hierbei zwischen 0 und 1 liegen, zum Beispiel „0.33“ statt „1/3“.

Weitere Animationsoptionen

Die „animate()“-Methode kennt weitere Optionen, um die Bewegung zu steuern, die auch von der CSS3-Eigenschaft „animation“ bekannt sind. So lassen sich die Richtung der Animation und die Beschleunigung definieren. Außerdem kann bestimmt werden, ob nach Ablauf der Animation wieder der Ausgangspunkt der Animation gezeigt werden soll.

document.getElementById("element").animate([
  …
], {
  duration: 3000,
  iteration: 2,
  delay: 1000,
  direction: "reverse",
  easing: "ease-in",
  fill: "forwards"
});

Der Wert für „direction“ gibt die Animationsrichtung an. So wird bei „reverse“ die Animation rückwärts abgespielt. „alternate“ spielt die Animation zunächst vorwärts, dann rückwärts ab. Und „alternate-reverse“ kombiniert die letzten beiden Werte.

Für „easing“ sind die gängigen Easing-Methoden von CSS3 möglich, also „ease-in“, „ease-out“ etc. Standardmäßig wird die Animation linear – also ohne Beschleunigung und Abbremsung – aufgeführt. Der Wert für „fill“ bestimmt, was nach Ablauf der Animation dargestellt werden soll. Standardmäßig wird der Ausgangspunkt der Animation wieder aufgerufen. Mit „forward“ bleibt nach Abschluss der Animation das letzte Keyframe der Animation stehen.

Animation steuern

Wird die „animate()“-Methode einer Variable zugewiesen, hat man die Möglichkeit, die Animation per JavaScript zu steuern. So ist es möglich, die Animation abspielen und stoppen zu lassen.

var animation = document.getElementById("element").animate([
  {height: "0"},
  {height: "100%"}
], {
  duration: 3000,
  iteration: 2,
  delay: 1000
});

document.getElementById("animation_start").addEventListener("click", function() {
  animation.play();
}, false);

document.getElementById("animation_pause").addEventListener("click", function() {
  animation.pause();
}, false);

Die Animation wird im Beispiel der Variable „animation“ zugewiesen. Anschließend werden zwei Elementen mit der ID „animation_start“ und „animation_pause“ Event-Listener zugewiesen, die dafür sorgen, dass beim Klick auf die Elemente die jeweils angegebenen Funktionen ausgeführt werden. Per „play()“ wird die Animation abgespielt, mit „pause()“ wird sie angehalten.

Außerdem ist es mit „reverse()“ möglich, die Animation rückwärts laufen zu lassen. Per „cancel()“ kann die Animation abgebrochen werden. Wird die Animation per „play()“ dann wieder gestartet, beginnt sie von vorne. Darüber hinaus nutzen Sie „finish()“, um die Animation zum Ende zu bringen, indem das letzte Keyframe angesteuert wird.

Event-Listener reagiert auf das Ende der Animation

Wer auf das Abspielende einer Animation reagieren möchte, kann den Event-Listener „finish“ nutzen. Dieser führt eine zu definierende Funktion aus, sobald das Ende einer Animation erreicht ist.

animation.addEventListener("finish", function() {
  alert("Die Animation wurde beendet.");
}, false);

Im Beispiel wird einfach eine Meldung ausgegeben, sobald das Ende der Animation erreicht ist.

Browser-Support

Die „animate()“-Methode ist derzeit noch in einem experimentellen Stadium und wird daher erst ab Chrome in der Version 36 implementiert sein. Wer es testen will, installiert sich Chrome Canary, die Entwicklerversion von Chrome.

(dpe)

Kategorien
Design Essentials Freebies, Tools und Templates HTML/CSS

Cody – Freie Bibliothek mit HTML5-Juwelen zur sofortigen Verwendung

Cody ist ein großartiges Projekt für Designer und Entwickler. Die beiden Webworker Claudia Romano und Sebastiano Guerriero aus London stellen damit eine Bibliothek auf die Beine, die HTML5-Lösungen zur sofortigen Verwendung bereit stellt. Dabei liefern die beiden Entwickler nicht nur den Download der jeweiligen Elemente, sondern stets auch sehr ausführliche Erläuterungen dazu mit. So ist Cody insbesondere all denen zu empfehlen, die nicht nur nach einer Instantlösung für ein aktuelles Designproblem suchen, sondern sich tatsächlich inhaltlich weiterbilden wollen. Die Auswahl ist noch klein, aber die Herangehensweise weiß zu beeindrucken…

ASaasAS

Cody: Umfassende Erläuterungen zu jeder einzelnen Lösung

Claudia Romano und Sebastiano Guerriero, Web-Entwickler und UI-Designer aus Italien, sind die Gründer des Londoner Zwei-Mann-Studios Amber Creative. Während sich die beiden ganz konventionell von Designaufträgen ernähren, fanden sie dennoch Zeit und Muße, ein außergewöhnliches Projekt zu starten. Ende Mai 2014 entließen sie es in die freie Wildbahn des Netzes. Es hört auf den Namen Cody.

Cody ist angelegt als Bibliothek nutzbarer HTML5-Teillösungen. Aktuell finden sich lediglich sechs Elemente, darunter ein modales Fenster mit einem Login-/Signup-Formular und ein Einkaufswagen, der von der rechten Bildschirmseite off-canvas reinanimiert wird. Zwei weitere Lösungen kündigte Claudia Romano via Twitter für diese Woche an. Zudem gilt der Aufruf an uns alle, sich quasi etwas zu wünschen oder sogar selbst tätig mitzuwirken.

cody-latestresources

Neben der Bereitstellung der gezippten Downloads der jeweiligen Lösung, erklären die beiden Betreiber in aufwändigen Beiträgen Schritt für Schritt die Vorgehensweisen, die erforderlich sind, um das jeweilige Element in die eigene Seite einzubauen. Dabei erhalten Sie auch die wichtige Information, welcher Browser in der Lage ist, fehlerfrei damit umzugehen. Ein Changelog unter jedem Beitrag dokumentiert den Stand der Bearbeitung. Etwa aufgetretene Fehler und Inkompatibilitäten werden dort festgehalten und mit ihrem Korrekturdatum vermerkt. Disqus wird als Kommentarsystem eingesetzt. In den Kommentaren leisten Claudia und Sebastiano sogar noch Support.

cody-example

Das ist alles sehr vorbildlich und extrem aufwändig. Deshalb wollen wir uns mal nicht darüber beschweren, dass sich bislang lediglich sechs Elemente in der Bibliothek finden lassen. Eine Freitextsuchfunktion ist jedenfalls schon mal implementiert, bislang natürlich nicht erforderlich.

Sollte der Elan das Projekt nicht verlassen, entwickelt sich hier sicherlich eine der spannenderen Ressourcensammlungen für Designer und Developer, die mit englischsprachigen Texten etwas anzufangen wissen. Cody ist jedenfalls ein Pflicht-Bookmark, insbesondere für die Lernbegierigen unter Ihnen.

Links zum Beitrag:

Kategorien
Design HTML/CSS JavaScript & jQuery Programmierung

Magic.css: CSS3 Animations mit Spezialeffekten

Seit Juli letzten Jahres arbeitet Christian Pucci aka miniMac an seinem Stylesheet mit Spezialeffekten auf Basis von CSS3 Animations. Konnte er zum Start lediglich eine Handvoll vorweisen, bringt es seine Sammlung mittlerweile auf stattliche 55 Effekte, die komplett geprefixed in allen modernen Browsern funktionieren. Das Projekt steht unter MIT-Lizenz, kann also frei verwendet werden.

magic-demo-site

Magic.css: Viel Bewegung auf der Website

CSS3 Animations sind im Kommen, aber noch nicht so weit verbreitet, wie man glauben könnte. Vor einigen Tagen erst stellten wir hier bei Dr. Web einen leicht verständlichen Pocket-Guide für Einsteiger in CSS3 Animations vor. Christian Pucci aus Italien, auf Github und auch sonst im Web unter dem Pseudonym miniMac unterwegs, erleichtert den Einsatz mit seinem stetig wachsenden Stylesheet Magic.css ganz ordentlich.

Von einem halben Dutzend Effekte im Juli 2013 steigerte er den Umfang auf 55 Effekte im Mai 2014. Neben den eigentlichen Effekten lässt sich noch die Zeitdauer der Ausführung, respektive bis zur Ausführung steuern. Die eigentlichen Effekte setzt man dann am einfachsten per JavaScript, also etwa mit jQuery um.

Auf der Demoseite zum Projekt können Sie alle verfügbaren Effekte ausprobieren, wenn auch die Umsetzung der Demo nur wenig beeindruckt. Ein roter Diamant wird auf die unterschiedlichen Weisen in das umgebende Quadrat hinein- oder hinausbewegt. Da hätte man sich etwas spannenderes vorstellen können. Sei’s drum, das Prinzip wird jedenfalls klar.

magic-einzeldemo
Magic.css Demo: Rechts den Effekt klicken, links den Diamanten in Bewegung sehen

Magic.css: weitere Effekte in Arbeit

Christian schraubt aktuell intensiv an dem Repository. Man wird wohl in Kürze mit weiteren Effekten rechnen dürfen. Das Stylesheet enthält alle Definitionen mit den erforderlichen Prefixes für alle modernen Browser, während die Demoseite selber zuverlässig nur im Chrome und Safari funktioniert.

Derzeit arbeitet Christian an der minifizierten Version, um die knapp 100 kb des Stylesheets nach unten zu drücken. Die minifizierte Datei liegt zwar schon im Repository, ist aber noch leer.

Magic.css vereinfacht die Anwendung von CSS3 Animations deutlich und gehört auf jeden Fall in Ihre Bookmark-Sammlung.

Links zum Beitrag

Kategorien
JavaScript & jQuery Programmierung

Unausweichlich: 10 aktuelle JavaScript-Lösungen, an denen ich nicht vorbeikam

Haben Sie schon “You might not need jQuery” gelesen? Diese Site hat bekanntlich in den letzten Wochen einige Wellen geschlagen. Grundtenor der Aussage ist, dass man sich besser damit beschäftigen sollte, die Fähigkeiten moderner Browser direkt aka standardkonform anzusprechen, anstatt sich auf jQuery zu verlassen, um damit im Grunde dasselbe Ergebnis zu erzielen. Ich finde den Ansatz zwar nachvollziehbar und ansprechend, aber. Welcher Developer kann schon sicher sagen, welcher Browser nicht für die Nutzung der Seite verwendet werden wird? Ich tue mich schwer, jQuery zu verbannen, bin jedoch von jeher auch stets den JavaScript-Lösungen zugetan, die eben nicht auf dem Framework (oder einem anderen) basieren. Derzeit würde ich nicht empfehlen, sich auf pures CSS zu verlassen, selbst wenn es theoretisch machbar erscheint. Ohne JavaScript kommt man ohnehin nicht aus, also wieso sollte es man nicht zusätzlich da nutzen, wo es sinnvoll ist? Die folgenden Scripts haben mich in letzter Zeit besonders überzeugt…

JavaScript: Wieso denn nicht?

Die Verwendung von JavaScript ist nicht nur da sinnvoll, wo es keine anderen guten Optionen gibt. Die Verwendung von JavaScript, so wie ich sie verstehe, is schon da sinnvoll, wo andere Lösungen komplexer sind, mehr Codezeilen benötigen oder in anderer Weise hinter JavaScript zurückfallen. Bevor ich mir die Pfoten an 10 Zeilen Prefixed Code breche, nehme ich ein gutes JavaScript. Die meisten Projekte, an denen ich (mit)arbeite, setzen ohnehin auf jQuery, insofern stellt sich die Frage nach der Nutzung bereits vorhandener Funktionalität zumeist gar nicht erst. Einige meiner kleineren Projekte verzichten zwar auf jQuery, nutzen aber JavaScript auf die ein oder andere Art. Auch da gibt es also keinen Grund, auf JavaScript zu verzichten, selbst wenn ich es könnte.

Bevor ich noch den Eindruck erwecke, hier missionieren zu wollen, lassen Sie sich von den folgenden Tools überzeugen. Links zu Demo und Repository finden Sie unterhalb des Beitrags im Abschnitt "Links zum Artikel":

ProgressJS

progressjs-w550

ProgressJS ist eine JavaScript- und CSS3-Bibliothek zur Erstellung und Verwaltung von optisch sehr ansprechenden Fortschrittsbalken für beliebige Objekte innerhalb einer Seite. Afshin Mehrabani aus Teheran veröffentlichte das Tool Mitte Februar 2014. Es befindet sich noch im frühen Beta-Stadium.

Die Verwendung ist einfach. ProgressJS kann für die ganze Seite eingesetzt werden. In diesem Modus zeigt das Script einen Fortschrittsbalken am oberen Ende des sichtbaren Browserfensters. Nachdem Sie ProgressJS und das zugehörige CSS eingebaut haben, aktivieren Sie das Tool für diesen Anwednungszweck so:

progressJs().start();

Soll ProgressJS nur ein spezielles Element behandeln, sieht der Call etwas anders aus:

progressJs("#targetElement").start();

Schauen Sie sich die Demo an und laden das Script von Github herunter. ProgressJS steht unter MIT-Lizenz und ist daher kostenfrei privat, wie kommerziell verwendbar.

WOW.js

wowjs-w550

Wow.js versteckt HTML-Elemente bis sie den Viewport erreichen. Warum Sie das wollen sollten? Nun, es bringt etwas Leben in Ihre ansonsten sehr statischen Webseiten.

Um Animationen zu verwenden, setzt Wow.js auf separate CSS Animations-Bibliotheken. Im Standard wird Animate.css verwendet. Sie können eine Bibliothek Ihrer Wahl verwenden, indem Sie den entsprechenden Embed-Link ändern.

Nachdem Sie Wow.js eingebettet und wie folgt initialisiert haben,


ist es betriebsbereit und wartet auf Elemente, die mit der Klasse wow ausgestattet sind. Diese Elemente werden von nun an unsichtbar gehalten, bis der Benutzer weit genug gescrollt hat, dass sie eigentlich sichtbar sein müssten. Sobald das passiert, werden die Elemente sichtbar gemacht.

Damit das dann auch dem Auge schmeichelt, können Sie verschiedene Animationen auf das Element loslassen:

Mein toller Inhalt wird jetzt sichtbar

Wow.js wurde ersonnen vom bekannten Vincent LeMoign aka Webalys und geschrieben von Matthieu Aussaguel. Es steht ebenfalls zur kostenfreien privaten und kommerziellen Nutzung unter der MIT-Lizenz zur Verfügung.

Dug.js

dugjs-w550

Rogie King aus dem amerikanischen Montana suchte einen Weg, sein Dribbble-Portfolio auf seiner eigenen Webseite zu zeigen. Er fand heraus, dass Dribbble JSONP-kompatible Feeds anbietet und ersann daraufhin Dug.js. Dieses kleine JavaScript ist in der Lage, beliebige JSONP-Feeds auszulesen und ansprechend aufbereitet anzuzeigen.

Alles, was Sie benötigen, ist eine JSONP-kompatible API und ein HTML-Template für die Anzeige. 500px, Instagram, Pinterest, Dribbble (offensichtlich), Github – alle bieten JSONP. Mit Dug.js erstellen Sie nun auf einfache Weise einen Output des Feeds für Ihre Seite, etwa so:

Weitere Parameter zur verfeinerten Steuerung stehen bereit. Auch Dug.js steht kostenfrei zur Verfügung. Hier gilt sogar die erstaunliche WTFPL (do What The Fuck you want to Public License). Hmm ;-)

Zoomerang.js

zoomerangjs-w550

Evan You, der Macher von Zoomerang, lebt in New York und arbeitet für Google. Zoomerang.js fokussiert sich auf eine einzige Aufgabe, tut das jedoch besonders gut. Das JavaScript erlaubt es Ihnen, beliebige Elemente auf Ihrer Seite ein- und wieder auszuzoomen. Dabei ist es egal, um was für eine Art Element es sich handelt, sei es ein Bild, ein Text oder was auch immer. Dabei bleibt die eigentliche Seite scrollbar. Ein- und Auszoomen funktioniert nach dem Schalter-Prinzip, ein Klick auf ein Element zoomt ein, ein erneuter Klick zoomt wieder aus.

Zoomerang.js steht zum Download auf Github bereit und kann kostenfrei privat und kommerziell unter den Bedingungen der MIT-Lizenz genutzt werden.

Placeholdem

placeholdem-w550

Der Webentwickler Jack Rugile aus Denver im amerikanischen Colorado wollte, dass Platzhalter in Eingabefeldern nicht nur verschwinden, sobald der Focus auf dem Eingabefeld liegt, sondern auch wieder sichtbar werden on Blur. Zudem wollte er nicht nur ein simples Ausblenden und Einblenden, sondern legte Wert auf ein inkrementelles Löschen und Zurückschreiben. Und genau das tut Placeholdem.

Fügen Sie einen Platzhalter zu einem Eingabefeld oder einer Textarea hinzu:

Dann lassen Sie Placeholdem auf alle Elemente mit Platzhaltern los:

Placeholdem( document.querySelectorAll( '[placeholder]' ) );

Das ist schon alles. Placeholdem kann kostenlos privat und kommerziell genutzt werden. Es gelten die Bedingungen der MIT-Lizenz.

scrollReveal.js

scrollrevealjs-w550

scrollReveal.js von Julian Lloyd aus dem sonnigen Kalifornien ist derzeit eher ein Experiment, denn eine robuste Lösung. Dennoch, was man sieht, ist durchaus viel versprechend. scrollReveal animiert Elemente beim Eintritt in den Viewport. Uninteressant? Schauen Sie sich die Demo an.

Worin sich scrollReveal.js von anderen ähnlichen Lösungen absetzt, sind die weichen Animationen, die noch dazu natürlich-sprachlich definiert werden. Hier ist ein Beispiel:

Foo
Bar
Baz

Wollen Sie nicht jedesmal auf’s neue längere Definitionen verfassen, können Sie per var config Animationen vordefinieren.

Auch scrollReveal steht unter der MIT-Lizenz und kann daher frei privat und kommerziell eingestezt werden. Das Projekt wurde inspiriert durch Codrops cbpScroller.js.

Tether

tether-w550

Tether ist eine ausgewachsene Funktionsbibliothek, die es Ihnen ermöglicht, Elemente an andere Elemente zu flanschen. Das klingt erst einmal simpel. Dabei ist Tether ein sehr durchdachtes, funktionsreiches Tool, dem man die Hirnkraft ansieht, die in es geflossen ist.

Um Elemente miteinander zu verbinden definieren Sie Punkte auf beiden Elementen. Das Element, mit dem ein anderes verbunden werden soll, nennt sich Target. Tether sorgt nun dafür, dass die beiden definierten Punkte übereinander gehalten werden. Die Definition der Punkte erfolgt natürlich-sprachlich. Hier ist ein Beispiel:

new Tether({
  element: yellowBox,
  target: greenBox,
  attachment: 'top right',
  targetAttachment: 'top left'
});

Tether wird erstellt und erweitert von HubSpot aus Cambridge und kann als Open Source frei verwendet werden. Schauen Sie auf jeden Fall in HubSpots Github-Repository. Dort gibt es eine ganze Reihe interessanter Projekte, teilweise auf Tether basierend.

imagesLoaded

imagesloaded-w550

imagesLoaded ist ein leichtgewichtiges Toll für einen einzelnen Zweck. Es gibt ein Event aus, wenn Bilder geladen wurden. Dieses Event kann man dann auslesen und programmlogisch darauf reagieren. Erkennt imagesLoaded die Verfügbarkeit von jQuery, arbeitet es als Plugin. Wenn nicht, arbeitet es allein.

imagesLoaded wird entwickelt von Tomas Sardyha und David DeSandro. Das Tool steht unter MIT-Lizenz kostenfrei zur Verwendung bereit.

simpleCart(js)

simplecartjs-w550

Mit simpleCart.js bauen Sie auf einfachste Weise Warenkorbfunktionalität in beliebige Websites ein. Wenn Sie wissen, wie man Klassen an HTMl-Elemente anfügt und JavaScript in HTML-Dokumente einbettet, dann hält Sie kaum noch etwas vom Verkaufen Ihrer Produkte über die eigene Website ab. Nun müssen Sie sich noch auf die vorgegebenen Zahlungsprovider Amazon Payments, Google Checkout oder Paypal einlassen können und schon kann’s losgehen. Ein E-Mail-Checkout ist in Arbeit, aber noch nicht fertig.

Der Einbau eines Warenkorbs mit simpleCart.js ist, wie der Name vermuten lässt, simpel. Um die Funktionalität verfügbar zu machen, reicht folgender Aufruf:


Nun müssen Sie noch Produkte hinzufügen, die zum Verkauf stehen. Definieren Sie beliebig viele sog. Shelf-Items auf die folgende Weise:

Awesome T-shirt

$35.99 Add to Cart

Nachdem alles, was der Besucher sieht, von Ihnen geschrieben wird, kann simpleCart.js entsprechend international verwendet werden. Steuern und Währungen passen Sie im Rahmen des Funktionsaufrufes an.

simpleCart.js wird entwickelt von Wojo Design aus dem amerikanischen Chicago. Es ist mit einer Doppellizenz (MIT und GPL) ausgestattet und kann kostenfrei für private und kommerzielle Projekte verwendet werden.

Sticker.js

stickerjs-w550

Sticker.js von Jongmin Kim aus New York ist keine reine JavaScript-LÖsung, sondern verlässt sich zusätzlich auf CSS3. Dadurch ist es beschränkt auf die Verwendung in modernen Browsern. Der IE wird ab Version 10 unterstützt.

Um zu verstehen, was Sticker.js leistet, empfiehlt sich ein Blick auf die Demo. Mit Sticker.js animierte Elemente verhalten sich wie Aufkleber, die man von verschiedenen Seiten abziehen und wieder anpappen kann. Das Ziehen und Pappen erfolgt beim Hovern mit der Maus über dem Element. Die Optik wird mittels CSS kontrolliert und das JavaScript kann mit Klassen und IDs gleichermaßen umgehen.

Das ist eine Grundkonfiguration:

 
    

Nun fügen wir ein Bild oder eine Hintergrundfarbe hinzu:

    .sticker {
        width: 180px;
        height: 180px;
    }

    // add image
    .example-1 .sticker-img {
        background-image: url(heroes-2.png);
    }

    // add color
    .example-2 .sticker-img {
        background-color: #ff4a85;
    }

    // change shadow opacity
    .example-2 .sticker-shadow {
        opacity: 0.6;
    }

Und dann lassen wir die Methode drauf los:

Sticker.init('.sticker');

Sticker.js steht ebenfalls unter der MIT-Lizenz. Es ist dementsprechend kostenlos, sowohl privat, wie auch kommerziell nutzbar.

Links zum Artikel:

Kategorien
JavaScript & jQuery Programmierung

SVG und JavaScript: Was ist möglich, was muss beachtet werden?

Das SVG-Format gibt es zwar schon länger, war mangels flächendeckender Browserunterstützung jedoch nur bedingt einsatzfähig. Da mittlerweile alle aktuellen Browser das Format unterstützen und Flash immer mehr verdrängt wird, ist SVG noch interessanter geworden. Wie Flash ist auch das SVG-Format vektorbasiert und kann Animationen enthalten. Aber es hat noch eine Gemeinsamkeit zu Flash: Per Scriptsprache sind Programmierungen innerhalb des Formates möglich.

svg_javascript

Per JavaScript auf SVG-Elemente zugreifen

Im Grunde unterscheidet sich der Einsatz von JavaScript in einer SVG-Datei gar nicht vom Einsatz in einer HTML-Datei. Da es in der SVG-Syntax aber weder das HEAD- noch das BODY-Element gibt, wird ein JavaScript-Bereich einfach innerhalb des SVG-Elementes ausgezeichnet. Hierbei gilt wie bei HTML auch, dass auf Elemente nur dann zugegriffen werden kann, wenn diese bereits geladen wurden. Also muss der JavaScript-Bereich entweder ans Dokumentende gesetzt oder über eine Funktion per Event-Listener „load“ aufgerufen werden. Zwingend erforderlich ist jedoch, dass der JavaScript-Quelltext innerhalb eines CDATA-Abschnittes aufgeführt wird.

<svg>
  <script>
    <![CDATA[
      window.addEventListener("load", function() { … }, false);
    ]]>
  </script>
  <rect x="50" y=50" width="0" height="25" fill="red" />
</svg>

Da man SVG-Elemente wie HTML-Elemente mit Klassen und IDs ausstatten kann, lassen sich diese mit den bekannten Methoden „getElementsByTagName()“, „getElementById()“. sowie den neueren Methoden „querySelector()“ und „querySelectorAll()“ ansprechen. Attribute werden mit „getAttribute()“ ausgelesen beziehungsweise mit „setAttribute()“ zugewiesen – also alles bekannte Methoden.

window.addEventListener("load", function() {
  document.getElementsByTagName("rect")[0].setAttribute("width", "100");
}, false);

Im Beispiel wird auf das erste RECT-Element zugegriffen, welchem das „width“-Attribut mit dem Wert „200“ zugewiesen wird. Um per JavaScript Animationen zu erstellen, die SVG-Elemente in Bewegung bringen, bietet sich die Methode „requestAnimationFrame()“ an. Diese Methode ist speziell für Animationen geeignet und sorgt – anders als als beispielsweise „setTimeout()“ – dafür, dass eine Funktion immer nur dann ausgeführt wird, wenn dies für das Fortlaufen einer Animation notwendig ist.

window.addEventListener("load", function() {
  var breite = document.getElementsByTagName("rect")[0].getAttribute("width");
  function animation() {
    if (breite < 200) {
      breite++;
      document.getElementsByTagName("rect")[0].setAttribute("width", breite);
      window.requestAnimationFrame(animation);
    }
  }
  window.requestAnimationFrame(animation);
}, false);

Im Beispiel wird über „requestAnimationFrame()“ die Funktion „animation()“ solange aufgerufen, bis der „width“-Wert für das Rechteck „200“ ist. Dabei wird der „width“-Wert bei jedem Funktionsaufruf um 1 erhöht, was zu einer Animation des Rechteckes führt, bei dem die Breite auf 200 verändert wird. Auf diese Art und Weise lassen sich beispielsweise Diagramme über eine Animation aufbauen. Die einzelnen Diagrammwerte können per GET-Parameter an die SVG-Datei übergeben und per JavaScript ausgelesen werden.

Vorteil gegenüber Canvas

Zwar gibt es mit dem CANVAS-Element und den entsprechenden Zeichenfunktionen von JavaScript auch die Möglichkeit, ohne SVG-Format Formen zu zeichnen und auf ähnliche Weise zu animieren. Allerdings stellt das Canvas-Element nur eine pixelbasierte Zeichenfläche zur Verfügung. Wird das Browserfenster vergrößert dargestellt, wird die gerasterte Darstellung erkennbar.

Daher setzt zum Beispiel die Google-Charts-API für seine Diagramme ebenfalls auf das vektorbasierte SVG-Format anstatt auf Canvas.

Einbindung von SVG-Grafik in HTML-Dokument

Damit JavaScript innerhalb einer SVG-Grafik auch ausgeführt werden kann, ist es notwendig, die SVG-Grafik per EMBED- oder IFRAME-Element in ein HTML-Dokument einzubinden. Wird es per IMG-Element eingebunden, wird die SVG-Grafik zwar angezeigt, das JavaScript wird jedoch nicht ausgeführt.

Alternativ ist es möglich, eine SVG-Grafik komplett in ein HTML-Dokument einzubetten, indem der Quelltext einschließlich SVG-Element (aber ohne Doctype) an gewünschter Stelle innerhalb des HTML-Dokumentes platziert wird.

Dank JavaScript und den Animationsmöglichkeiten des SVG-Formates kann es sich zu einem adäquaten Ersatz zu Flash entwickeln, welches gänzlich ohne Plug-in auskommt und somit auch auf mobilen Geräten läuft.

(dpe)

Kategorien
Design HTML/CSS

CSS und SVG: 2 neue, kostenlose Dienste für Hintergründe und Verläufe in HTML 5

Zum Jahresende hin stolpere ich über zwei Dienste, die sich auf die Erstellung von Website-Hintergründen mit HTML 5 konzentrieren. Dabei setzt das Tool CSS Color Gradient Generator von ScriptsConnect auf CSS 3 und das Tool SVGeneration auf SVG. Mit mehreren Farbmodellen und Unterstützung für mehr als nur CSS kann der CSS Generator punkten, während SVGeneration bei Verläufen noch nicht Halt macht, sondern mit etlichen realistisch wirkenden Texturen zu gefallen weiß. Beide erleichtern uns die Arbeit, schauen wir also mal genauer hin…

CSS3 Color Gradient Selector and Generator

css-color-gradient-generator

Der CSS Color Gradient Generator stellt über eine übersichtliche Formular-Umgebung alle erforderlichen Parameter bereit, die Sie benötigen, um einen Verlauf mittels CSS3 umfassend zu konfigurieren. Dabei arbeitet der Generator in unterstützten Browsern im WYSIWYG-Modus. Auf der rechten Seite des Browserfensters wird stets verzögerungsfrei dargestellt, was die Änderung der Parameter auf der linken Seite bewirkt. Oben rechts sehen Sie dabei die grafische Preview, darunter den generierten CSS-Code, der sich mit und ohne Kommentare darstellen lässt und sich ebenfalls dynamisch ändert.

Neben CSS kann die Ausgabe auch in SCSS und Less erfolgen. Als Farbformat ist man nicht auf das übliche Hex festgelegt. Zur Wahl stehen zusätzlich jeweils zwei RGB- und HSL-Varianten. Die ansehnlichen Presets eignen sich gut als Basis für eigene Verläufe. Sie orientieren sich durchgängig an aktuell gängigen, im Sinne von populären Farben.

Der CSS Color Gradient Generator kümmert sich ungefragt um das Browser-Prefixing und liefert sogar einen Fallback für ältere Internet Exploder mit. Das Tool kann frei verwendet werden. Ist der Verlauf fertig parametrisiert, kopieren Sie schlicht den Code aus dem Textfeld rechts unten aus und fügen ihn in Ihrem Projekt wieder ein.

Haben Sie bereits einen CSS-Verlauf, den Sie visuell bearbeiten wollen, so verwenden Sie die Funktion Import from CSS unterhalb des Ausgabefensters. Im sich nun öffnenden Textfeld kopieren Sie Ihren Code ein und klicken auf Submit. Jetzt können Sie ihn in gleicher Weise wie die mitgelieferten Presets bearbeiten.

SVGeneration: mehr als nur Verläufe

svgeneration

Das Tool SVGeneration ist wie der CSS Generator weiter oben eine Web-App, die kostenlos genutzt werden kann. Die fast 60 SVG-Vorlagen, die der Betreiber bereits zur Verfügung gestellt hat, können unter MIT-Lizenz, also ohne Attribution, frei Verwendung finden. Wenn Sie mögen, reichen Sie Ihre eigenen Kreationen ein. Bei entsprechender Qualität stehen die Chancen nicht schlecht, in den Bestand übernommen zu werden.

Alle Vorlagen auf SVGeneration sind über zwei Editoren frei anpassbar, dabei aufgrund des SVG-Formats nicht auf Verläufe beschränkt. So finden Sie auf der Site viele, interessante Hintergrund-Texturen, etwa in Metall- oder Stoffoptik. Auch viele Flat Designs warten darauf, von Ihnen entdeckt und bearbeitet zu werden.

Der Einstieg ist einfach. Suchen Sie über den Showcase ein Design aus, das Ihnen zusagt und klicken mittig auf Generate. Sie gelangen in einen sog. Easy Editor, mit dessen Hilfe Sie im WYSIWYG-Modus an den Texturen schrauben können. An dieser Stelle werden Sie auch über etwaige Einschränkungen des gewählten Patterns hinsichtlich der Browser-Kompatibilität informiert. Generell empfehlen die Betreiber den Einsatz von etwa Modernizr, um entsprechend unfähige Browser direkt anders behandeln zu können.

Im Easy Editor können Sie nun über Schieberegler und Farbwähler die Optik des vorgewählten Musters anpassen. Entspricht alles den Vorstellungen, downloaden Sie SVG und CSS und bauen beides auf Ihrer Website wieder ein. Der zweite Editor namens Code Edit erlaubt weitergehende Änderungen direkt am SVG-Code. Zu beachten ist dabei allerdings, dass man, soweit man hier tatsächlich Änderungen vornimmt, nicht mehr zum Easy Editor wechseln kann. Tut man es dennoch, sind die getätigten Änderungen verloren.

Zusätzlich zu den leicht anpassbaren Vorlagen finden Sie auf SVGeneration eine Sammlung von Ressourcen zum Thema, gut nicht nur für Einsteiger.

svgeneration-editor

Links zum Beitrag:

  • CSS Color Gradient Selector and Generator | Homepage
  • SVGeneration | Homepage
  • ScriptsConnect | Macher des CSS Generators
Kategorien
JavaScript & jQuery Programmierung

Scrollen, sliden, biegen und mehr: 5 frische jQuery-Plugins aus dem November 2013

Das jQuery-Universum wächst beständig. Es ist schwierig, mit der Entwicklertätigkeit in Sachen Plugins informatorisch Schritt zu halten. Und, seien wir mal ehrlich, vielfach lohnt sich das auch gar nicht. Wir stellen Ihnen heute fünf frische jQuery-Plugins vor, die allesamt im November entstanden sind oder offiziell vorgestellt wurden. Diese zu kennen, lohnt sich auf jeden Fall. Versprochen…

onScreen bearbeitet Elemente beim Betreten oder Verlassen des Viewports

onScreen von Silvestre Herrera arbeitet mit Elementen, wenn sie den Viewport erreichen und/oder aus diesem Verschwinden. Die einfachste Anwendungsmöglichkeit für onScreen ist ein LazyLoad für Bilder. onScreen sorgt hierbei dafür, dass Bilder erst dann geladen werden, wenn sie für die Anzeige im Viewport auch tatsächlich benötigt werden.

onscreen

onScreen kann aber mehr. Herrera stellt verschiedene Demos bereit. So ist onScreen in der Lage, Streamposts erst dann nachzuladen, wenn das Seitenende erreicht wird. Das kann auch bei horizontalem Scrollen erfolgen. onScreen lässt sich zudem auf DOM-Elemente in Containern anwenden, dabei sogar auf mehrere Container einer Seite gleichzeitig.

onScreen steht unter MIT-Lizenz auf Github zum kostenlosen Download und zur freien Verwendung bereit.

Slippry: Flexibler Slider auf Basis von HTML5 und CSS3

Slippry von Booncon aus dem finnischen Helsinki ist ein weiterer Slider – allerdings einer, der sich vom Einheitsbrei deutlich absetzt. Denn die Jungs von Booncon hatten aus eben dem Grund, dass es derlei Software massenhaft gibt, grundsätzlich gar nicht vor, selbst einen Slider zu bauen. Auf der Suche nach einem responsiven, für ihre Zwecke tauglichen Exemplar stellten sie nach eigenen Angaben indes fest, dass die verfügbaren Lösungen entweder kaum Flexibilität zeigten oder auf Funktionen fußten, deren Tage gezählt sind.

slippry

Folgerichtig wurde ein nagelneuer Slider auf Basis des aktuellen jQuery und unter Verwendung von HTML5 und CSS3 geschaffen, der dennoch Fallbacks für ältere Browser gewährleistet. Im HTML-Markup werden keinerlei Funktionen versteckt. Das als Slider zu definierende Element erhält eine eindeutige ID, die dann wiederum dem Funktionsaufruf übergeben wird. Parameter zur Anpassung der Optik und weiterer Verhaltensweisen finden im Funktionsaufruf statt. Booncon hält vielfältige Demos bereit.

Slippry steht unter MIT-Lizenz auf Github zum kostenlosen Download und zur freien Verwendung bereit.

Bigfoot kümmert sich um die Darstellung von Fußnoten, nicht nur in responsiven Designs

Fußnoten sind grundsätzlich eine schöne Sache und in wissenschaftlichen Arbeiten in jedem Falle unabdingbar. Ich persönlich vermeide den Einsatz von Fußnoten wegen der unschönen optischen Effekte und der schlechten Usability des Hin- und Herspringens im Text. Das neue jQuery-Plugin bigfoot von Chris Sauve aus Kanada könnte mich allerdings überzeugen.

bigfoot

Denn bigfoot bearbeitet herkömmlich erstellte Fußnoten automatisch und macht daraus klickbare Targets, die besonders auf mobilen Geräten die Usability deutlich verbessern. Anstelle eines nummerierten Links zeigt bigfoot ein Touchtarget und – besonders gut – blendet den Text der eigentlichen Fußnote in einem Overlay direkt am Fußnotenlink ein. Chris Sauve hat entsprechende Demos vorbereitet.

bigfoot-2

Bigfoot steht unter MIT-Lizenz auf Github zum kostenlosen Download und zur freien Verwendung bereit.

stickUp hält beliebige Elemente im Scrollbereich sichtbar

Das Plugin stickUp des New Yorkers Liran Cohen tut, was der Name verspricht. Es sorgt dafür, dass ein definiertes Element stets am oberen Rand des Browsers sichtbar bleibt. Die Idee ist der in Mode geratenen Technik des One-Page-Designs entlehnt. Hauptanwendungsfall dürfte demnach die Anwendung auf eine Navigationsleiste oder eine Navigationsbox sein. Grundsätzlich kann stickUp jedoch jedes Element im Scrollbereich sichtbar halten, da sich das Plugin auf die übergebene ID des gewünschten Elements auswirkt.

stickup

Cohen liefert ausführliche Informationen und Anleitungen zur Nutzung, selbst in WordPress, mit. Ein WP-Plugin ist angekündigt. Die Demo zu stickUp ist aussagekräftig.

stickUp steht unter GLGPL-Lizenz auf Github zum kostenlosen Download und zur freien Verwendung bereit.

Circle Type biegt Texte entlang von Kreislinien

Circle Type von Peter Hrynkow aus dem kanadischen Vancouver ist ein schlankes, extrem leichtgewichtiges Plugin, dass sich damit beschäftigt, Texte entlang einer Kreislinie zu setzen. Ob ganz rund, halb rund oder lediglich leicht geschwungen, nach oben oder nach unten – Hrynkows Plugin erledigt den Job. Demos finden sich hier.

circletype

Im Zusammenspiel mit FitText.js kann Circle Type Texte in gegebene Container einbiegen. Circle Type eignet sich hervorragend für responsive Layouts. Mit der Option Fluid passen sich Textkrümmungen dynamisch dem Viewport an. Ebenso wie FitText setzt auch Circle Type das Plugin Lettering.js voraus.

Circle Type steht unter Doppel-Lizenz GPL und MIT zum kostenfreien Download und zur ebensolchen Verwendung auf Github zur Verfügung.

Kategorien
Design HTML/CSS

Least.js: Responsive Bildergalerie auf Basis von HTML5, CSS3 und jQuery

Normalerweise stelle ich keine Galerie-Scripts vor. Gefühlt Tausende existieren in den nicht so fernen Weiten des Netzes und fast wöchentlich kommen neue hinzu. Das jQuery-Plugin von Kamil Czujowski und Sergej Müller jedoch sticht aus der Masse hervor. Es basiert auf aktuellen Standards und eignet sich außerordentlich gut für den Einsatz quer über alle Geräteklassen.

least-startseite

Least.js: Einfach zu implementierende Bildergalerie mit LazyLoad

Eine Bildergalerie mit Least.js entsteht stets auf der Basis einer Liste. Die einzelnen Bilder sind Listen-Elemente, die wiederum Listen-Elemente für die Beschriftung innerhalb des Hover-Overlays enthalten.

least-nur-thumbnails
Least.js: Übersicht der Thumbnails

Wie auch bei anderen Galerien üblich, werden initial Thumbnails in der Übersicht angezeigt. Per Klick auf das Thumbnail ruft man die eigentliche Bilddatei auf. Innerhalb des Listen-Elements zum Bild sorgt zunächst ein Gif dafür, dass sich ein weißer Schatten beim Hovern über das Bild legt. Dabei werden auch die in weiteren Listen-Elementen abgelegten Overlay-Texte angezeigt. Das eigentliche Thumbnail steuert man über ein HTML5-Data-Attribut namens data-original ein. Die verschiedenen Zustände sind innerhalb des übergeordneten Listen-Elements in separaten Div geordnet.

Zur Verdeutlichung des Gesagten; so sieht das beispielsweise für ein einzelnes Bild aus:

Der Funktionsaufruf des Galerie-Scriptes erfolgt über die ID der Galerie folgendermaßen:

$(document).ready(function(){
    $('#gallery').least();
});

Klickt man nun eines der angezeigten Vorschaubilder an, so wird das größere Original oberhalb der Thunbnail-Liste in das erste Listen-Element mit der ID fullPreview geladen.

least-mit-original-oben
Least.js: Anzeige des Originals nach Klick oberhalb der Thumbnails

Über das jQuery-Plugin LazyLoad sorgen die Entwickler dafür, dass die größeren Originale erst vom Server geholt werden, wenn sie auch tatsächlich geklickt wurden. Das ist insbesondere bei größeren Galerien sinnvoll, da ohne LazyLoad beim ersten Aufruf alle Thumbnails nebst aller Originale vorgeladen werden müssten, was sich in langsamem Bildaufbau und gefühlt langen Wartezeiten bemerkbar machen würde.

Die Kehrseite des Einsatzes von LazyLoad ist natürlich, dass nach dem Klick auf ein Thumbnail zunächst eine oder mehrere Gedenksekunden vergehen, bevor oberhalb der Vorschaugalerie tatsächlich das Originalbild sichtbar wird. Der Effekt lässt sich natürlich minimieren, indem man seine Bilder maximal in 720p oder 1080p hinterlegt und mit Photoshop oder meinem Lieblings-Kompressor JpegMini ordentlich vorbehandelt. Auf der Demoseite zu Least.js haben sich Czujowski und Müller auf eine maximale Auflösung von 960 x 600 Pixeln für das größere Originalbild festgelegt.

So funktionieren Bildergalerien mit Least.js vollständig responsiv, fließend bei Änderungen des Viewports. Skalieren Sie auf der Demoseite schlicht mal Ihr Browserfenster. Es dürfte LazyLoad zu verdanken sein, dass die Skalierung in derart hoher Geschwindigkeit und völlig ohne Ruckler und Wartezeiten erfolgt. Während das Originalbild ab einer Viewportbreite von 960 Pixeln zentriert, fließt die Thumbnailgalerien weiter über die volle Seitenbreite. Verkleinert man den Viewport, skaliert auch das Originalbild frei mit, bis zur vordefinierten Breite eines einzelnen Thumbnails.

Wer sehr kleine Galerien verfügbar machen will oder LazyLoad schlicht nicht mag, kann es via Parameter im Funktionsaufruf auch deaktivieren. Weitere Parameter sorgen etwa dafür, dass die Galerie nicht nach dem Zufallsprinzip, sondern streng numerisch nach vergebenen Dateinamen sortiert wird.

Least.js eignet sich ganz hervorragend dafür, Bildergalerien in moderner Optik auch auf mobilen Clients verfügbar zu machen, ohne dabei deren Look auf Desktop-Geräten zu beeinträchtigen. Least.js steht auf Github zum kostenfreien Download zur Verfügung. Vor der Nutzung in kommerziellen Projekten empfiehlt es sich Kontakt zu den Entwicklern aufzunehmen. Eine Lizenz, die Aufschluss über die erlaubte Nutzung geben würde, ist dem Script nicht beigegeben.

Links zum Beitrag

Kategorien
Design HTML/CSS

CSS3: Komplexe Beschneidungspfade mit der Eigenschaft Clip-Path

Bisher war es mit CSS nicht möglich, Elemente jenseits rechteckiger Begrenzungen darzustellen. Die mittlerweile etablierte Eigenschaft „border-radius“ erlaubt zwar abgerundete Ecken, die somit auch eine runde Grundform erlauben; komplexere Beschneidungen sind damit aber nicht zu erstellen. Die CSS3-Eigenschaft „clip-path“ bringt jedoch komplexe Beschneidungspfade zur Anwendung, die auch per SVG-Grafik definiert werden können.

css_clip-path

Maskierung in CSS nicht neu, aber…

Die Möglichkeit, Elemente per CSS zu beschneiden beziehungsweise zu maskieren, ist nicht neu. Bereits seit CSS 2.1 gibt es die Eigenschaft „clip“, die es erlaubt, ein Element an den Seiten zu beschneiden. Allerdings erlaubt die Eigenschaft nur eine rechteckige Maskierungsform:

img {
  position: absolute;
  clip: rect(10px, 10px, 50px, 50px);
}

Außerdem funktioniert die Eigenschaft nur bei absolut platzierten Elementen. Wesentlich mehr Möglichkeiten hat die CSS3-Eigenschaft „clip-path“. Neben rechteckigen Maskierungen lassen sich auch elliptische, runde und polygonale Formen realisieren:

img {
  clip-path: rectangle(10px, 10px, 50px, 50px, 5px, 5px);
}

Während die ersten vier Werte von „rectangle()“ identisch sind mit den Werten für „rect()“ bei der alten „clip“-Eigenschaft, definieren die letzte beiden optionalen Werte die Radien für abgerundete Ecken – jeweils für den horizontalen und vertikalen Radius. Für einen Kreis erwartet „circle()“ drei Werte – die X- und Y-Koordinaten für den Mittelpunkt sowie einen Radius:

img {
  clip-path: circle(100px, 100px, 50px);
}

Ein Polygon („polygon()“) erlaubt beliebig viele Koordinatenpaare (X- und Y-Koordinaten) zur Definition aufwändiger Formen.

Komplexe Maskierungen mit SVG-Grafiken

Auch deutlich komplexere Maskierungen sind mit „clip-path“ möglich. Dazu werden die Koordinaten nicht direkt in die CSS-Eigenschaft geschrieben, was immer nur die Verwendung einer der vier Grundformen erlaubt, sondern in eine SVG-Grafik ausgelagert. Die SVG-Grafik wird dazu mit Angabe einer ID im HTML-Dokument platziert:

<svg>
  <defs>
    <clipPath id="form">
      <circle cx="100" cy="100" r="50" />
    </clipPath>
  </defs>
</svg>

Anschließend wird der CSS-Eigenschaft „clip-path“ die ID des SVG-Pfades übergeben:

img {
  clip-path: url(#form);
}

Browserunterstützung

Die aktuellen Versionen von Chrome, Safari und Chrome können die „clip-path“-Eigenschaft interpretieren, der aktuelle Internet Explorer nicht. In jedem Fall setzen die Browser derzeit noch die Verwendung des jeweiligen Vendor-Prefixes voraus.

Kategorien
Apps Programmierung

HTML5 Device Mockups: Populäre Geräte als Rahmen für Live-Webinhalte auf der eigenen Site nutzen

Das hier macht Freude. Wir kennen Finnland ja bereits für eine ganze Reihe toller Dinge, etwa Gummistiefel und – äh – Helsinki. Die Entwickler Angelos Arnis und Tomi Hiltunen wollen diesem famosen Portfolio finnischer Bekanntheit eine weitere Facette hinzufügen. Sie veröffentlichten vor wenigen Tagen auf Basis von PNG und HTML5/CSS3 einen Satz an Mockups verschiedener populärer, vor allem mobiler Geräte, nebst der Möglichkeit, den Viewports dieser Geräte echte Webinhalte, nicht etwa nur Screenshots, zu implementieren. Das ist ideal, wenn man demonstrieren will, wie das eigene Portfolio, etwa als Entwickler mobiler Web-Apps, auf verschiedenen Geräten angezeigt werden wird. Ich bin sicher, die Lösung von Arnis und Hiltunen wird schnell Freunde finden…

html5-device-mockups-w640

Pures CSS oder HTML5 Data-Attribute steuern das Look & Feel

Aktuell besteht das Set von HTML5 Device Mockups aus acht populären und verbreiteten (mit Ausnahme des Lumia 920 und des Surface-Tablets) Geräten. Es gibt das iPhone5 und das iPad in Hoch- und Querformat, jeweils in weiß und schwarz. Desweiteren steht ein iMac und ein MacBook Pro bereit. Die Android-Fraktion freut sich über das Galaxy S3 in blau und weiß und verschiedenen Ausrichtungen, sowie ein Nexus 7. Last und auch least ist es möglich, Webinhalte zusätzlich in den Viewport eines Lumia 920, sowie eines Surface-Tablet zu stecken. Schön am Lumia, es ist in gelb implementiert…

Neben den für die Darstellung erforderlichen PNGs mit Alpha-Transparenz liefern Arnis und Hiltunen die PSD-Dateien zu den einzelnen Geräten mit. Auf diese Weise kann man die Mockups auch für Druck-Präsentationen, Flyer und ähnliches nutzen.

Der Motor des Projekts, das auf Github gehostet wird, besteht aus zwei CSS-Dateien. Beide erledigen die gleiche Aufgabe. Der Unterschied besteht darin, dass die Datei device-mockups.css mit zusätzlichen CSS-Klassen arbeitet, während die Datei device-mockups2.css das gleiche Ergebnis unter Verwendung von HTML5 Data-Attributen erzielt.

Das folgende Beispiel arbeitet auf der Basis der zweiten Variante, aber greifen wir nicht zu weit vor. Als erstes bauen wir das entsprechende CSS in unsere Website ein:

Dann verwenden wir die mitgelieferte Mockup Device Generator.html, indem wir sie in einem Browser unserer Wahl aufrufen, alternativ verwenden wir den Generator der Demo-Site. Jetzt klicken wir das gewünschte Mockup zusammen und lassen uns den korrespondierenden Code anzeigen. Per Copy & Paste übernehmen wir diesen in unsere Website.

Ich wählte entsprechend ein weißes iPhone im Querformat. So sieht das aus:

white-iphone5-landscape-w640

Und dieser Code gehört dazu:

Wie Sie sehen, erfolgt die Definition des entsprechenden Geräts komplett mittels Data-Attributen. Die andere Variante hätte zusätzliche CSS-Klassen verwendet.

Der wichtigste Teil innerhalb dieses kleinen Code-Schnipsels findet sich als das div mit der Klasse screen. Hier können Sie den gewünschten Inhalt einfügen. Dieser Inhalt kann im Grunde alles sein, was man auch ansonsten auf Websites präsentieren würde, also beispielsweise Medien, wie Videos und Bilder, oder JavaScript-Anwendungen oder was auch immer man in einen iframe packen kann. Das div mit der Klasse button erlaubt es, dem Home-Button eine Funktionalität zuzuweisen. Kann man machen, oder man entfernt das Div komplett.

embedded-content-w640
Beispiele von der Projekt-Website

Viel Fantasie bedarf es nicht, den Nutzen der Lösung zu erkennen. Der offensichtlichste Anwendungsfall dürfte wohl der sein, für mobile Geräte konzipierte Lösungen auch außerhalb dieser Geräte auf der eigenen Website zu zeigen.

Die HTML5 Device Mockups, so der offizielle Projekt-Name, stehen kostenfrei, sowohl zur privaten, wie kommerziellen Nutzung zur Verfügung. Auch die Modifikation ist erlaubt, wie mir einer der beiden Entwickler eben per E-Mail bestätigte..

Was halten Sie von dem Projekt? Lassen Sie es mich wissen.

Links zum Beitrag

Kategorien
Design HTML/CSS

CSS3: Mit Exclusions und Regions Texte darstellen wie in InDesign

Dank Adobe könnten Texte auf Websites bald so gestaltet werden, wie es beispielsweise in InDesign möglich ist. Der kalifornische Software-Konzern hat zwei Vorschläge gemacht, wie sich Texte mit CSS in Form bringen lassen und wie sie auf unterschiedliche HTML-Elemente aufgeteilt werden können.

css-regions-exclusions
Adobe und HTML

Texte in Form bringen mit CSS-Exclusions

Texte in HTML sind bislang immer beschränkt auf eine rechteckige Grundform. Im Printdesign kennt man den sogenannten Formsatz, bei dem ein Textblock eine beliebige geometrische Form annehmen kann. Zwar gibt es JavaScript-Lösungen, die einen Formsatz darstellen können, reine HTML- und CSS-Lösungen gab es jedoch nicht.

Mit den CSS-Exclusions entstanden zwei neue CSS-Eigenschaften, die Formsätze ermöglichen. Neben (abgerundeten) Rechtecken lassen sich Texte in Kreise, Ellipsen und Polygone einpassen:

p {
  shape-inside: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

Mit shape-inside wird ein Formsatz erstellt, der den Text innerhalb der Form setzt. Die analoge Eigenschaft shape-outside dient dazu, Text um eine Form herumfließen zu lassen. Über polygon werden im Beispiel die Koordinaten für die Form angegeben. Jedes Zahlenpaar steht für eine X- und Y-Koordinate.

Texte auf mehrere Blöcke aufteilen mit CSS-Regions

Neben den Exclusions hat Adobe mit den CSS-Regions eine Möglichkeit geschaffen, Texte auf mehrere HTML-Elemente aufzuteilen. Auch diese Funktion kennt man aus dem Printdesign. Ein Text lässt sich dort auf mehrere Textrahmen aufteilen. So ist es möglich, einen Text problemlos innerhalb eines Dokumentes frei und, wenn gewünscht, unzusammenhängend anzuordnen.

Um Texte auf mehrere Elemente verteilen zu können, bedarf es zunächst eines Elementes, welches den kompletten Text beinhaltet. Diesem muss eine feste Höhe zugewiesen werden, die nicht für die Gesamtdarstellung ausreicht, da der Text ansonsten lediglich in diesem Element dargestellt wird. Darüber hinaus braucht es mindestens ein weiteres leeres Element, in welchem der Text weiterfließen soll. Anschließend muss per CSS noch festgelegt werden, von wo nach wo der Text laufen soll:

#text1 {
  flow-into: textfluss;
  width: 200px;
  height: 300px;
}

#text2 {
  flow-from: textfluss;
  width: 200px;
  height: 200px;
}

Im Beispiel beherbergt das Element mit der ID text1 den gesamten Text. Mit der Eigenschaft flow-into wird ein beliebiger Name für den Textverlauf vergeben (hier textfluss). Das Element mit der ID text2 erhält mit der Eigenschaft flow-form denselben Namen für den Verlauf wie text2. Somit ist definiert, dass der Text in text1 im Element text2 weiterfließen soll.

Browserunterstützung

Bislang befinden sich die CSS-Exclusions und -Regions nur in der Entwicklung. Daher unterstützt kein aktueller Browser diese Möglichkeiten. Allerdings kann man in Chrome Canary – der Developerversion von Chrome – diese Features bereits testen.

Links zum Beitrag

(dpe)

Kategorien
Essentials Exklusiv bei drweb.de

„CSS3 – Leitfaden für Webdesigner“: 5 Gewinner und viele Trostpreise

Vor einigen Tagen starteten wir gemeinsam mit dem Terrashop eine Verlosungsaktion, bei der es das Fachbuch „CSS3 – Leitfaden für Webdesigner“ zu gewinnen gab. Insgesamt 214 Teilnehmer konnten wir zählen, das Interesse war offenbar recht hoch. Aufgrund des hohen Interesses hat sich Terrashop bereit erklärt, allen übrigen Leserinnen und Lesern, die sich jetzt das Buch kaufen wollen, die Versandkosten zu erlassen. Interesse? Lesen Sie weiter…

css3-leitfaden-cover

5 Gewinner und viele Trostpreise

Gewonnen haben Anne L., Paul H., Markus S., Clemens K. und Matthias S. Die Gewinner sind benachrichtigt, haben sich sämtlich gemeldet und könnten mit etwas Glück heute bereits die Bücher im Briefkasten finden. Jedenfalls ist der Versand bereits veranlasst. Herzlichen Glückwunsch und Danke für die rege Teilnahme! Kommen wir zu Ihnen, werte Nicht-GewinnerInnen.

Das Buch “CSS3 – Leitfaden für Webdesigner” geht für schlanke 14,99 € anstelle der sonst fälligen 39,80 € über die virtuelle Ladentheke des Terrashop. Da sich der Buchpreis unter 19 € befindet, müsste man entweder weitere Bücher im gleichen Kaufgang erwerben oder eben eine Versandkostenpauschale von 3,95 € zahlen. Der Trostpreis für unsere Leserinnen und Lesern besteht nun darin, dass sie die Versandkosten nicht bezahlen müssen, selbst wenn sie nur den CSS3-Leitfaden erwerben möchten.

Die Aktion läuft bis einschließlich Montag, 15. April 2013 und funktioniert nur mit dem folgenden Link:

Bestellen Sie hier Ihr Exemplar des Buches „CSS3 – Leitfaden für Webdesigner“ für 14,99 € inklusive Versandkosten

CSS3 – Leitfaden für Webdesigner: Darum geht es in dem Buch

Das Fachbuch „CSS3 – Leitfaden für Webdesigner“ aus dem Addison-Wesley Verlag wurde geschrieben von der Münchnerin Florence Maurice und erschien im Sommer 2011. Auf der eigens für den Leitfaden geschaffenen Website css3-leitfaden.de hält Frau Maurice die Informationen aktuell. Erst im November 2012 aktualisierte sie die Tabelle zur Browserkompatibilität. Ebenfalls dort verfügbar sind alle Listings, sowie alle Links des Buches.

css3-leitfaden-buchseite

Die wesentlichen Inhalte des Leitfadens für den Webdesigner sind:

  • CSS3 und der Stand der Dinge
  • Browserkompatibel gestalten mit Modernizr, Filtern und Conditional Comments
  • Mit den neuen Selektoren und Pseudoklassen arbeiten
  • Transparenzen erstellen mit opacity, RGBA & Co.
  • Mehr Typografie – von Webfonts bis zu Texteffekten
  • Neue Optionen für Rahmen und Hintergrundbilder
  • Gestalten mit Farbverläufen, Transformationen (inkl. 3D), Übergängen und Animationen
  • Gerätespezifische Ausgabe mit Media Queries – vom Desktop bis zum iPhone
  • Neue Layout-Optionen mit Multi Column, Flexible Box und Grid Layouts

In insgesamt elf Kapiteln mit 273 Seiten plus Anhang erläutert Florence Maurice, wie man wo welche Elemente aus CSS3 sinnvoll einsetzen kann. Auf der Website des Terrashop können Interessierte sich in immerhin 50 Seiten des Buches einlesen, um so einen fundierteren Eindruck zu erhalten. Auf der Website des Addison-Wesley Verlages steht ein Kapitel als PDF zum Probelesen bereit.

css3-leitfaden-terrashop

Links zum Beitrag

Kategorien
Design HTML/CSS

CSS3: Das etwas andere Box-Modell mit {box-sizing:border-box}

Das klassische Box-Modell war noch nie besonders intuitiv. In CSS3 wurde mit {box-sizing:border-box} eine Alternative vorgestellt, die besonders bei flexiblen Layouts fast nur Vorteile hat.

real-world-box

Das klassische Box-Modell {box-sizing: content-box}

Wenn Sie im analogen Alltag die Breite einer Kiste angeben, dann ist damit immer die Entfernung von einem Außenrand zum anderen gemeint, inklusive Innenabstand (padding) und Rand der Kiste (border).

Beim klassischen Box-Modell ist das anders. Dort definiert width nur die Breite des Inhaltsbereichs und Angaben für padding oder border werden hinzugefügt. Visuell sieht dieses klassische Box-Modell so aus (nur zur Erinnerung):

boxmodell_content-box-w640

Man muss manchmal ein bisschen rechnen oder tricksen bis alles passt. Bei Layouts mit festen Pixelbreiten ist das zwar manchmal etwas nervig, aber durchaus machbar.

Doppelte HTML-Elemente als Notlösung

Wirklich problematisch wird das klassische Box-Modell erst, wenn innerhalb einer Box die Angaben für width, padding, border oder margin verschiedene Einheiten verwendet werden, denn dann lässt sich die Gesamtbreite dieses Elements nicht mehr zuverlässig bestimmen:

  • Eine mit <aside class="sidebar"> erstellte Layoutspalte soll eine Breite von 20% und ein padding links und rechts von jeweils 10px bekommen.
  • Frage: Wie viel Platz muss man für die Sidebar im Layout reservieren?
  • Antwort: Keine Ahnung. Das kann man nicht zuverlässig berechnen.

Damit flexible Layouts aber nicht zur reinen Lotterie verkommen, hat man sich beholfen, indem man das HTML-Element verdoppelt und die Box-Modell-Eigenschaften auf die beiden Elemente verteilt:

  • Innerhalb von aside wird ein zusätzliches div eingefügt.
  • aside bekommt width:20% zugewiesen.
  • Das innere div bekommt eventuelle Angaben für padding, border oder auch margin.

Dadurch hat die Sidebar unabhängig vom padding & Co immer eine Breite von 20% und wird im wahrsten Sinne des Wortes berechenbar.

Diese Dopplung von HTML-Elementen ist heute so selbstverständlich, dass wir fast vergessen haben, dass es ursprünglich mal eine Notlösung war.

Boxen wie im richtigen Leben mit CSS3: {box-sizing: border-box}

Fast unbemerkt von der breiten Öffentlichkeit haben die Browser so nach und nach ein zweites Box-Modell eingebaut, das etwas anders funktioniert. In diesem Modell sind padding und border in der Angabe von width bereits enthalten. Es heißt border-box, weil die Breite der Box von border bis border gemessen wird. Grafisch dargestellt sieht das so aus:

boxmodell_border-box_kraken-w640

Im Webdesigner-Alltag ist diese unscheinbare Änderung beim Layouten sehr praktisch. Bei der weiter oben beschriebenen Sidebar spart man damit zum Beispiel das doppelte, innere HTML-Element:

  • Zunächst wird .sidebar { box-sizing:border-box} definiert.
  • Dann wird dem Element z. B. width:20% und ein beliebiges padding oder border zugewiesen.

Fertig.

Mit der border-box ist es völlig egal, wie viel padding oder border ein Element bekommt, denn diese Werte werden von der Breite abgezogen und nicht hinzugefügt. Was in den meisten Fällen einfach nur praktisch ist. Die Sidebar wird auch ohne Dopplung der HTML-Elemente berechenbar.

Ein mit margin definierter Außenabstand kommt übrigens immer noch hinzu, aber dass ist bei den Boxen im richtigen Leben auch so.

Die border-box im Alltag

Wenn man erst einmal so richtig begriffen hat, wie praktisch diese border-box sein kann, kommt natürlich unweigerlich die Frage nach der Browserunterstützung auf. Und hier ist die Antwort:

caniuse-com-border-box-kraken-w640

Hey hey, sogar IE8 versteht das. Unbelievable. Mozilla benötigt zwar noch einen Prefix, aber wer den IE7 erst einmal draußen vor lassen kann, könnte sein Stylesheet mit folgendem Style beginnen:

* { 
  -moz-box-sizing: border-box; 
  box-sizing: border-box; 
}

Und genau das empfiehlt Paul Irish in seinem Blog-Artikel vom 1. Februar 2012.

Fazit

Die border-box ist eine mehr als willkommene Alternative zum klassischen Box-Modell, aber bevor Sie komplett auf die border-box umsteigen, sollten Sie die weiter unten gelisteten Artikel studieren. Als Basis für flexible Layouts wird die border-box wahrscheinlich schon ziemlich bald selbstverständlich sein.

Lesenswerte Links zum Artikel

Hier einige lesenswerte Artikel, die gleichzeitig auch ein bisschen den Werdegang von vorsichtigen Versuchen bis zur Empfehlung widerspiegeln:

Und hier noch zwei Referenzen:
* W3C, CSS3-ui box-sizing
* Mozilla Developer Network, box-sizing

Bildquelle Holzbox: 16 Miles of String via photopin cc

(dpe)

Kategorien
Design HTML/CSS

HINT.css – Tooltipps ganz ohne JavaScript, nur mit reinem CSS3 und HTML5

Tooltipps in HTML-Seiten entstehen grundsätzlich automatisch, sofern man seinen Elementen das Title-Attribut mitgibt. Das wird nicht nur zur Generierung von Tooltipps, sondern auch als Text für Lesesysteme und zu anderen Zwecken verwendet. Die Interpretation ist vom verwendeten Browser abhängig. Wer mehr Kontrolle möchte, setzt bereits seit Jahren auf Lösungen mit JavaScript. Kashagra Gour legt nun mit Hint.css eine Alternative vor, die komplett auf CSS und HTML basiert und dabei nicht minder schick aussieht.

hint.css

Hint.css – Data-Attribute, CSS3 Transitions, Pseudo-Elemente und die Content-Eigenschaft

Hint.css ermöglicht einfache Tooltipps an Elementen, an denen das einen Sinn ergibt, allen voran also Texten, Links und Bildern. Um den Tooltipp anzeigen zu können, werden die Elemente mit zwei aufeinanderfolgenden Klassen versehen. Die erste lautet stets hint, während die zweite die Position oder die Farbe des Tipps definiert. Will man Position und Farbe festsetzen, fügt man eben drei Klassen hinzu. Das sieht dann beispielsweise so aus:

    Oh man! You are gonna self-destruct in 5 sec.

Im Bild:

Hint.css | Ein Beispiel

Hier wird mit hint zunächst festgelegt, dass Hint.css das Element betreffen soll. Die Klasse hint--top positioniert den Tooltipp oberhalb des Span und hint--error definiert das rote Erscheinungsbild. Im korrespondierenden Attribut data-hint hinterlegt man den anzuzeigenden Text.

HTML5 Data-Attribute sind eine Möglichkeit, beliebige Daten innerhalb eines validen Quellcodes unterzubringen. Unter Verwendung von Data-Attributen ausgezeichnete Daten werden dem Betrachter nicht angezeigt und wirken sich nicht auf das Layout aus. Gleichwohl sind sie in der Seite enthalten und können einfach, wie etwa hier im Falle von Hint.css, weiterverarbeitet werden.

In seiner jetzigen Form verfügt Hint.css über Definitionen für hint--top, hint--bottom, hint--left und hint--right, die der Positionierung des Tooltipps dienen. Darüberhinaus stehen Farbdefinitionen für gängige Statusmeldungen bereit, als da wären hint--error, hint--info, hint--warning und hint--success. Wer möchte, dass der Tooltipp stets sichtbar bleibt und nicht erst via Hover getriggert werden muss, der verwendet (zusätzlich) hint--always.

Da Hint.css reines CSS darstellt, kann der Funktionsumfang natürlich von entsprechend CSS-Kundigen einfach erweitert werden. Das betrifft in allererster Linie die Farb- und Schriftpräsentation. Mit etwas Fantasie lässt sich Hint.css noch deutlich weiter aufbohren, zumal es in Sass entwickelt wurde und die Sass-Quellen ebenfalls frei verfügbar sind. Das Stylesheet steht auf Github unter MIT-Lizenz zur Download bereit und kann sowohl für private, wie auch kommerzielle Projekte eingesetzt werden.

Schon der Erkenntnisgewinn, dem man sich nicht entziehen kann, wenn man sich mit dem Stylesheet beschäftigt, lohnt den Aufwand. Insofern ist Hint.css rundheraus empfehlenswert. Erwähnenswert ist eventuell noch, dass CSS Transitions auf Pseudo-Elemente nur im Firefox funktionieren, was jedoch insofern unschädlich ist, als andere Browser die Tooltipps schlicht ohne Transitions rendern, was nicht minder ansehnlich ist.

Links zum Beitrag: