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… Modernes Webdesign: Diese Fehler solltest du vermeiden weiterlesen

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… Demnächst auf Ihrem Bildschirm: CSS3-Animations mit der neuen JavaScript-Methode animate() weiterlesen

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 – Freie Bibliothek mit HTML5-Juwelen zur sofortigen Verwendung weiterlesen

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.css:… Magic.css: CSS3 Animations mit Spezialeffekten weiterlesen

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… Unausweichlich: 10 aktuelle JavaScript-Lösungen, an denen ich nicht vorbeikam weiterlesen

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… SVG und JavaScript: Was ist möglich, was muss beachtet werden? weiterlesen

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… CSS und SVG: 2 neue, kostenlose Dienste für Hintergründe und Verläufe in HTML 5 weiterlesen

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.… Scrollen, sliden, biegen und mehr: 5 frische jQuery-Plugins aus dem November 2013 weiterlesen

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.js:… Least.js: Responsive Bildergalerie auf Basis von HTML5, CSS3 und jQuery weiterlesen

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. Maskierung in CSS… CSS3: Komplexe Beschneidungspfade mit der Eigenschaft Clip-Path weiterlesen

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… HTML5 Device Mockups: Populäre Geräte als Rahmen für Live-Webinhalte auf der eigenen Site nutzen weiterlesen

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. Adobe und HTML Texte in Form bringen mit CSS-Exclusions Texte in HTML sind… CSS3: Mit Exclusions und Regions Texte darstellen wie in InDesign weiterlesen

„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… „CSS3 – Leitfaden für Webdesigner“: 5 Gewinner und viele Trostpreise weiterlesen

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. 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)… CSS3: Das etwas andere Box-Modell mit {box-sizing:border-box} weiterlesen

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… HINT.css – Tooltipps ganz ohne JavaScript, nur mit reinem CSS3 und HTML5 weiterlesen