|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "92c4431eac70670b0450b02c1d11279a",
|
|
|
"translation_date": "2025-10-24T15:42:23+00:00",
|
|
|
"source_file": "3-terrarium/2-intro-to-css/README.md",
|
|
|
"language_code": "uk"
|
|
|
}
|
|
|
-->
|
|
|
# Проєкт "Тераріум", частина 2: Вступ до CSS
|
|
|
|
|
|
|
|
|
> Скетчноут від [Tomomi Imura](https://twitter.com/girlie_mac)
|
|
|
|
|
|
Пам'ятаєте, як ваш HTML-тераріум виглядав досить просто? CSS — це те, що перетворює цю просту структуру на щось візуально привабливе.
|
|
|
|
|
|
Якщо HTML — це як будівництво каркасу будинку, то CSS — це все, що робить його затишним: кольори фарби, розташування меблів, освітлення та те, як кімнати поєднуються між собою. Подумайте, як Палац Версаль починався як простий мисливський будиночок, але завдяки ретельній увазі до декору та планування перетворився на одну з найвеличніших будівель світу.
|
|
|
|
|
|
Сьогодні ми перетворимо ваш тераріум з функціонального на витончений. Ви навчитеся точно позиціонувати елементи, створювати макети, які реагують на різні розміри екранів, і створювати візуальну привабливість, яка робить вебсайти захоплюючими.
|
|
|
|
|
|
До кінця цього уроку ви побачите, як стратегічне стилювання за допомогою CSS може значно покращити ваш проєкт. Додаймо стилю вашому тераріуму.
|
|
|
|
|
|
## Передлекційна вікторина
|
|
|
|
|
|
[Передлекційна вікторина](https://ff-quizzes.netlify.app/web/quiz/17)
|
|
|
|
|
|
## Початок роботи з CSS
|
|
|
|
|
|
CSS часто сприймається як просто "робити речі красивими", але його призначення набагато ширше. CSS — це як бути режисером фільму: ви контролюєте не лише те, як все виглядає, але й як рухається, реагує на взаємодію та адаптується до різних ситуацій.
|
|
|
|
|
|
Сучасний CSS надзвичайно потужний. Ви можете писати код, який автоматично налаштовує макети для телефонів, планшетів і настільних комп'ютерів. Ви можете створювати плавні анімації, які спрямовують увагу користувачів туди, де це потрібно. Результати можуть бути досить вражаючими, коли все працює разом.
|
|
|
|
|
|
> 💡 **Порада професіонала**: CSS постійно розвивається з новими функціями та можливостями. Завжди перевіряйте [CanIUse.com](https://caniuse.com), щоб переконатися, що браузери підтримують нові функції CSS перед їх використанням у проєктах.
|
|
|
|
|
|
**Ось що ми досягнемо в цьому уроці:**
|
|
|
- **Створимо** повний візуальний дизайн для вашого тераріуму, використовуючи сучасні техніки CSS
|
|
|
- **Дослідимо** основні концепції, такі як каскадність, спадковість і селектори CSS
|
|
|
- **Реалізуємо** стратегії адаптивного позиціонування та макетування
|
|
|
- **Побудуємо** контейнер для тераріуму, використовуючи форми та стилі CSS
|
|
|
|
|
|
### Передумови
|
|
|
|
|
|
Ви повинні завершити HTML-структуру для вашого тераріуму з попереднього уроку та підготувати її до стилізації.
|
|
|
|
|
|
> 📺 **Відеоресурс**: Перегляньте цей корисний відеоурок
|
|
|
>
|
|
|
> [](https://www.youtube.com/watch?v=6yIdOIV9p1I)
|
|
|
|
|
|
### Налаштування вашого CSS-файлу
|
|
|
|
|
|
Перш ніж ми зможемо почати стилізувати, нам потрібно підключити CSS до нашого HTML. Це з'єднання повідомляє браузеру, де знайти інструкції зі стилізації для нашого тераріуму.
|
|
|
|
|
|
У папці вашого тераріуму створіть новий файл під назвою `style.css`, а потім підключіть його у секції `<head>` вашого HTML-документа:
|
|
|
|
|
|
```html
|
|
|
<link rel="stylesheet" href="./style.css" />
|
|
|
```
|
|
|
|
|
|
**Що робить цей код:**
|
|
|
- **Створює** з'єднання між вашими HTML- та CSS-файлами
|
|
|
- **Повідомляє** браузеру завантажити та застосувати стилі з `style.css`
|
|
|
- **Використовує** атрибут `rel="stylesheet"`, щоб вказати, що це CSS-файл
|
|
|
- **Посилається** на шлях до файлу через `href="./style.css"`
|
|
|
|
|
|
## Розуміння каскаду CSS
|
|
|
|
|
|
Чи замислювалися ви, чому CSS називається "каскадними" таблицями стилів? Стилі спадають, як водоспад, і іноді вони конфліктують між собою.
|
|
|
|
|
|
Уявіть, як працюють військові командні структури — загальний наказ може сказати "всі солдати носять зелене", але конкретний наказ для вашого підрозділу може сказати "носіть парадну форму для церемонії". Більш конкретна інструкція має пріоритет. CSS дотримується подібної логіки, і розуміння цієї ієрархії значно полегшує налагодження.
|
|
|
|
|
|
### Експеримент з пріоритетом каскаду
|
|
|
|
|
|
Давайте побачимо каскад у дії, створивши конфлікт стилів. Спочатку додайте вбудований стиль до вашого тегу `<h1>`:
|
|
|
|
|
|
```html
|
|
|
<h1 style="color: red">My Terrarium</h1>
|
|
|
```
|
|
|
|
|
|
**Що робить цей код:**
|
|
|
- **Застосовує** червоний колір безпосередньо до елемента `<h1>` за допомогою вбудованого стилю
|
|
|
- **Використовує** атрибут `style`, щоб вбудувати CSS безпосередньо в HTML
|
|
|
- **Створює** стиль з найвищим пріоритетом для цього конкретного елемента
|
|
|
|
|
|
Далі додайте це правило до вашого файлу `style.css`:
|
|
|
|
|
|
```css
|
|
|
h1 {
|
|
|
color: blue;
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**У наведеному вище ми:**
|
|
|
- **Визначили** правило CSS, яке націлюється на всі елементи `<h1>`
|
|
|
- **Встановили** синій колір тексту за допомогою зовнішнього стилю
|
|
|
- **Створили** правило з нижчим пріоритетом порівняно з вбудованими стилями
|
|
|
|
|
|
✅ **Перевірка знань**: Який колір відображається у вашому веб-додатку? Чому саме цей колір перемагає? Чи можете ви придумати сценарії, коли вам може знадобитися перевизначити стилі?
|
|
|
|
|
|
> 💡 **Порядок пріоритету CSS (від найвищого до найнижчого):**
|
|
|
> 1. **Вбудовані стилі** (атрибут style)
|
|
|
> 2. **ID** (#myId)
|
|
|
> 3. **Класи** (.myClass) та атрибути
|
|
|
> 4. **Селектори елементів** (h1, div, p)
|
|
|
> 5. **Стандартні налаштування браузера**
|
|
|
|
|
|
## CSS-спадковість у дії
|
|
|
|
|
|
CSS-спадковість працює як генетика — елементи успадковують певні властивості від своїх батьківських елементів. Якщо ви встановите шрифт на елементі body, весь текст всередині автоматично використовуватиме той самий шрифт. Це схоже на те, як характерна щелепа родини Габсбургів з'являлася у поколіннях без необхідності вказувати її для кожного індивідуума.
|
|
|
|
|
|
Однак не все успадковується. Стилі тексту, такі як шрифти та кольори, успадковуються, але властивості макета, такі як відступи та рамки, — ні. Як діти можуть успадковувати фізичні риси, але не модні уподобання своїх батьків.
|
|
|
|
|
|
### Спостереження за спадковістю шрифтів
|
|
|
|
|
|
Давайте побачимо спадковість у дії, встановивши шрифт на елементі `<body>`:
|
|
|
|
|
|
```css
|
|
|
body {
|
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**Розбираємо, що тут відбувається:**
|
|
|
- **Встановлює** шрифт для всієї сторінки, націлюючись на елемент `<body>`
|
|
|
- **Використовує** стек шрифтів із запасними варіантами для кращої сумісності з браузерами
|
|
|
- **Застосовує** сучасні системні шрифти, які виглядають чудово на різних операційних системах
|
|
|
- **Гарантує**, що всі дочірні елементи успадковують цей шрифт, якщо він не перевизначений
|
|
|
|
|
|
Відкрийте інструменти розробника вашого браузера (F12), перейдіть на вкладку Elements і перевірте ваш елемент `<h1>`. Ви побачите, що він успадковує шрифт від body:
|
|
|
|
|
|
|
|
|
|
|
|
✅ **Час експериментів**: Спробуйте встановити інші властивості, які можна успадкувати, на `<body>`, такі як `color`, `line-height` або `text-align`. Що відбувається з вашим заголовком та іншими елементами?
|
|
|
|
|
|
> 📝 **Властивості, які успадковуються**: `color`, `font-family`, `font-size`, `line-height`, `text-align`, `visibility`
|
|
|
>
|
|
|
> **Властивості, які не успадковуються**: `margin`, `padding`, `border`, `width`, `height`, `position`
|
|
|
|
|
|
## Опанування селекторів CSS
|
|
|
|
|
|
Селектори CSS — це ваш спосіб націлюватися на конкретні елементи для стилізації. Вони працюють як точні вказівки — замість того, щоб сказати "будинок", ви можете сказати "синій будинок із червоними дверима на вулиці Мейпл".
|
|
|
|
|
|
CSS пропонує різні способи бути точним, і вибір правильного селектора — це як вибір відповідного інструмента для завдання. Іноді вам потрібно стилізувати всі двері в районі, а іноді лише одну конкретну.
|
|
|
|
|
|
### Селектори елементів (теги)
|
|
|
|
|
|
Селектори елементів націлюються на HTML-елементи за їхнім тегом. Вони ідеально підходять для встановлення базових стилів, які застосовуються широко по всій сторінці:
|
|
|
|
|
|
```css
|
|
|
body {
|
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
}
|
|
|
|
|
|
h1 {
|
|
|
color: #3a241d;
|
|
|
text-align: center;
|
|
|
font-size: 2.5rem;
|
|
|
margin-bottom: 1rem;
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**Розуміння цих стилів:**
|
|
|
- **Встановлює** послідовну типографіку по всій сторінці за допомогою селектора `body`
|
|
|
- **Видаляє** стандартні відступи та поля браузера для кращого контролю
|
|
|
- **Стилізує** всі заголовки кольором, вирівнюванням та відступами
|
|
|
- **Використовує** одиниці `rem` для масштабованого, доступного розміру шрифтів
|
|
|
|
|
|
Хоча селектори елементів добре працюють для загальної стилізації, вам знадобляться більш специфічні селектори для стилізації окремих компонентів, таких як рослини у вашому тераріумі.
|
|
|
|
|
|
### Селектори ID для унікальних елементів
|
|
|
|
|
|
Селектори ID використовують символ `#` і націлюються на елементи зі специфічними атрибутами `id`. Оскільки ID мають бути унікальними на сторінці, вони ідеально підходять для стилізації окремих, особливих елементів, таких як наші контейнери для рослин зліва та справа.
|
|
|
|
|
|
Давайте створимо стилізацію для бокових контейнерів нашого тераріуму, де будуть розташовані рослини:
|
|
|
|
|
|
```css
|
|
|
#left-container {
|
|
|
background-color: #f5f5f5;
|
|
|
width: 15%;
|
|
|
left: 0;
|
|
|
top: 0;
|
|
|
position: absolute;
|
|
|
height: 100vh;
|
|
|
padding: 1rem;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
#right-container {
|
|
|
background-color: #f5f5f5;
|
|
|
width: 15%;
|
|
|
right: 0;
|
|
|
top: 0;
|
|
|
position: absolute;
|
|
|
height: 100vh;
|
|
|
padding: 1rem;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**Що робить цей код:**
|
|
|
- **Розташовує** контейнери на крайніх лівому та правому краях за допомогою абсолютного позиціонування
|
|
|
- **Використовує** одиниці `vh` (висота вікна перегляду) для адаптивної висоти, яка змінюється залежно від розміру екрану
|
|
|
- **Застосовує** `box-sizing: border-box`, щоб включити відступи в загальну ширину
|
|
|
- **Видаляє** зайві одиниці `px` з нульових значень для чистішого коду
|
|
|
- **Встановлює** легкий фон, який приємніший для очей, ніж яскравий сірий
|
|
|
|
|
|
✅ **Виклик якості коду**: Зверніть увагу, як цей CSS порушує принцип DRY (Don't Repeat Yourself). Чи можете ви оптимізувати його, використовуючи як ID, так і клас?
|
|
|
|
|
|
**Покращений підхід:**
|
|
|
```html
|
|
|
<div id="left-container" class="container"></div>
|
|
|
<div id="right-container" class="container"></div>
|
|
|
```
|
|
|
|
|
|
```css
|
|
|
.container {
|
|
|
background-color: #f5f5f5;
|
|
|
width: 15%;
|
|
|
top: 0;
|
|
|
position: absolute;
|
|
|
height: 100vh;
|
|
|
padding: 1rem;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
#left-container {
|
|
|
left: 0;
|
|
|
}
|
|
|
|
|
|
#right-container {
|
|
|
right: 0;
|
|
|
}
|
|
|
```
|
|
|
|
|
|
### Селектори класів для повторюваних стилів
|
|
|
|
|
|
Селектори класів використовують символ `.` і ідеально підходять, коли ви хочете застосувати однакові стилі до кількох елементів. На відміну від ID, класи можна повторно використовувати в усьому HTML, що робить їх ідеальними для послідовних стилів.
|
|
|
|
|
|
У нашому тераріумі кожна рослина потребує схожої стилізації, але також індивідуального позиціонування. Ми використаємо комбінацію класів для спільних стилів та ID для унікального позиціонування.
|
|
|
|
|
|
**Ось структура HTML для кожної рослини:**
|
|
|
```html
|
|
|
<div class="plant-holder">
|
|
|
<img class="plant" alt="Decorative plant for terrarium" id="plant1" src="../../../../translated_images/plant1.d18b18ffe73da18f8b1ac7aba73b4050af52f4a0c9174aeac464b85123fc2850.uk.png" />
|
|
|
</div>
|
|
|
```
|
|
|
|
|
|
**Ключові елементи пояснені:**
|
|
|
- **Використовує** `class="plant-holder"` для послідовного стилю контейнера для всіх рослин
|
|
|
- **Застосовує** `class="plant"` для спільного стилю зображення та поведінки
|
|
|
- **Включає** унікальний `id="plant1"` для індивідуального позиціонування та взаємодії з JavaScript
|
|
|
- **Надає** описовий текст alt для доступності читачів екрану
|
|
|
|
|
|
Тепер додайте ці стилі до вашого файлу `style.css`:
|
|
|
|
|
|
```css
|
|
|
.plant-holder {
|
|
|
position: relative;
|
|
|
height: 13%;
|
|
|
left: -0.6rem;
|
|
|
}
|
|
|
|
|
|
.plant {
|
|
|
position: absolute;
|
|
|
max-width: 150%;
|
|
|
max-height: 150%;
|
|
|
z-index: 2;
|
|
|
transition: transform 0.3s ease;
|
|
|
}
|
|
|
|
|
|
.plant:hover {
|
|
|
transform: scale(1.05);
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**Розбираємо ці стилі:**
|
|
|
- **Створює** відносне позиціонування для контейнера рослини, щоб встановити контекст позиціонування
|
|
|
- **Встановлює** кожен контейнер рослини на висоту 13%, забезпечуючи, що всі рослини поміщаються вертикально без прокрутки
|
|
|
- **Зміщує** контейнери трохи вліво для кращого центрування рослин у їхніх контейнерах
|
|
|
- **Дозволяє** рослинам масштабуватися адаптивно за допомогою властивостей `max-width` та `max-height`
|
|
|
- **Використовує** `z-index`, щоб розташувати рослини над іншими елементами в тераріумі
|
|
|
- **Додає** легкий ефект наведення за допомогою CSS-переходів для кращої взаємодії з користувачем
|
|
|
|
|
|
✅ **Критичне мислення**: Чому нам потрібні як `.plant-holder`, так і `.plant` селектори? Що станеться, якщо ми спробуємо використовувати лише один?
|
|
|
|
|
|
> 💡 **Шаблон дизайну**: Контейнер (`.plant-holder`) контролює макет і позиціонування, а вміст (`.plant`) контролює зовнішній вигляд і масштабування. Це розділення робить код більш підтримуваним і гнучким.
|
|
|
|
|
|
## Розуміння позиціонування CSS
|
|
|
|
|
|
Позиціонування CSS — це як бути режисером сцени для вистави: ви керуєте тим, де стоїть кожен актор і як вони рухаються по сцені. Деякі актори слідують стандартному розташуванню, а інші потребують специфічного позиціонування для драматичного ефекту.
|
|
|
|
|
|
Коли ви зрозумієте позиціонування, багато проблем з макетом стануть керованими. Потрібна панель навігації, яка залишається вгорі, поки користувачі прокручують сторінку? Позиціонування вирішує це. Хочете, щоб підказка з'являлася в певному місці? Це теж позиціонування.
|
|
|
|
|
|
### П'ять значень позиціонування
|
|
|
|
|
|
| Значення позиціонування | Поведінка | Використання |
|
|
|
|----------------|----------|----------|
|
|
|
| `static` | Стандартний потік, ігнорує top/left/right/bottom | Звичайний макет документа |
|
|
|
| `relative` | Позиціонується відносно свого нормального положення | Невеликі коригування, створення контексту позиціонування |
|
|
|
| `absolute` | Позиціонується відносно найближчого позиціонованого предка | Точне розташування, накладки |
|
|
|
| `fixed` | Позиціонується відносно вікна перегляду | Панелі навігації, плаваючі елементи |
|
|
|
| `sticky` | Перемикається між relative і fixed залежно від прокрутки | Заголовки, які залишаються при прокрутці |
|
|
|
|
|
|
### Позиціонування в нашому тераріумі
|
|
|
|
|
|
Наш тераріум використовує стратегічну комбі
|
|
|
Давайте створимо тераріум у банці, крок за кроком. Кожна частина використовує абсолютне позиціонування та розміри на основі відсотків для адаптивного дизайну:
|
|
|
|
|
|
```css
|
|
|
.jar-walls {
|
|
|
height: 80%;
|
|
|
width: 60%;
|
|
|
background: #d1e1df;
|
|
|
border-radius: 1rem;
|
|
|
position: absolute;
|
|
|
bottom: 0.5%;
|
|
|
left: 20%;
|
|
|
opacity: 0.5;
|
|
|
z-index: 1;
|
|
|
box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
|
|
|
|
.jar-top {
|
|
|
width: 50%;
|
|
|
height: 5%;
|
|
|
background: #d1e1df;
|
|
|
position: absolute;
|
|
|
bottom: 80.5%;
|
|
|
left: 25%;
|
|
|
opacity: 0.7;
|
|
|
z-index: 1;
|
|
|
border-radius: 0.5rem 0.5rem 0 0;
|
|
|
}
|
|
|
|
|
|
.jar-bottom {
|
|
|
width: 50%;
|
|
|
height: 1%;
|
|
|
background: #d1e1df;
|
|
|
position: absolute;
|
|
|
bottom: 0;
|
|
|
left: 25%;
|
|
|
opacity: 0.7;
|
|
|
border-radius: 0 0 0.5rem 0.5rem;
|
|
|
}
|
|
|
|
|
|
.dirt {
|
|
|
width: 60%;
|
|
|
height: 5%;
|
|
|
background: #3a241d;
|
|
|
position: absolute;
|
|
|
border-radius: 0 0 1rem 1rem;
|
|
|
bottom: 1%;
|
|
|
left: 20%;
|
|
|
opacity: 0.7;
|
|
|
z-index: -1;
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**Розуміння конструкції тераріуму:**
|
|
|
- **Використовує** розміри на основі відсотків для адаптивного масштабування на всіх розмірах екранів
|
|
|
- **Розташовує** елементи абсолютно для точного накладання та вирівнювання
|
|
|
- **Застосовує** різні значення прозорості для створення ефекту скляної прозорості
|
|
|
- **Впроваджує** шарування за допомогою `z-index`, щоб рослини виглядали всередині банки
|
|
|
- **Додає** тонку тінь та вдосконалений радіус рамки для більш реалістичного вигляду
|
|
|
|
|
|
### Адаптивний дизайн з використанням відсотків
|
|
|
|
|
|
Зверніть увагу, як усі розміри використовують відсотки, а не фіксовані значення в пікселях:
|
|
|
|
|
|
**Чому це важливо:**
|
|
|
- **Гарантує**, що тераріум пропорційно масштабується на будь-якому розмірі екрана
|
|
|
- **Зберігає** візуальні взаємозв’язки між компонентами банки
|
|
|
- **Забезпечує** стабільний досвід від мобільних телефонів до великих моніторів
|
|
|
- **Дозволяє** дизайну адаптуватися без порушення візуального макета
|
|
|
|
|
|
### Використання одиниць CSS
|
|
|
|
|
|
Ми використовуємо одиниці `rem` для радіусу рамки, які масштабуються відносно розміру шрифту кореневого елемента. Це створює більш доступний дизайн, який враховує налаштування шрифту користувача. Дізнайтеся більше про [відносні одиниці CSS](https://www.w3.org/TR/css-values-3/#font-relative-lengths) в офіційній специфікації.
|
|
|
|
|
|
✅ **Візуальний експеримент**: Спробуйте змінити ці значення та спостерігайте за ефектами:
|
|
|
- Змініть прозорість банки з 0.5 на 0.8 – як це вплине на вигляд скла?
|
|
|
- Змініть колір ґрунту з `#3a241d` на `#8B4513` – який візуальний ефект це матиме?
|
|
|
- Змініть `z-index` ґрунту на 2 – що станеться з шаруванням?
|
|
|
|
|
|
---
|
|
|
|
|
|
## Виклик GitHub Copilot Agent 🚀
|
|
|
|
|
|
Використовуйте режим Agent, щоб виконати наступний виклик:
|
|
|
|
|
|
**Опис:** Створіть CSS-анімацію, яка змусить рослини в тераріумі плавно хитатися, імітуючи природний ефект вітру. Це допоможе вам попрактикуватися з CSS-анімаціями, трансформаціями та ключовими кадрами, а також покращити візуальну привабливість вашого тераріуму.
|
|
|
|
|
|
**Завдання:** Додайте анімації ключових кадрів CSS, щоб рослини в тераріумі плавно хиталися з боку в бік. Створіть анімацію хитання, яка трохи обертає кожну рослину (на 2-3 градуси) вліво та вправо з тривалістю 3-4 секунди, і застосуйте її до класу `.plant`. Переконайтеся, що анімація повторюється нескінченно та має функцію easing для природного руху.
|
|
|
|
|
|
Дізнайтеся більше про [режим Agent](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) тут.
|
|
|
|
|
|
## 🚀 Виклик: Додавання відображень на склі
|
|
|
|
|
|
Готові покращити ваш тераріум реалістичними відображеннями на склі? Ця техніка додасть глибини та реалістичності дизайну.
|
|
|
|
|
|
Ви створите тонкі відблиски, які імітують, як світло відбивається від скляних поверхонь. Цей підхід схожий на те, як художники епохи Відродження, такі як Ян ван Ейк, використовували світло та відображення, щоб зробити намальоване скло тривимірним. Ось до чого ви прагнете:
|
|
|
|
|
|
|
|
|
|
|
|
**Ваше завдання:**
|
|
|
- **Створіть** тонкі овальні форми білого або світлого кольору для відображень на склі
|
|
|
- **Розташуйте** їх стратегічно на лівій стороні банки
|
|
|
- **Застосуйте** відповідну прозорість та ефекти розмиття для реалістичного відображення світла
|
|
|
- **Використовуйте** `border-radius`, щоб створити органічні, схожі на бульбашки форми
|
|
|
- **Експериментуйте** з градієнтами або тінями для покращення реалістичності
|
|
|
|
|
|
## Післялекційний тест
|
|
|
|
|
|
[Післялекційний тест](https://ff-quizzes.netlify.app/web/quiz/18)
|
|
|
|
|
|
## Розширте свої знання CSS
|
|
|
|
|
|
CSS може здаватися складним спочатку, але розуміння цих основних концепцій забезпечує міцну основу для більш складних технік.
|
|
|
|
|
|
**Ваші наступні області навчання CSS:**
|
|
|
- **Flexbox** - спрощує вирівнювання та розподіл елементів
|
|
|
- **CSS Grid** - надає потужні інструменти для створення складних макетів
|
|
|
- **CSS Variables** - зменшує повторення та покращує підтримку
|
|
|
- **Адаптивний дизайн** - забезпечує гарну роботу сайтів на різних розмірах екранів
|
|
|
|
|
|
### Інтерактивні навчальні ресурси
|
|
|
|
|
|
Практикуйте ці концепції за допомогою цих захоплюючих інтерактивних ігор:
|
|
|
- 🐸 [Flexbox Froggy](https://flexboxfroggy.com/) - Опановуйте Flexbox через веселі завдання
|
|
|
- 🌱 [Grid Garden](https://codepip.com/games/grid-garden/) - Вивчайте CSS Grid, вирощуючи віртуальну моркву
|
|
|
- 🎯 [CSS Battle](https://cssbattle.dev/) - Перевірте свої навички CSS за допомогою кодових викликів
|
|
|
|
|
|
### Додаткове навчання
|
|
|
|
|
|
Для всебічного вивчення основ CSS завершіть цей модуль Microsoft Learn: [Стилізуйте ваш HTML-додаток за допомогою CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
|
|
|
|
|
|
## Завдання
|
|
|
|
|
|
[Рефакторинг CSS](assignment.md)
|
|
|
|
|
|
---
|
|
|
|
|
|
**Відмова від відповідальності**:
|
|
|
Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу. |
