Wir portraitieren uns gegenseitig mit HTML und CSS.
→ Code-Vorlage ←
(1) Elementen können wir eine Breite und Höhe geben (auch wenn sie leer sind).
(2) Wir können Elemente frei auf dem Bildschirm positionieren, und zwar (u.a.) mit „absoluter Positionierung“ (position: absolute;)
(3) Verschachteln wir absolut positionierte Elemente (im HTML: div innerhalb eines divs), dann bezieht sich das Koordinatensystem des inneren Divs auf die Position des äußeren Divs. Das ist hilfreich!
(4) Elemente können mit einem clip-path beschnitten werden (schneidet auch Schatten und Border ab!). Der clip-path passt sich an die Höhe und Breite des Elementes an!
(5) Per :hover können wir festlegen, wie ein Element aussieht, wenn es mit der Maus berührt wird. So können wir unseren Portraits Interaktivität hinzufügen.