Зміст:

Robot 2.0

На цьому заннятті ми створимо власного робота і дізнаємося, чому позиція елементів (position) така важлива у CSS.

Поговоримо про роботів

Як вам ідея такого маленького помічника ? А про яких роботів ви ще чули ? Що вміють робити сучасні роботи ?

Трошки про position

position:static;

Це позиція за замовчуванням у CSS, застосовна до всіх елементів HTML. Ця позиція розміщує елементи HTML один за одним. Властивості top/right/bottom/left не можуть бути застосовані до елементів.

Примітка. Прокручування сторінки впливає на цю позицію.

<body>
    <div class="p1">
    </div>
    <div class="p2">
    </div>
</body>

.p1 {
       width:50px;
       height:50px;
       background-color:cornflowerblue;
       position:static;
       }
.p2 {
     width:50px;
     height:50px;
     background-color:sandybrown;
     }

position:relative;

Це положення розміщує елемент відносно його нормального положення.Тут до елементів можна застосувати властивості top/right/bottom/left.

Примітка. Прокручування сторінки впливає на цю позицію. Якщо положення застосовується лише без властивостей top/right/bottom/left, воно діятиме як статичне положення.

<body>
    <div class="p1">
    </div>
    <div class="p2">
    </div>
</body>



.p1 {
    width:50px;
    height:50px;
    background-color:sandybrown;
}
.p2 {
    width:50px;
    height:50px;
    background-color:lightgreen;
    position:relative;
    left:60px;
    top:20px;
}

position:absolute;

Ця позиція поміщає елемент у точне вказане положення. Це положення відносно:

тіла документа, тобто відступ зліва і зверху від початку екрану.
батьківського елемента, коли позиція батьківського елемента є відносною/абсолютною.

Примітка. Прокручування сторінки впливає на цю позицію. Цей елемент позиції повністю видаляється зі звичайного потоку документів.

<body>
    <div class="p1">
    </div>
    <div class="p2">
    </div>
    <div class="p3">
    </div>
</body>

.p1 {
    width:50px;
    height:50px;
    background-color:cornflowerblue;
    }

.p2 {
    width:50px;
    height:50px;
    background-color:sandybrown;
    }

.p3 {
    width:50px;
    height:50px;
    background-color:lightgreen;
    position:absolute;
    left:60px;
    top:20px;
    }

position:fixed;

Ця позиція розміщує елемент у фіксованому місці відносно вікна перегляду. Прокрутка сторінки не впливає на це положення.

Примітка. Цей елемент позиції повністю видалено зі звичайного потоку документів.

<body>
    <div class="p1">
    </div>
</body>

.p1 {
    width:50px;
    height:50px;
    background-color:lightgreen;
    position:fixed;
    left:40px;
    top:40px;
    }

Практика! Конструюємо робота

1: Сьогодні ми будемо збирати власного робота. Для цього вам знадобиться цей проєкт. Зробіть з нього Fork. Посилання тут

Для нашої роботи будуть потрібні картинки. Вони вже є в проєкті, але якщо ви програмуєте не в replit, то їх також можна скачати тут:

https://www.dropbox.com/scl/fo/vzvzrweiozp6ayb82h8p7/h?rlkey=cd3bdbernds6hlqk0a5b0nv7v&dl=0

або використати ці посилання:

https://i.ibb.co/XyW8c3T/bird.png
https://i.ibb.co/yB41jDF/bowtie.png
https://i.ibb.co/2Z5TtRV/crown.png
https://i.ibb.co/YLj9P0q/ears1.png
https://i.ibb.co/808Yp07/ears2.png
https://i.ibb.co/8s6KkGB/eyes1.png
https://i.ibb.co/MVJVKVG/eyes2.png
https://i.ibb.co/2nhhmMp/eyes3.png
https://i.ibb.co/jVrNyZV/face.png
https://i.ibb.co/bbxcPpn/hair1.png
https://i.ibb.co/qxxvvYS/hair2.png
https://i.ibb.co/GVkYrNw/hair3.png
https://i.ibb.co/xXdzK2Y/hair4.png
https://i.ibb.co/r0JQGns/hat.png
https://i.ibb.co/qBwgQcv/headphones.png
https://i.ibb.co/px1PSj8/moustache.png
https://i.ibb.co/q0FFBqt/mouth1.png
https://i.ibb.co/4ZXvgqP/mouth2.png
https://i.ibb.co/3SkDDw5/mouth3.png
https://i.ibb.co/kJMVQ4K/necklace.png
https://i.ibb.co/v48BhY6/nose1.png
https://i.ibb.co/48W3Wbq/nose2.png
https://i.ibb.co/mFYkfdp/nose3.png
https://i.ibb.co/WH6Q3XW/sunglasses.png
https://i.ibb.co/9nbjDLk/Screenshot-1.png
https://i.ibb.co/fnP8pZB/antenna.png

