DDZ Custom-Theme CSS
Elemente/Inhalte
Sections
section a
section b
section c
section d
section e
section heighlight
section (ohne Farbklasse, passt sich der Hintergrundfarbe der Website an)
section white
section a textured
section b textured
section c textured
section d textured
section e textured
section heighlight textured
Boxen
box a
box b
box c
box d
box e
box heighlight
box invert
box white
box b not-rounded
box a inset-top
box heighlight inset-top w-80 center-content
Kreise
circle a
circle b
circle c
circle d
circle e
circle e
circle invert
Buttons
Listen
- Apfel
- Birne
- Williams-Christ
- Glühbirne
- Melone
- Apfel
- Birne
- Williams-Christ
- Glühbirne
- Melone
- Apfel
- Birne
- Williams-Christ
- Glühbirne
- Melone
- Apfel
- Birne
- Williams-Christ
- Glühbirne
- Melone
- Apfel
- Birne
- Williams-Christ
- Glühbirne
- Melone
- Apfel
- Birne
- Williams-Christ
- Glühbirne
- Melone
- Apfel
- Birne
- Williams-Christ
- Glühbirne
- Melone
Breite der Elemente bestimmen
Prozentual zur Verfügung stehenden max. Breite innerhalb des Eltern-Elements.
w-10
w-20
w-30
w-40
w-50
w-60
w-70
w-80
w-90
Ohne Klasse – 100% breit
Inhalte horizontal zentrieren
box c center-content
Ready to contribute?
Submit your abstract via the online submission platform.
section d center-content
Ready to contribute?
Submit your abstract via the online submission platform.
Elemente selbst horizontal zentrieren
box heighlight w-50 center-self
Ready to contribute?
Submit your abstract via the online submission platform.
Überschriften
Überschrift H1
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Überschrift H2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Überschrift H3
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Überschrift H4
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Schriftstärken
font-weight-200
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
font-weight-300
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
font-weight-400
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
font-weight-500
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
font-weight-600
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
font-weight-700
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
font-weight-800
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
font-weight-900
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Schriftgrößen
Die Zahlen stehen für Prozent relativ zur Normalschriftgröße des Standart-Fließtextes
font-size-60
font-size-70
font-size-80
font-size-100
font-size-120
font-size-150
font-size-200
font-size-300
Effekte beim Eintreten in den Viewport
Langsam runterscrollen… Standardmäßig wird der Effekt bei jedem Erscheinen des Elements im Viewport erzeugt. Die zusätzliche Klasse once bewirkt, dass der Effekt nur einmal sichtbar ist.
box a fx fade-in
box b fx from-left
box c fx from-right
box a fx scale
box heighlight fx from-left once
Test – Buttons innerhalb der Farbklassen
box a center-content
Ready to contribute?
Submit your abstract via the online submission platform.
box b center-content
Ready to contribute?
Submit your abstract via the online submission platform.
box c center-content
Ready to contribute?
Submit your abstract via the online submission platform.
box d center-content
Ready to contribute?
Submit your abstract via the online submission platform.
box e center-content
Ready to contribute?
Submit your abstract via the online submission platform.
box heighlight center-content
Ready to contribute?
Submit your abstract via the online submission platform.