Übung: un/lesbar

Aufgabe (1): unlesbar

Wir zerlegen OpenAIs „Terms of Use“, gestalten sie um, zerstören sie – machen sie unlesbar – und provozieren dabei eine interessante Erscheinung, die mehr als Bild denn als Text funktioniert

Hier ist die Vorlage

Aufgabe (2): lesbar

Wir machen eine sehr spezielle, aber, wie ich finde, gute (Teil-)Definition von Interaction Design lesbar. Im Idealfall bekommt sie auch ein Verhalten.

Nutzt (mindestens):

• margin-bottom (s.u. „Abstände: außen“)
• für body z.B. margin: 10px; (Abstand zwischen Inhalt und Fensterrand)
• font-size
• line-height
• color

Hier ist die Vorlage

CSS-Eigenschaften

Farbe

• (Textfarbe)
  color: red;
• (Hintergrundfarbe)
  background-color: yellow;
• Liste aller Farbnamen

Schrift

• (Schriftart)
  font-family: sans-serif;
  font-family: monospace;
  font-family: serif;
• (Schriftgröße)
  font-size: 30px;
• (Zeilenhöhe)
  line-height: 0;
  line-height: 40px;
• (Buchstabenabstand / Spationierung)
  letter-spacing: 10px;
  letter-spacing: -10px;
• (Textausrichtung)
  text-align: center;
  text-align: right;
• (Schriftstil)
  font-style: italic;
• (Schriftstärke)
  font-weight: bold;
• (Text-Decoration)
  text-decoration: underline;

Abstände: außen

• Außenabstand oben
  margin-top: 30px;
• Außenabstand unten
  margin-bottom: 30px;
• Außenabstand links
  margin-left: -50px;
• Außenabstand rechts
  margin-left: -50px;

Abstände: innen

• Innenabstand oben
  padding-top: 130px;
• Innenabstand unten
  padding-bottom: 130px;
• Innenabstand links
  padding-left: 250px;
• Innenabstand rechts
  padding-left: 250px;