CSS

border

Zweifarbige border

Linien mit CSS zweifarbig gestalten

Eine zweifarbige border kann mit dem border-style groove erstellt werden. Es wird nur einen Farbwert angeben und der zweite Wert errechnet sich. <style type="text/css"> .box {border-top: 2px groove #fff;} </style> Beispiel: zweifarbige border mit…

Media Queries in SVG-Dateien

Media Queries in SVG-Dateien

CSS Media Queries können auch in SVG-Dateien verwendet werden

Diese Technik funktioniert derzeit im Firefox, Safari und Google Chrome. Fenstergröße verändern CSS in der SVG-Datei <svg width="100%" height="100%" ...> <style type="text/css"> @media (max-width: 140px) { .c {fill: #f0f} } @media…

-webkit-text-size-adjust

Text wird zu groß dargestellt

Textvergrößerung im iPhone, iPad und iPod deaktivieren

Kleine Texte werden im iOS automatisch größer dargestellt um die Lesbarkeit zu verbessern. Wurde eine Seite für mobile Geräte optimiert, führt die automatische Vergrößerung zu unschönen Effekten. Die automatische Textvergrößerung im iPhone, iPad und iPod deaktiviert…

Abstand bei Bildern

Abstand bei Bildern

Abstand unter einem Bild entfernen

Bei Verwendung von Umrandungen bei Bildern wird in manchen Browsern oft eine Lücke zwischen Bild und border sichtbar. Auch margin: 0 und padding: 0 haben oft keinen Effekt. Dieses Problem kann mit display: block, vertical-align: top | bottom | middle, font-size: 0, line-height:…

Flexible Eingabefelder

Die einfache Angabe von display: block reicht bei Eingabefeldern nicht aus. Eine Längenangabe ist notwendig. Bei der Verwendung von width: 100% wird der Innenabstand zu der Gesamtbreite hinzuaddiert wodurch das Feld zu lang wird. Deswegen werden für Eingabefelder oft feste,…

Internet Explorer 6 min-height

Der Internet Explorer 6 kennt keine min-height. Es gibt aber Wege dies zu ermöglichen. .box { height: expression( this.scrollHeight > 100 ? "100px" : "auto" ); } oder besser: .box { min-height: 100px; height: auto !important;…

Anzeigenkennung

Anzeigenkennung nur bei vorhandener Werbung anzeigen

AdBlocker mit CSS erkennen

Eine Anzeigenkennung ist für den Benutzer eine wichtige Hilfe. Da der Adserver nicht immer Werbung ausliefert und einige User Adblock installiert haben, bleibt manchmal die Anzeigenkennung verloren im Content stehen. Im folgenden Beispiel wird die Überprüfung der…

tap color

iPhone & iPad graue Hintergrundfarbe beim Klicken anpassen

Safari tap color ändern

Die tap color in iOS-Geräten kann für klickbare Elemente verändert werden: <style type="text/css"> html {-webkit-tap-highlight-color: rgba(0, 255, 0, .4);} </style> Beispiel Mit iPhone oder iPad hier Klicken: iPhone & iPad tap color

Impressum