Beiträge von Oktober 2014

Videotraining CSS debuggen

Videotraining CSS debuggen

Das Grundprinzip von CSS ist ja eigentlich ganz einfach – aber trotzdem machen Stylesheets oft nicht das, was sie machen sollten. In meinem neuen Videotraining zeige ich, wie man Code untersucht und Fehler aufspürt.

CSS debuggen – video2brain Online-Videotraining

Laufzeit: 1 Std. 32 min
Einzeltraining: € 29,95
oder alle Trainings im Abonnement: ab € 19,95

Weiterlesen

Elemente mit scale() spiegeln

spiegeln mit scale()

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.
Die folgende Zeile

transform: scale(2);

macht ein Element etwa doppelt so groß. Entsprechend wird durch

transform: scale(0.5);

ein Element halb so groß wie ursprünglich.

Worauf man vielleicht nicht sofort kommt: Ein negative Wert bei scale() spiegelt ein Element.

Weiterlesen

Schnelleinführung in CSS3-Shapes

CSS3 Shapes

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

Zuerst einmal braucht man ein Element, das umflossen werden soll. Üblicherweise nimmt man dafür ein nichtrechtickes Element, beispielsweise ein freigestelltes Bild oder ein abgerundetes Foto. Dieses Element muss gefloatet werden.

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 „Element 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.

Eine sehr rasche Möglichkeit, solche Probleme zu finden, besteht darin, sich die im Dokument nicht benutzten Selektoren anzeigen zu lassen.

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