CSS

Die Grundlagen von CSS

Die Seite CSS4you ist ein toller Platz zum Nachschlagen. 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 in CSS

Einheiten in CSS

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 von Screenreader-Nutzern verbergen wollen, sind generierte Inhalte natürliche keine gute Idee…

Flexboxen –

  • 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!)
  • A complete Guide to flexbox (Schöne Übersicht: kurz, aber vollständig, dank zahlreicher Bilder leicht verständlich)
  • Flexbox Grid-Framework, anhand der Umsetzung versteht man einerseits die Funktionsweise der Flexionen – andererseits braucht man das Layout auch nicht mehr selber machen, sondern kann gleich das Framework verwenden, das auf 12 Rasterspalten basiert.

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.