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