Завдання: Створення Сучасного Компоненту Картки
Свайпніть щоб показати меню
Практичне завдання для покращення візуальної привабливості вебсторінки. Завдання включає:
- Додати тінь до елемента
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
1. Яка властивість додає тінь навколо блоку елемента?
2. Як можна додати зображення як фон елемента?
Все було зрозуміло?
Дякуємо за ваш відгук!
Секція 5. Розділ 6
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
Секція 5. Розділ 6