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

Compito

Esercitarsi e migliorare l'aspetto visivo della pagina web. Il compito include:

Aggiungere un'ombra all'elemento div con il nome 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.
Aggiungere un'immagine di sfondo all'elemento div con il nome 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.
Centrare l'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 utilizzando la proprietà background-image, impiegare 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 scenario, impostare il valore su center per la proprietà.

index.html

index.css

Nota

Hai completato il corso "Fondamenti di CSS" e hai acquisito le basi della stilizzazione web. Ora, migliora le tue competenze di design con "Tecniche CSS Avanzate", 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

Esercitarsi e migliorare l'aspetto visivo della pagina web. Il compito include:

Aggiungere un'ombra all'elemento div con il nome 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.
Aggiungere un'immagine di sfondo all'elemento div con il nome 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.
Centrare l'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 utilizzando la proprietà background-image, impiegare 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 scenario, impostare il valore su center per la proprietà.

index.html

index.css

Nota

Hai completato il corso "Fondamenti di CSS" e hai acquisito le basi della stilizzazione web. Ora, migliora le tue competenze di design con "Tecniche CSS Avanzate", 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