capture

Aufgabe

Wir portraitieren uns gegenseitig – mit CSS.

Vorgaben

• Editor so einstellen, dass Code links und Ergebnis rechts ist
• immer die Einheit vw verwenden (wenn möglich)
• Ziel: Möglichkeiten des Mediums erkunden, eigene Ästhetik entwickeln
• Einstz von KI: Nein

Hilfsmittel

• CSS-Clip-Path-Generator (custom polygon auswählen!)
• border-radius-playground
• CSS Shapes
• CSS Transform Generator
• Color Picker
• cssgradient.io
• https://csshero.org/mesher/
• HDR Gradients (um das CSS zu bekommen, oben rechts auf „Get the CSS“ klicken und alles zwischen den geschweifeten Klammern kopieren)

CodePens

• Form mit CSS
• Absolute Positionierung
• Absolute Positionierung, verschachtelt
• Schlagschatten
• Deckkraft / Opacity
• Rotation
• Hintergrundbild
• Portrait, grober Anfang, 01
• Portrait, grober Anfang, 01 :hover (mit der Maus über die Augen fahren)
• Portrait, grober Anfang, im Kontext, 01
• Animation

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
• Wong Ping (kein CSS)

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