Якщо ви використовуєте такі картинки, то посилання в коді на них треба буде оновити!

2: Додайте html-код для опису обличчя, шапки, очей і носа

<div class = 'face'>
    <div class = 'hat'></div>
    <div class = 'left-eye'></div>
    <div class = 'right-eye'></div>
    <div class = 'nose'></div>
</div>

3: Це заготовка з пістих div, тому сторінка і досі пуста. Але нам не вистачає стилів, щоб робот почав оживати. Додайте CSS-код:

.face{
    width: 300px;
    height: 480px;
    background-image: url(images/face.png);
    background-size: contain;
    margin-top: 20px;
    background-repeat: no-repeat;
    position: absolute;
}

.hat{
    width: 100px;
    height: 200px;
    background-image: url(images/hat.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: -40px;
    left: 42px;
}

Налаштуйте ширину і висоту шапочки так, щоб вона якраз опинилася на голові

background-size – визначає як буде вести себе картинка на тлі (її розмір)
- contain -робить зображення якомога більшим в межах контейнера без обрізання або розтягування зображення. Якщо контейнер більший за зображення, це призведе до мозаїки зображення, якщо для властивості background-repeat не встановлено значення no-repeat.
- cover – робить зображення якомога меншим в межах контейнера (зберігаючи його співвідношення) Тобто: його висота та ширина повністю покривають контейнер, не залишаючи порожнього простору. Якщо пропорції фону відрізняються від елемента, зображення обрізається вертикально або горизонтально.
background-repeat – чи буде картинка повторяться на тлі
position – міняти розташування об’єкта на сторінці (НЕ дивлячись на те де тег знаходиться в html-DOM)
top, left – відступ по висоті і по ширині від лівого верхнього кута елемента з властивістю position: absolute

4: Додаємо стилі для очей (картинку оберіть одну з троьх в папці). Додайте праве око .right-eye, змініть для нього відповідні стилі, щоб воно розтащувалося де треба

.left-eye{
    width: 50px;
    height: 50px;
    background-image: url(images/eyes1.png);
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top: 135px;
    left: 80px;
}

5: Додайте стилі для того, щоб коли наводиш курсор на обличчя, очі змінювались.

.face:hover .left-eye {
    background-image: url(images/eyes2.png);
}

6: Зробіть те саме для іншого ока

: hover – означає, що на елемент навели курсор.

7: Додайте такий код. Подивись як він працює.

.face:hover .hat{
    display: none;
}

8: Додайте ніс роботу. Які зміни треба зробити в HTML? Що додати в CSS?

9 (Додаткове): Додайте картинку на сторінку. Зробіть так, щоб картинка змінювалася на іншу, коли на неї наводиш мишку

Домашнє завдання

Доробіть робота: додай ніс, рот, вуха, метелика на шию
Змініть рот робота, якщо навести на нього курсор
Додайте окуляри для сонця, або навушники, або кольє, або вуса, або корону
Якщо навести курсор на всього робота – ховати шапку і показувати волосся і пташку на волоссі.

Підказка по домашці:

Завдання 1 : Ніс: В html файлі перевірте, що є відповідний клас <div class = ‘nose’></div> , а потім додайте стилі для носа.

Можна взяти скопіювати з одного з очей і поміняти на ніс:

.nose{
  width: 50px;
    height: 50px;
    background-image: url(images/eyes1.png);
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top: 135px;
    left: 80px;
}

Картинка для носа буде images/nose.png, для ротика і вух теж можна знайти картинки за назвами англійською
Щоб ніс встав на своє місце, треба погратися зі значеннями останніх властивостей : top та left.
Щоб додати рот і вуха, треба щей в новий рядок в HTML-документі. Бо для носа є <div class = ‘nose’></div>, а для рота немає.

Level Up!

1: Додайте:

Назву робота (обведіть назву в рамку)
Характеристики. Наприклад : рік виробництва, потужність, ціна (можете придумати інші). Характеристики виділіть якимось кольором

2: За допомогою paint або іншого редактора намалюйте свою картинку для двох частин тіла робота (око, обличчя або щось інше….) Додайте картинки в проєкт і використайте їх у своєму роботі.

Не забудьте, що картинку треба зберегти як png, щоб не було видно фону.

09. Позиція елементів y CSS