-
1
SVG skalieren
Ich hab mal ein Beispiel gebaut, in welchem dasselbe Symbol zweimal in unterschiedlichen Größen verwendet wird.
-
2
Feststehender Footer
Wenn Header und Footer ständig im Viewport bleiben sollen, dann ist
position: sticky
das Mittel der Wahl. -
3
Quintupelspielerereien
Aus Anlass der Veröffentlichung von V5 unseres Forums eine mathematische Spielerei.
-
4
Speisekarte mit Punkten
Eine Beschreibungsliste (description list
dl
), deren Elemente jeweils links und rechts zentriert und durch Punkte verbunden sind. -
5
Ausklappbare Navigation
Eine Navigation (
nav ul
), die auf kleinen Viewports hinter einem Button verschwindet. -
6
Header links neben Text
Ein Header mit einem teaser, der mit Grid links neben dem Haupttext angeordnet wird.
-
7
Überschrift mit Rand
Eine Überschrift, deren Rand nur so lang wie der Inhalt ist → geht mit
max-width: max-content
-
8
Geraden in der Ebene
In wieviele Gebiete kann eine Ebene durch n Geraden geteilt werden?
-
9
"read-More"-Toggle
Ein Umschalter, der per CSS weiteren Text / Listenelemente ein- und ausblendet.
-
10
Flexbox-Achsen
Wovon hängt ab, ob die Blockachse vertikal oder horizontal ist?
-
11
Terminkalender
Ein Terminkalender mit grid, der die Termine automatisch anordnet.
-
12
Checkbox und Label
Checkboxen, die mit ihrer Beschriftung immer in einer Zeile bleiben.
-
13
Freitag, der 13.
Der längste Abstand zwischen zwei solchen Freitagen beträgt 61 Wochen - zum Beispiel von Oktober '18 bis ?
-
14
Tabellenspalten markieren
Im verlinkten Thread gibt es mehrere Beispiele, wie sich Tabellenspalten bei
:hover
markieren lassen. -
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.
-
16
Buttons gestalten
Vielleicht nicht die beste Idee, einen Button nicht aussehen zu lassen wie einen Button.
-
17
Blockzitat mit Zierelementen
SVG zu Hilfe! Damit kriegt man schnell zwei Linien hin und auch das Anführungszeichen dazwischen.
-
18
feste Breite mit flexiblem Padding
header kann links und rechts padding haben und Flexbox sein.
-
19
klickbare Flächen vergrößern
Die klickbare Fläche wird mit absolut positioniertem
a::after
-Pseudoelement auf die Größe der Box ausgedehnt. -
20
Barrierefreie Formulare
Die Spec verbietet nicht
details
inlabel
; details ist ja kein labelable element. -
21
Listen im Tabellen-Look
Listen lassen sich wie Tabellen stylen. Custom Elements sorgen dafür, dass die Adressen untereinander stehen.
-
22
Adventskalender-Tutorial
Wie baut man eigentlich so einen Adventskalender?
-
23
Adventskalender-Tutorial Teil 2
die Komfort-Variante unseres Adventskalenders mit PHP
-
24
SELFHTML sagt Dankeschön
für eine Reihe von Zuwendungen und Fördermitgliedschaften.