Lernen Herausforderung: Dekorative Effekte mit CSS Umsetzen | Dekorative Effekte mit CSS Hinzufügen

Aufgabe

Übung zur 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 bereitgestellt: 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.css

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 bereitgestellt: 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.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

Übung zur 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 bereitgestellt: 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.css

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 bereitgestellt: 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.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