Lernen Herausforderung: Dekorative Effekte in CSS umsetzen | Dekorative Effekte mit CSS Hinzufügen

Aufgabe

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

Hinzufügen eines Schattens zum div-Element mit dem Klassennamen card. Die angegebenen Schattenwerte sind rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
Hinzufügen eines Hintergrundbildes zum div-Element mit dem Klassennamen card. Der Bildlink ist bereitgestellt: https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png.
Zentrieren des Hintergrundbildes innerhalb der Karte.

index.html

index.css

Zum Hinzufügen eines Schattens zu einem Element 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.
Um ein Bild als Hintergrund mit der Eigenschaft background-image festzulegen, 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 bereitgestellt: url("https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png").
Zur Festlegung der Position des Hintergrundbildes die Eigenschaft background-position verwenden. In diesem Fall den Wert center für die Eigenschaft setzen.

index.html

index.css

Hinweis

Sie haben den Kurs "CSS-Grundlagen" abgeschlossen und die Grundlagen der Webgestaltung gemeistert. Steigern Sie nun Ihre Designkompetenz mit "Fortgeschrittene CSS-Techniken" oder beginnen Sie mit der Programmierung von Interaktivität in "Einführung in JavaScript". Ihre Reise als Webentwickler geht weiter!

1. Welche Eigenschaft fügt einem Element einen Schatten um dessen Rahmen hinzu?

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

War alles klar?

Danke für Ihr Feedback!

Abschnitt 5. Kapitel 6

Fragen Sie AI

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

Awesome!

Completion rate improved to 2.56

Swipe um das Menü anzuzeigen

Aufgabe

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

Hinzufügen eines Schattens zum div-Element mit dem Klassennamen card. Die angegebenen Schattenwerte sind rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
Hinzufügen eines Hintergrundbildes zum div-Element mit dem Klassennamen card. Der Bildlink ist bereitgestellt: https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png.
Zentrieren des Hintergrundbildes innerhalb der Karte.

index.html

index.css

Zum Hinzufügen eines Schattens zu einem Element 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.
Um ein Bild als Hintergrund mit der Eigenschaft background-image festzulegen, 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 bereitgestellt: url("https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png").
Zur Festlegung der Position des Hintergrundbildes die Eigenschaft background-position verwenden. In diesem Fall den Wert center für die Eigenschaft setzen.

index.html

index.css

Hinweis

Sie haben den Kurs "CSS-Grundlagen" abgeschlossen und die Grundlagen der Webgestaltung gemeistert. Steigern Sie nun Ihre Designkompetenz mit "Fortgeschrittene CSS-Techniken" oder beginnen Sie mit der Programmierung von Interaktivität in "Einführung in JavaScript". Ihre Reise als Webentwickler geht weiter!

1. Welche Eigenschaft fügt einem Element einen Schatten um dessen Rahmen hinzu?

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

War alles klar?

Danke für Ihr Feedback!

Abschnitt 5. Kapitel 6