CSS/Tutorials/Hintergrund

Informationen zu diesem Text

Lesedauer

3x30min

Schwierigkeitsgrad

einfach

Vorausgesetztes Wissen

• HTML
• CSS

In diesem Kurs lernen Sie, wie Sie den Hintergrund von Webseiten mit Hintergrundfarben, – grafiken und -mustern gestalten können.

Dies soll jedoch immer responsiv und so schlank wie möglich geschehen, um schlanke und damit schnelle Webseiten zu erreichen.

1. äußere Gestaltung
   • Rahmen mit border und border-radius
   • outline
   • box-shadow
2. Gestaltung mit CSS
   • Hintergrundfarben
   • Hintergrundgrafiken
   • multiple backgrounds
   • Animationen
3. Image Replacement
   • Prinzip
   • SVG-Grafiken
   • Inline-SVG
4. CSS Sprites
5. Parallax Scrolling
6. background
   • background-image
   • background-attachment
   • background-blend-mode
   • background-clip
   • background-color
   • background-origin
   • background-position
   • background-size
   • background-repeat
     
     
     
7. Verläufe mit den CSS-Funktionen
   • linear-gradient()
   • repeating-linear-gradient()
   • radial-gradient()
   • repeating-radial-gradient()
   • conic-gradient()
   • repeating-conic-gradient()
     
     
     
     
     
     
     
     
     

Siehe auch

Wichtig für die Gestaltung von Hintergrundfarben und -bildern sind folgende Eigenschaften:

• background als zusammenfassende Eigenschaft von
  • background-image
  • background-blend-mode
  • background-attachment
  • background-clip
  • background-color
  • background-origin
  • background-position
  • background-size
  • background-repeat

sowie die Funktionen

• linear-gradient()
• radial-gradient()
• repeating-linear-gradient()
• repeating-radial-gradient()