Вивчайте Завдання: Реалізація Декоративних Ефектів у CSS | Додавання Декоративних Ефектів за Допомогою CSS

Завдання

Практикуйтеся та покращуйте візуальну привабливість вебсторінки. Завдання включає:

Додати тінь до елемента div з класом card. Вказані значення тіні: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
Додати фонове зображення до елемента div з класом card. Посилання на зображення: https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png.
Вирівняти фонове зображення по центру всередині картки.

index.html

index.css

Для додавання тіні до елемента використовуйте властивість box-shadow із зазначеним значенням. У цьому випадку значення: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
Щоб встановити зображення як фон за допомогою властивості background-image, використовуйте синтаксис url("correct path"). У дужках відкрийте лапки та вкажіть шлях до зображення. У цьому завданні правильний шлях: url("https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png").
Для визначення позиції фонового зображення використовуйте властивість background-position. У цьому випадку встановіть значення center для цієї властивості.

index.html

index.css

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

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

Секція 5. Розділ 6

Запитати АІ

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

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?

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

Практикуйтеся та покращуйте візуальну привабливість вебсторінки. Завдання включає:

Додати тінь до елемента div з класом card. Вказані значення тіні: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
Додати фонове зображення до елемента div з класом card. Посилання на зображення: https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png.
Вирівняти фонове зображення по центру всередині картки.

index.html

index.css

Для додавання тіні до елемента використовуйте властивість box-shadow із зазначеним значенням. У цьому випадку значення: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
Щоб встановити зображення як фон за допомогою властивості background-image, використовуйте синтаксис url("correct path"). У дужках відкрийте лапки та вкажіть шлях до зображення. У цьому завданні правильний шлях: url("https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png").
Для визначення позиції фонового зображення використовуйте властивість background-position. У цьому випадку встановіть значення center для цієї властивості.

index.html

index.css

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

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

Секція 5. Розділ 6