CSS lernen

CSS lernen – Grundlagen

Die Seite CSS4you ist ein toller Platz zum Nachschlagen und wenn Sie CSS lernen wollen. Die Seite ist nicht nur eine fast vollständige Referenz für CSS; sie bietet auch etwas, was man auf den meisten CSS-Seiten vermisst: zu den Eigenschaften gibt es die Standardwerte. Dasselbe gilt übrigens für www.w3schools.com.

Referenz

Die W3C-Spezifikation

CSS3-Referenz auf Webkompetenz
des bekannten Autors und Gründers von SelfHTML Stefan Münz

Browser-Kompatibilität

Selektoren

Einheiten

CSS generated Content (Inhalte, die per CSS generiert werden)

Übrigens: CSS-generierte Inhalte werden entgegen der allgemeinen Meinung von Screenreadern vorgelesen. Daher ist es sinnvoll, diese auch dann zu verwenden, wenn Screenreader-Nutzer Zugang zu diesen Inhalten haben sollen. Wenn Sie Informationen vor Screenreader-Nutzern verbergen wollen, sind generierte Inhalte natürliche keine gute Idee – beachten Sie auch die gewünschte Trennung von Inhalt und Layout. CSS-generierte Inhalte sollen kein HTML ersetzen!

CSS Grid

Flexboxen

  • A complete Guide to flexbox (Schöne Übersicht: kurz, aber vollständig, dank zahlreicher Bilder leicht verständlich)
  • Ganz ähnlicher „Guide to flexbox„, ohne Erläuterungen, aber zum Mitmachen (gefunden bei Jens Grochtdreis)
  • Generator für alte Schreibweisen (IE ab Version 10 und andere aus der Zeit – dreimal überlegen, ob man für diese antiken Schätzchen seinen Code aufblähen und sich die Wartung erschweren will – falls nötig hilft der Link weiter!)

Meistens dürfte aber auch so was reichen (von Heydon Pickering: „Writing Less Damn Code“)

.grid {
  display: flex;
  flex-flow: row wrap;
}

.grid > * {
  flex-basis: 10em;
  flex-grow: 1;
}

Animationen

Transitions

Den zeitlichen Ablauf von Transitions zu schreiben ist unbequem, um es mal vorsichtig zu formulieren.

Eine gute Hilfe ist die Seite cubic-bezier.com. Super ist aber auch die grafische Hilfe, die einem der kostenlose Frontend-Editor Brackets von Adobe bietet: geben Sie einfach irgendein Schlüsselwort an (z. B. ease). Klicken Sie es dann mit rechts an und wählen Sie aus dem Kontext-Menü „schnell bearbeiten“. Voilá! Eine grafische Darstellung des Effektes erscheint und Sie können die animating-timing-function (so der Name der entsprechenden CSS-Eigenschaft) mit der Maus beeinflussen. Abschließend empfiehlt sich u. U. noch ein wenig rechnerisches Finetuning für die so ermittelten Werte (z. B. Für optimierte Relationen oder Runden der Ergebnisse).

Interessante Lösungen

Ein Element teilweise verstecken und beim Überfahren mit der Maus wieder sichtbar machen:

To be continued…

Defekte Links melden, bitte!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.