Florence Maurice

Webthemen

Besser als display: none - Inhalte auf Smartphones richtig ausblenden

Beim responsiven Webdesign geht man üblicherweise von einer HTML-Basis aus, die Anpassungen an die unterschiedlichen Viewportbreiten finden über Media Queries, d.h. über CSS statt. Das Problem dabei ist, dass auf einem klassischen Desktop-Monitor wesentlich mehr Platz zur Verfügung steht, als bei einem klassischen kleinen Smartphone-Screen.

Weiterlesen ...

7 Tipps für die Arbeit mit CSS-Shapes

CSS-Shapes ermöglichen es, Inhalte nicht-eckig umfließen zu lassen.

Weiterlesen ...

Elemente mit scale() spiegeln

gespiegelte Elemente

CSS3-Transformationen sind eine schöne Sachen. Hinter die Eigenschaft `transform` schreibt man die gewünschte Operation wie beispielsweise `rotate()`, um ein Element zu drehen, oder `scale()`, um ein Element zu vergrößern bzw. zu verkleinern. Man kann aber auch Elemente damit spiegeln.

Weiterlesen ...

Schnelleinführung in CSS3-Shapes

nicht rechteckig umflossenes Bild

Mit CSS3-Shapes kann man Elemente nicht eckig umfließen lassen. Und das geht so:

Weiterlesen ...

CSS-Quicktipp: Tippfehler bei Selektoren finden

Wenn eine Formatierung nicht bei einem Element ankommt, so kann das die unterschiedlichsten Ursachen haben. Zuerst sollte man immer in die Entwicklertools kontrollieren, ob dort die CSS-Deklarationen irgendwie beim Element auftauchen. Dafür ruft man die Entwicklertools auf (Klick mit rechter Maustaste und "Untersuchen" oder Ähnlich). Dann wählt man das Element im HTML-Teil links aus und kontrolliert die CSS-Regeln im rechten Bereich. Wenn die Angaben überhaupt nicht vorkommen, bedeutet das, dass es entweder einen Tippfehler beim Selektor gibt oder - bei zusammengesetzte Selektoren - dass die Verschachtelung nicht stimmt.

Weiterlesen ...

Halb feststehende Bereiche mit position: sticky

Heute sieht man häufiger folgendes Scrollverhalten: Oben gibt es einen fetten Header und darunter die Navigation. Beim Scrollen verschwindet der Header irgendwann, die Navigation bewegt sich beim Scrollen nach oben - und bleibt dort stehen. Sie verhält sich in dem Moment, wo sie oben anbekommen ist, wie ein mit `position: fixed` positioniertes Element. Zu Beginn jedoch, solange sie auch normal sichtbar ist, bewegt sie sich beim Scrollen normal mit.

Weiterlesen ...

CSS-Quicktipp: Hintergrundbilder genau zwei Mal wiederholen

Element mit zwei Kreisen (Hintergrundbilder)

Wenn ich in meinen CSS-Kursen vorstelle, wie man mit Hintergrundbildern arbeitet, werde ich recht oft gefragt: "Und kann man auch angeben, dass ein Hintergrundbild nur zwei Mal oder drei Mal wiederholt wird? Also die exakte Anzahl festlegen?"

Weiterlesen ...