Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Вивчайте Challenge: Implement Decorative Effects in CSS | Section
CSS Fundamentals for React Developers - 1768407374224

bookChallenge: Implement Decorative Effects in CSS

Task

Let's practice and enhance the visual appeal of the webpage. The task includes:

  • Add a shadow to the div element with the class name card. The specified shadow values are rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
  • Add a background image to the div element with the class name card. The image link is provided: https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png.
  • Center the background image within the card.
index.html

index.html

index.css

index.css

copy
  • To add a shadow to an element, utilize the box-shadow property with the specified value. In this case, the value is rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
  • For setting an image as a background using the background-image property, employ the url("correct path") syntax. Inside the brackets, open quotes and specify the path to the image. In this task, the correct path is provided: url("https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png").
  • To determine the position of the background image, use the background-position property. In this scenario, set the value to center for the property.
index.html

index.html

index.css

index.css

copy

1. Which property adds shadow around an element's box?

2. How can you add an image as the background of an element?

question mark

Which property adds shadow around an element's box?

Select the correct answer

question mark

How can you add an image as the background of an element?

Select the correct answer

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 1. Розділ 39

Запитати АІ

expand

Запитати АІ

ChatGPT

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

bookChallenge: Implement Decorative Effects in CSS

Свайпніть щоб показати меню

Task

Let's practice and enhance the visual appeal of the webpage. The task includes:

  • Add a shadow to the div element with the class name card. The specified shadow values are rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
  • Add a background image to the div element with the class name card. The image link is provided: https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png.
  • Center the background image within the card.
index.html

index.html

index.css

index.css

copy
  • To add a shadow to an element, utilize the box-shadow property with the specified value. In this case, the value is rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
  • For setting an image as a background using the background-image property, employ the url("correct path") syntax. Inside the brackets, open quotes and specify the path to the image. In this task, the correct path is provided: url("https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png").
  • To determine the position of the background image, use the background-position property. In this scenario, set the value to center for the property.
index.html

index.html

index.css

index.css

copy

1. Which property adds shadow around an element's box?

2. How can you add an image as the background of an element?

question mark

Which property adds shadow around an element's box?

Select the correct answer

question mark

How can you add an image as the background of an element?

Select the correct answer

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 1. Розділ 39
some-alt