Kategorie: Coding
-
Mit „Adaptive Images“ Bilder für responsive Webdesigns optimieren
Die Lösung „Adaptive Images“ wurde von Matt Wilcox entwickelt, um die Dateigröße von Bildern in responsive Webdesigns zu verringern. Mit Hilfe der PHP- und Javascript-Lösung kannst du erreichen, dass von allen Bilder auf deiner Webseite automatisch verschiedene kleinere Bildformate erstellt werden. Diese, in Format und Dateigröße reduzierten Bilder, werden dann…
-
Video-Tipp: HTML- und CSS-Elemente schnell im Browser kontrollieren
Im folgenden kleinen Video-Tutorial möchte ich dir kurz zeigen, wie du mit Hilfe des Google Chrome Developer Tools oder der Firefox- und Safari-Erweiterung Firebug HTML und CSS-Elemente einer Webseite direkt im Browser kontrollieren kannst. So kannst du z.B. schnell die CSS-Klasse und die verwendeten CSS-Eigenschaften eines HTML-Elements heraus finden und…
-
Ein Glossar in HTML und CSS erstellen – so funktioniert’s
Um ein Glossar, z.B. auf deinem WordPress-Blog zu erstellen, benötigst du eigentlich kein extra Plugin. Mit ein paar Zeilen HTML und einigen extra CSS-Styles kannst du in wenigen Schritten dein eigenes Glossar einrichten. Ich habe den benötigten HTML und CSS Code bereits vorbereitet, so dass du diesen nur noch in…
-
CSS-Tipp: Eingebettete Videos für responsive Webdesigns optimieren
Schon seit einer Weile habe ich nach einer praktischen Lösung gesucht, um über iframe eingebettete YouTube- oder Vimeo-Videos für responsive Layouts zu optimieren. Die Video-Player lassen sich zwar auch standardmäßig mit Hilfe der CSS-Eigenschaft max-width:100%; skalieren, aber leider entsteht so immer ein unschöner schwarzer Balken, wenn man das Video auf…
-
Diskussionsanregung: Sollte man HTML5 und CSS3 heute schon in Webseiten-Projekten einsetzen?
Mit diesem Artikel möchte ich eine kleine Diskussionsanregung geben und dich nach deiner Meinung fragen, inwieweit du HTML5 und CSS3 heute schon in deinen Webseiten-Projekten einsetzt. Aus meinen eigenen Erfahrungen ist eine der Problematiken bei der Verwendung CSS3 beispielsweise, dass die CSS3-Eigenschaften in der CSS-Validierung von W3C immer noch als…
-
CSS-Tipp: Inputfelder mit CSS box-shadow und Leuchteffekt
Bei Eingabefeldern (z.B. in Formularen oder bei der Suche) ist es sinnvoll, einen optischen Effekt zu erzeugen, sobald der Nutzer das Input-feld anklickt. Mit Hilfe von CSS box-shadows kann man diesen Effekt sehr schön erreichen und sogar einen richtigen Leuchteffekt erzeugen. Im Artikel erkläre ich noch einmal kurz, wie die…