CSS/Tutorials/Hintergrund

Text-Info

3x30min

einfach

• 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. Gestaltung mit CSS
   • Hintergrundfarben
   • Hintergrundgrafiken
   • multiple backgrounds
   • Animationen
2. Hero-Images
   • background-size
   • image-set()
   • img, picture und srcset
   • Parallax Scrolling
3. CSS Sprites
   • background-position
4. Image Replacement
   • Prinzip
   • SVG-Grafiken
   • Inline-SVG
5. äußere Gestaltung
   • border + border-radius
   • outline
   • box-shadow
6. 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-attachment
  • background-blend-mode
  • background-clip
  • background-color
  • background-origin
  • background-position
  • background-repeat
  • background-size

sowie die Funktionen

• image-set()
• conic-gradient()
• linear-gradient()
• radial-gradient()
• repeating-linear-gradient()
• repeating-radial-gradient()