CSS- und HTML-Vokabular: Wörterbücher für Anfänger und Vergessliche

Selbst als erfahrener Entwickler hat man nicht, wo man geht und steht, CSS-Vokabular vor Augen. Oder murmelst du etwa kontinuierlich CSS-Syntax vor dich hin? Sollte dem so sein, wundere dich nicht, wenn die Menschen beginnen, dich zu meiden. Hast du in letzter Zeit derlei Anzeichen bemerkt, weißt du ja jetzt, woran es liegen könnte. Schon… CSS- und HTML-Vokabular: Wörterbücher für Anfänger und Vergessliche weiterlesen

Natives Lazy-Loading kommt in Chrome

Ab der Version 75 wird Chrome das sogenannte “Lazy-Loading” nativ unterstützen. Das kündigt Addy Osmani, einer der führenden Entwickler hinter dem Browser in seinem Blog an. Aktuell ist allerdings noch die Version 73. Damit wird Chrome voraussichtlich ab Juni 2019 das nachrangige Laden von Bildern und iFrames unterstützen, die einen bestimmten HTML-Tag zugeordnet bekommen haben,… Natives Lazy-Loading kommt in Chrome weiterlesen

HTML5: Videos untertiteln mit dem Track-Element

Seit der Einführung der HTML5-Videos ist das Abspielen von Videos ganz ohne Plug-ins möglich. Doch HTML5-Videos bieten weit mehr, als Videos nativ im Browser darzustellen. Mit der Track-Funktion lassen sich sogar Untertitel innerhalb von Videos einblenden. Diese werden in seiner separaten Textdatei abgelegt und können per Knopfdruck im Video ausgegeben werden. So machst du Videos… HTML5: Videos untertiteln mit dem Track-Element weiterlesen

HTML5-APIs im Einsatz: So misst du Geschwindigkeiten mit User Timing und Navigation Timing

Gerade komplexe Webanwendungen setzen der Rechenleistung des Clients häufig zu. Vor allem auf mobilen Geräten ist es wichtig, besondere Vorsorge dafür zu treffen, dass alles flott läuft. Mit der neuen User-Timing-API können Ladezeiten einfach und vor allem präzise per JavaScript getestet werden. Denn die Messwerte beziehen ihre Werte der High-Resolution-Time-API, welche Zeiten auf die Mikrosekunde… HTML5-APIs im Einsatz: So misst du Geschwindigkeiten mit User Timing und Navigation Timing weiterlesen

SVG für alle: Icons, Tools und andere Ressourcen

Im Rahmen des Siegeszugs mobiler Geräte entwickelt sich kontinuierlich neue Technologie für die schönere Gestaltung von Webseiten und Apps. Eine dieser fantastischen mobilen Technologien ist SVG, die Scalable Vector Graphics. SVG erweitert das Konzept von Vektoren über das Niveau von bloßen skalierbaren Bildern hinaus. Tatsächlich ist ein SVG eigentlich XML-basiert, was heißt, dass ein SVG… SVG für alle: Icons, Tools und andere Ressourcen weiterlesen

SVG & CSS: Was geht, was nicht in der Gestaltung per Stylesheet

SVG hat sich als Format für Vektorgrafiken im Browser etabliert. Grafikprogramme wie Adobes Illustrator unterstützen das Speichern in diesem Format und moderne Browser können sie problemlos darstellen. Da SVG-Grafiken wie auch HTML-Dokumente über eine Auszeichnungssprache erstellt werden, ist die Erstellung und Bearbeitung per Texteditor möglich. Für die Gestaltung von SVG-Grafiken kann man zudem auf Stylesheets… SVG & CSS: Was geht, was nicht in der Gestaltung per Stylesheet weiterlesen

HTML5: Wie das Template-Element komplexe Vorlagen ermöglicht

Zwar gibt es mit document.createElement() und anderen entsprechenden Methoden eine Möglichkeit, um per JavaScript HTML-Elemente zu erzeugen und dem DOM-Baum hinzuzufügen – komfortabel und übersichtlich ist das jedoch in der Regel nicht. Gerade ab einer gewissen Komplexität der zu erstellenden Elemente kann man schon mal den Überblick verlieren. Das HTML5-Template-Element soll für Abhilfe sorgen.

