Blog durchsuchen

Kategorie: CSS

Hintergrundbilder

Bildschirmfüllende Hintergrundbilder Für bildschirmfüllende Hintergrundbilder stehen drei CSS-Werte zur Verfügung: contain, cover und 100% 100%: Bei background-size: 100% 100% wird das Hintergrundbild genau an das Element angepasst. Das bedeutet, dass das Hintergrundbild dabei eventuell verzerrt wird. Mit background-size: contain wird das Hintergrundbild immer ganz angezeigt; es kann allerdings sein, dass daneben noch die Hintergrundfarbe zu sehen ist. Bei background-size: cover füllt das Hintergrundbild das Element ganz aus, wird aber eventuell abgeschnitten.

„Sticky“ Navigation

Die Anvogation soll oben stehen bleiben, wenn man nach untern scrollt. ist ja immer ganz praktisch, vor allem, wenn man einen Onepager gestaltet: Die entsprechende div, in der die Navigation drin ist, bekommet diese Anweisungen: /*sticky menü */ #(passendes div) { position: -webkit-sticky; position: sticky; position: -moz-sticky; position: -ms-sticky; position: -o-sticky; top: 0; z-index: 9000; } damit bleibt es immer oben. Funktioniert bei Safari, IE, Firefox. Leider nicht bei Chrome.

Text mehrspaltig anordnen

Auf großen Screens kann es passieren, dass die Zeilen zu lang werden. Wenn man den Kopf bewegen muss, um eine Zeile zu Ende zu lesen, ist das äußerst schlecht für die Usability. Abhilfe bietet das Multicolumn-Modul von CSS3: Hier können Sie festlegen, dass der Textinhalt auf mehrere Spalten aufgeteilt werden soll.   Im obigen Beispiel wurd als Spaltenbreite 20em festgelegt. Wie viele Spalten dann angezeigt werden, hängt vom verfügbaren Platz ab. Der Code dafür: div […]

Tabellen responsiv machen

Ein paar CSS-tipps, um Tabellen für schmale Bildschirme nutzbar zu machen: Tabelle mit einem Div umschließen, das folgende Klasse hat: .table-container { width: 100%; overflow-y: auto; _overflow: auto; margin: 0 0 1em; } Scrollbalken für os und ios: .table-container::-webkit-scrollbar { -webkit-appearance: none; width: 14px; height: 14px; } .table-container::-webkit-scrollbar-thumb { border-radius: 8px; border: 3px solid #fff; background-color: rgba(0, 0, 0, .3); } http://maxdesign.com.au/articles/simple-responsive-table/