Das iPhone 4 hat ein spezielles Retina-Display. Auf diesem hochauflösendem Bildschirm können Bilder besonders scharf dargestellt werden. Um auch alle verwendeten Bilder in einem Webdesign oder WordPress-Theme (z.B. das Logo oder ein Hintergrund-Musterbild) für das Retina-Display des iPhones zu optimieren, kannst du CSS Media Queries in deinem Stylesheet nutzen.
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 diese dann gegebenenfalls anpassen oder,…
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 deine eigene Webseite einfügen und…
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 einem kleinen Bildschirm oder auf…
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 Fehlermeldungen ausgegeben werden. Außerdem ist…
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 CSS box-shadow Eigenschaft funktioniert. Außerdem…