← Kurse
Interaktives Erzählen im Web
Prozess
Übungen
Zeitplan
Winter 2025/2026
Portrait
Aufgabe
Wir portraitieren uns gegenseitig – mit CSS.
Vorgaben
immer mit der Maßeinheit vw arbeiten!
(wenn möglich)
CodePens
Bausteine:
Form mit CSS
Absolute Positionierung
Absolute Positionierung, verschachtelt
Schlagschatten
Deckkraft / Opacity
Rotation
Hintergrundbild
Animation
Beispiele:
Portrait einfach
Portrait einfach, :hover Mund
Portrait komplex
Portrait komplex, überlagert Webseite
Hilfsmittel
border-radius-playground
CSS Shapes
CSS Transform Generator
Color Picker
cssgradient.io
HDR Gradients
(um das CSS zu bekommen, oben rechts auf „Get the CSS“ klicken und alles zwischen den geschweifeten Klammern kopieren)
für heute nicht empfohlen:
CSS-Clip-Path-Generator
(custom polygon auswählen!)
Links
Shreyasi Patil:
Pure CSS face
Mark-Simulacrum
CSS face
Annie Bombanie
Madeline Floating in the Sky - Pure CSS
A Single Div: a CSS drawing project by Lynn Fisher
kein CSS:
Wong Ping
Video
draw a flat design face using html and css only
Drawing a man's face with HTML and CSS
Tutorials
Learn CSS Positioning
(weiterführend) Animationen:
Master CSS Animation Property in 11 Minutes