Impara Sfida: Implementazione di Effetti Decorativi in CSS | Aggiunta di Effetti Decorativi con CSS

Compito

Esercitazione per migliorare l'aspetto visivo della pagina web. Il compito comprende:

Aggiunta di un'ombra all'elemento div con la classe card. I valori specificati per l'ombra sono rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
Aggiunta di un'immagine di sfondo all'elemento div con la classe card. Il link dell'immagine fornito è: https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png.
Centratura dell'immagine di sfondo all'interno della card.

index.html

index.css

Per aggiungere un'ombra a un elemento, utilizzare la proprietà box-shadow con il valore specificato. In questo caso, il valore è rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
Per impostare un'immagine come sfondo tramite la proprietà background-image, utilizzare la sintassi url("correct path"). All'interno delle parentesi, aprire le virgolette e specificare il percorso dell'immagine. In questo compito, il percorso corretto è fornito: url("https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png").
Per determinare la posizione dell'immagine di sfondo, utilizzare la proprietà background-position. In questo caso, impostare il valore su center per la proprietà.

index.html

index.css

Nota

Hai completato il corso "CSS Fundamentals" e hai acquisito le basi della stilizzazione web. Ora, migliora le tue competenze di design con "Advanced CSS Techniques", oppure inizia a programmare l'interattività con "Introduzione a JavaScript". Il tuo percorso come sviluppatore web continua!

1. Quale proprietà aggiunge un'ombra attorno al box di un elemento?

2. Come si può aggiungere un'immagine come sfondo di un elemento?

Tutto è chiaro?

Grazie per i tuoi commenti!

Sezione 5. Capitolo 6

Chieda ad AI

Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione

Awesome!

Completion rate improved to 2.56

Scorri per mostrare il menu

Compito

Esercitazione per migliorare l'aspetto visivo della pagina web. Il compito comprende:

Aggiunta di un'ombra all'elemento div con la classe card. I valori specificati per l'ombra sono rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
Aggiunta di un'immagine di sfondo all'elemento div con la classe card. Il link dell'immagine fornito è: https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png.
Centratura dell'immagine di sfondo all'interno della card.

index.html

index.css

Per aggiungere un'ombra a un elemento, utilizzare la proprietà box-shadow con il valore specificato. In questo caso, il valore è rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
Per impostare un'immagine come sfondo tramite la proprietà background-image, utilizzare la sintassi url("correct path"). All'interno delle parentesi, aprire le virgolette e specificare il percorso dell'immagine. In questo compito, il percorso corretto è fornito: url("https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png").
Per determinare la posizione dell'immagine di sfondo, utilizzare la proprietà background-position. In questo caso, impostare il valore su center per la proprietà.

index.html

index.css

Nota

Hai completato il corso "CSS Fundamentals" e hai acquisito le basi della stilizzazione web. Ora, migliora le tue competenze di design con "Advanced CSS Techniques", oppure inizia a programmare l'interattività con "Introduzione a JavaScript". Il tuo percorso come sviluppatore web continua!

1. Quale proprietà aggiunge un'ombra attorno al box di un elemento?

2. Come si può aggiungere un'immagine come sfondo di un elemento?

Tutto è chiaro?

Grazie per i tuoi commenti!

Sezione 5. Capitolo 6