Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lernen Herausforderung: Dekorative Effekte in CSS umsetzen | Dekorative Effekte mit CSS Hinzufügen
CSS-Grundlagen

bookHerausforderung: Dekorative Effekte in CSS umsetzen

Aufgabe

Verbesserung der visuellen Attraktivität der Webseite. Die Aufgabe umfasst:

  • Einen Schatten zum div-Element mit dem Klassennamen card hinzufügen. Die angegebenen Schattenwerte sind
rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px
  • Ein Hintergrundbild zum div-Element mit dem Klassennamen card hinzufügen. Der Bildlink ist angegeben:
   https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png
  • Das Hintergrundbild innerhalb der Karte zentrieren.
index.html

index.html

index.css

index.css

copy
  • Um einem Element einen Schatten hinzuzufügen, die Eigenschaft box-shadow mit dem angegebenen Wert verwenden. In diesem Fall lautet der Wert rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
  • Für das Setzen eines Bildes als Hintergrund mit der Eigenschaft background-image die Syntax url("correct path") verwenden. In die Klammern Anführungszeichen setzen und den Pfad zum Bild angeben. In dieser Aufgabe ist der korrekte Pfad: url("https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png").
  • Um die Position des Hintergrundbildes zu bestimmen, die Eigenschaft background-position verwenden. In diesem Fall den Wert center für die Eigenschaft setzen.
index.html

index.html

index.css

index.css

copy

1. Welche Eigenschaft fügt einem Elementenrahmen einen Schatten hinzu?

2. Wie kann ein Bild als Hintergrund eines Elements hinzugefügt werden?

question mark

Welche Eigenschaft fügt einem Elementenrahmen einen Schatten hinzu?

Select the correct answer

question mark

Wie kann ein Bild als Hintergrund eines Elements hinzugefügt werden?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 5. Kapitel 6

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

bookHerausforderung: Dekorative Effekte in CSS umsetzen

Swipe um das Menü anzuzeigen

Aufgabe

Verbesserung der visuellen Attraktivität der Webseite. Die Aufgabe umfasst:

  • Einen Schatten zum div-Element mit dem Klassennamen card hinzufügen. Die angegebenen Schattenwerte sind
rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px
  • Ein Hintergrundbild zum div-Element mit dem Klassennamen card hinzufügen. Der Bildlink ist angegeben:
   https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png
  • Das Hintergrundbild innerhalb der Karte zentrieren.
index.html

index.html

index.css

index.css

copy
  • Um einem Element einen Schatten hinzuzufügen, die Eigenschaft box-shadow mit dem angegebenen Wert verwenden. In diesem Fall lautet der Wert rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
  • Für das Setzen eines Bildes als Hintergrund mit der Eigenschaft background-image die Syntax url("correct path") verwenden. In die Klammern Anführungszeichen setzen und den Pfad zum Bild angeben. In dieser Aufgabe ist der korrekte Pfad: url("https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png").
  • Um die Position des Hintergrundbildes zu bestimmen, die Eigenschaft background-position verwenden. In diesem Fall den Wert center für die Eigenschaft setzen.
index.html

index.html

index.css

index.css

copy

1. Welche Eigenschaft fügt einem Elementenrahmen einen Schatten hinzu?

2. Wie kann ein Bild als Hintergrund eines Elements hinzugefügt werden?

question mark

Welche Eigenschaft fügt einem Elementenrahmen einen Schatten hinzu?

Select the correct answer

question mark

Wie kann ein Bild als Hintergrund eines Elements hinzugefügt werden?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 5. Kapitel 6
some-alt