Gewusst wo: Wissensquellen zu HTML und CSS

Die beiden Auszeichnungssprachen HTML und CSS sind unverzichtbar für das World Wide Web und jede Website. Auch wenn du mit Anwendungen wie Dreamweaver arbeitest, kommst du ohne Kenntnisse in diesen Sprachen nicht sehr weit. Aber natürlich musst du nicht jedes Element und jede Eigenschaft kennen. Du solltest nur wissen, wo du dich schlau machen kannst.… Gewusst wo: Wissensquellen zu HTML und CSS weiterlesen

Veröffentlicht am
Kategorisiert in HTML/CSS

HTML5: Moderne Layouts mit CSS-Grids

Als es noch kein CSS und keine Trennung zwischen Inhalt und Gestaltung einer Website gab, war es üblich, Weblayouts als Tabelle zu gestalten. Mit der steigenden Bedeutung einer semantischen HTML-Auszeichnung waren Tabellen fortan nur noch für die Auszeichnung von Inhalten gedacht, die auch tatsächlich tabellarisch dargestellt werden sollen.

Veröffentlicht am
Kategorisiert in Design, HTML/CSS

CSS3: So einfach hübscht du deine Tabellen auf (2/2)

Egal ob Umsatzzahlen, Marktanalysen oder Bundesliga-Ergebnisse: Tabellen sind auch im Internet gefragt. Allerdings lassen sie sich dort lange nicht so schön gestalten, wie das mit Illustrator oder  Excel und Co. möglich ist. Mit CSS3 kannst du deine Tabellen nun aber auch im Internet grafisch ansprechend aufbereiten. Im heutigen Teil 2 des Beitrags zur Tabellenaufhübschung mit… CSS3: So einfach hübscht du deine Tabellen auf (2/2) weiterlesen

Veröffentlicht am
Kategorisiert in Design, HTML/CSS

CSS3: So einfach hübscht du deine Tabellen auf (1/2)

Auch wenn Tabellen als Layout fürs Webdesign dank CSS passé sind, gibt es nach wie vor jede Menge Inhalte, deren Präsentation im Internet einer Tabelle bedarf. Seien es Preislisten im Online-Shop, Tarife für Flüge oder Hotelbuchungen oder Ergebnisse von Sportvereinen. Wie du solche Tabellen mit CSS3 ansprechend und dynamisch gestaltest, zeige ich dir in einem… CSS3: So einfach hübscht du deine Tabellen auf (1/2) weiterlesen

Veröffentlicht am
Kategorisiert in Design, HTML/CSS

CSS-Transitions: Timing ist alles

Mit CSS3 kannst du Animationen ohne Flash und Javascript erstellen. Dabei beeinflusst du den zeitlichen Ablauf deiner Animation recht komfortabel. Unter Verwendung der Eigenschaft „transition-timing-function“ definierst du unterschiedliche Abläufe – mit und ohne Beschleunigung. Beschleunigen und abbremsen Neben der Einstellung „linear“, bei der eine Animation kontinuierlich dieselbe Geschwindigkeit hat, lassen sich Animationen auf unterschiedliche Weise… CSS-Transitions: Timing ist alles weiterlesen

Veröffentlicht am
Kategorisiert in Design, HTML/CSS

SVG: So verwendest du es richtig

Das SVG-Format hat sich in vielerlei Hinsicht zu einer zeitgemäßen Alternative zu Flash entwickelt. Denn es ist nicht nur vektorbasiert, sondern ermöglicht auch Animationen und Interaktionen. Aufgrund der unterschiedlichen Möglichkeiten, Animationen zu erstellen und SVGs in ein Webprojekt einzubinden, solltest du folgende Tipps beachten, damit auch alles so funktioniert, wie es soll.

Farben finden: 5 Tools für gute Farbkombinationen

Farben spielen im Design natürlich eine große Rolle. Doch stimmige und passende Farbkonzepte zu erstellen, ist nicht jedermanns Sache. Daher gibt es eine Reihe von Webanwendungen, die dir helfen, gute Farbkombinationen zu finden. Monochromatische Farben lassen sich ebenso zusammenstellen wie Komplementärfarben. Dabei unterscheiden sich die Tools teils bereits im Ansatz.