Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Вивчайте Челендж: Декоративні Ефекти | Декоративні Ефекти
Основи CSS
course content

Зміст курсу

Основи CSS

Основи CSS

2. CSS для Тексту
3. Бокс Модель та Відстань між Елементами
4. Флексбокс
5. Декоративні Ефекти

book
Челендж: Декоративні Ефекти

Завдання

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

  • Додайте тіні до елементу 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.

  • Вирівняйте фонове зображення в межах картки.

html

index.html

css

index.css

copy
  • Щоб додати тінь до елемента, використовуйте властивість 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.

html

index.html

css

index.css

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

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

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

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

Запитати АІ

expand
ChatGPT

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

course content

Зміст курсу

Основи CSS

Основи CSS

2. CSS для Тексту
3. Бокс Модель та Відстань між Елементами
4. Флексбокс
5. Декоративні Ефекти

book
Челендж: Декоративні Ефекти

Завдання

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

  • Додайте тіні до елементу 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.

  • Вирівняйте фонове зображення в межах картки.

html

index.html

css

index.css

copy
  • Щоб додати тінь до елемента, використовуйте властивість 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.

html

index.html

css

index.css

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

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

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

Секція 5. Розділ 6
Ми дуже хвилюємося, що щось пішло не так. Що трапилося?
some-alt