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

Aufgabe

Übung zur Verbesserung der visuellen Gestaltung 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.
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

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

Suggested prompts:

Can you show me the CSS code for the `.card` class?

What other decorative effects can I add to the card?

Can you explain how the `box-shadow` property works?

Swipe um das Menü anzuzeigen

Übung zur Verbesserung der visuellen Gestaltung 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.
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

War alles klar?

Danke für Ihr Feedback!

Abschnitt 5. Kapitel 6