Adventskalender 2019

  1. 1

    SVG skalieren

    Ich hab mal ein Beispiel gebaut, in welchem dasselbe Symbol zweimal in unterschiedlichen Größen verwendet wird.

    von Gunnar Bittersmann

  2. 2

    Feststehender Footer

    Wenn Header und Footer ständig im Viewport bleiben sollen, dann ist position: sticky das Mittel der Wahl.

    von Gunnar Bittersmann

  3. 3

    Quintupelspielerereien

    Aus Anlass der Veröffentlichung von V5 unseres Forums eine mathematische Spielerei.

    von Matthias Apsel

  4. 4

    Speisekarte mit Punkten

    Eine Beschreibungsliste (description list dl), deren Elemente jeweils links und rechts zentriert und durch Punkte verbunden sind.

    von Gunnar Bittersmann

  5. 5

    Ausklappbare Navigation

    Eine Navigation (nav ul), die auf kleinen Viewports hinter einem Button verschwindet.

    von Gunnar Bittersmann

  6. 6

    Header links neben Text

    Ein Header mit einem teaser, der mit Grid links neben dem Haupttext angeordnet wird.

    von Gunnar Bittersmann

  7. 7

    Überschrift mit Rand

    Eine Überschrift, deren Rand nur so lang wie der Inhalt ist → geht mit max-width: max-content

    von Gunnar Bittersmann

  8. 8

    Geraden in der Ebene

    In wieviele Gebiete kann eine Ebene durch n Geraden geteilt werden?

    von Matthias Apsel

  9. 9

    "read-More"-Toggle

    Ein Umschalter, der per CSS weiteren Text / Listenelemente ein- und ausblendet.

    von Gunnar Bittersmann

  10. 10

    Flexbox-Achsen

    Wovon hängt ab, ob die Blockachse vertikal oder horizontal ist?

    von Gunnar Bittersmann

  11. 11

    Terminkalender

    Ein Terminkalender mit grid, der die Termine automatisch anordnet.

    von Gunnar Bittersmann

  12. 12

    Checkbox und Label

    Checkboxen, die mit ihrer Beschriftung immer in einer Zeile bleiben.

    von Rolf B

  13. 13

    Freitag, der 13.

    Der längste Abstand zwischen zwei solchen Freitagen beträgt 61 Wochen - zum Beispiel von Oktober '18 bis ?

    von Christian Hesse, zeit.de

  14. 14

    Tabellenspalten markieren

    Im verlinkten Thread gibt es mehrere Beispiele, wie sich Tabellenspalten bei :hover markieren lassen.

    von Gunnar Bittersmann

  15. 15

    Two Prisoners In Paradise

    Die Gefangenen stellen sich im Kreis auf und durch fortlaufendes Abzählen wird jeder dritte wieder in die Zelle zurückgeschickt.

    von Matthias Apsel

  16. 16

    Buttons gestalten

    Vielleicht nicht die beste Idee, einen Button nicht aussehen zu lassen wie einen Button.

    von Gunnar Bittersmann

  17. 17

    Blockzitat mit Zierelementen

    SVG zu Hilfe! Damit kriegt man schnell zwei Linien hin und auch das Anführungszeichen dazwischen.

    von Gunnar Bittersmann

  18. 18

    feste Breite mit flexiblem Padding

    header kann links und rechts padding haben und Flexbox sein.

    von Gunnar Bittersmann

  19. 19

    klickbare Flächen vergrößern

    Die klickbare Fläche wird mit absolut positioniertem a::after-Pseudoelement auf die Größe der Box ausgedehnt.

    von Gunnar Bittersmann

  20. 20

    Barrierefreie Formulare

    Die Spec verbietet nicht details in label; details ist ja kein labelable element.

    von Gunnar Bittersmann

  21. 21

    Listen im Tabellen-Look

    Listen lassen sich wie Tabellen stylen. Custom Elements sorgen dafür, dass die Adressen untereinander stehen.

    von Gunnar Bittersmann

  22. 22

    Adventskalender-Tutorial

    Wie baut man eigentlich so einen Adventskalender?

    von Matthias Scharwies

  23. 23

    Adventskalender-Tutorial Teil 2

    die Komfort-Variante unseres Adventskalenders mit PHP

    von Matthias Apsel

  24. 24

    SELFHTML sagt Dankeschön

    für eine Reihe von Zuwendungen und Fördermitgliedschaften.

    von Matthias Apsel