Adventskalender 2019

1. SVG skalieren

   von Gunnar Bittersmann am 13.11.2019

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

2. Feststehender Footer

   von Gunnar Bittersmann am 27.3.2018

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

3. Quintupelspielerereien

   von Matthias Apsel am 22.6.2019

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

4. Speisekarte mit Punkten

   von Gunnar Bittersmann am 05.06.2019

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

5. Ausklappbare Navigation

   von Gunnar Bittersmann am 09.01.2018

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

6. Header links neben Text

   von Gunnar Bittersmann am 15.09.2018

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

7. Überschrift mit Rand

   von Gunnar Bittersmann am 26.07.2018

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

8. Geraden in der Ebene

   von Matthias Apsel am 08.02.2018

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

9. "read-More"-Toggle

   von Gunnar Bittersmann am 05.01.2018

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

10. Flexbox-Achsen

    von Gunnar Bittersmann am 28.09.2018

    Ob die Blockachse vertikal oder horizontal ist, hängt einerseits von der Schreibrichtung (writing-mode) ab, andererseits natürlich auch von flex-direction.

11. Terminkalender

    von Gunnar Bittersmann am 25.08.2018

    Ein Terminkalender mit grid, der die Termine automatisch anordnet; sich nicht überlappende Termine sind untereinander, es werden nur so viele Spalten beansprucht wie nötig.

12. Checkbox und Label

    von Rolf B. am 29.10.2019

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

13. Freitag, der 13.

    von Christian Hesse, zeit.de

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

14. Tabellenspalten markieren

    von Gunnar Bittersmann am 4.11.2019

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

15. Two Prisoners In Paradise

    von Matthias Apsel am 3.11.2018

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

16. Buttons gestalten

    von Gunnar Bittersmann am 24.02.2019

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

17. Blockzitat mit Zierelementen

    von Gunnar Bittersmann am 19.01.2018

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

18. feste Breite mit flexiblem Padding

    von Gunnar Bittersmann am 17.12.2018

    header kann links und rechts padding haben und Flexbox sein.

19. klickbare Flächen vergrößern

    von Gunnar Bittersmann am 27.02.2018

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

20. Barrierefreie Formulare

    von Gunnar Bittersmann am 26.07.2019

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

21. Listen im Tabellen-Look

    von Gunnar Bittersmann am 30.03.2019

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

22. Adventskalender-Tutorial

    von Matthias Scharwies

    Wie baut man eigentlich so einen Adventskalender?

23. Adventskalender-Tutorial Teil 2

    von Matthias Apsel

    die Komfort-Variante unseres Adventskalenders mit PHP

24. SELFHTML sagt Dankeschön.

    von Matthias Apsel

    für eine Reihe von Zuwendungen und Fördermitgliedschaften