Зміст курсу
Основи 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.html
index.css
Щоб додати тінь до елемента, використовуйте властивість
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.html
index.css
Дякуємо за ваш відгук!