Зміст курсу
Основи CSS
Основи CSS
Челендж: Декоративні Ефекти
Завдання
Потренуємося покращувати візуальну привабливість веб-сторінки. Завдання включає в себе
- Додайте тіні до елементу
div
з ім'ям класуcard
. Задані значення тіні:rgba(0, 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
index
index
- Щоб додати тінь до елемента, використовуйте властивість
box-shadow
із вказаним значенням. У цьому випадку це значення має виглядrgba(0, 0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px
. - Для встановлення зображення як фону за допомогою властивості
background-image
використовуйте синтаксисurl("правильний шлях")
. Усередині дужок розкрийте лапки і вкажіть шлях до зображення. У цьому завданні вказано правильний шлях:url("https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png")
. - Для визначення позиції фонового зображення використовуйте властивість
background-position
. У цьому сценарії встановіть для властивості значенняcenter
.
index
index
index
Все було зрозуміло?
Дякуємо за ваш відгук!
Секція 5. Розділ 6