Flexbox CSS # 1 - Вирівнювання по вертикалі і горизонталі (практика)
У поточному відео уроці розберемо три основні властивості Flexbox CSS - display | justify-content | align-items. За допомогою їх можна вирівнювати flex-елементи по горизонталі і вертикалі.
Опис властивостей Flexbox CSS - display | justify-content | align-items
Нам знадобиться заготовка, можете її завантажити або набрати код самостійно.
See the Pen # 1 Практика по Flexbox (вирівнювання елементів) by Denis ( @Dwstroy ) on CodePen .
Пробіжить по її структурі заготовки. У index файлі підключаю іконки через cdn, нижче підключаю файл стилів, а в тілі body створений блок з класом dws-wrapper який служить обгорткою всього контенту. Файл стилів порожній, в папці img картинка на задній фон і зображення для прикладу.
<! DOCTYPE html> <html lang = "ru"> <head> <meta charset = "UTF-8"> <title> # 1 Практика по Flexbox (вирівнювання елементів) </ title> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <link href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel = "stylesheet"> <link rel = "stylesheet" href = "style.css" type = "text / css"> </ head> <body> <div class = "dws-wrapper"> </ div> </ body > </ html>
Базова розмітка HTML
Починаємо як завжди з базовою розмітки блоків. Нам знадобиться контейнер, для нього задамо клас img-box, в якому розташуємо такі елементи. Зображення, укладаємо в окремий блок з класом img-wrapper, він буде для неї обгорткою.
<Div class = "img-wrapper"> <img src = "img / 1.jpg"> </ div>
Для іконок зробимо UL, в ньому чотири списки і в кожному розташуємо за посиланням.
ul> (li> a) * 4
Дописуємо грати в тег href, і підберемо ряд іконок під нашу тематику.
- fa-cog
- fa-envelope-open
- fa-heart
- fa-share-alt
Нижче робимо заголовок четвертого рівня, і параграф з довільним текстом.
<Ul> <li> <a href="#"> <i class = "fa fa-cog"> </ i> </a> </ li> <li> <a href="#"> <i class = "fa fa-envelope-open"> </ i> </a> </ li> <li> <a href="#"> <i class = "fa fa-heart"> </ i> < / a> </ li> <li> <a href="#"> <i class = "fa fa-share-alt"> </ i> </a> </ li> </ ul> <h4> CSS image hover effect </ h4> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet. </ P>
На цьому розмітка HTML завершена, переходимо до опису стилів.
Описуємо CSS стилі
Частенько в коментарях задають мені питання, навіщо я вирівнюю блок обгортку за допомогою transform, таким способом.
body {margin: 0; padding: 0; font-family: Verdana, sans-serif; } .Dws-wrapper {position: absolute; top: 50%; left: 50%; transform: translate (-50%, -50%); }
Все досить просто, при такому методі не потрібно задавати контейнеру висоту, в той же час коли вирівнюємо через flexbox, нам вона необхідна для flex-контейнера. Без неї ми не зможемо вирівняти дочірні елементи по вертикалі.
Давайте покажу, як це виглядає, до того ж закріпимо пройдений матеріал.
Зараз dws-wrapper є контейнером, притому зверніть, який простір він займає по висоті.
.dws-wrapper {background: #ccc; position: absolute; top: 50%; left: 50%; transform: translate (-50%, -50%); }
Тепер зробимо його flex-контейнером, застосовуємо правило display: flex і в підсумку, що ми бачимо, що наш єдиний flex-елемент img-box притулився в верхній кут, і це добре видно, якщо поставимо для нього обведення.
.dws-wrapper {background: #ccc; display: flex; } .Img-box {outline: 1px solid orange; }
У той же час flex-контейнер dws-wrapper зайняв всю ширину вікна браузера.
Далі застосовуємо властивість justify-content зі значенням center і flex-елемент вирівнявся по центру.
Потім за допомогою властивості align-items намагаємося вирівняти його по вертикалі, але безрезультатно. Тому що, висота flex-контейнера, це все-то простір, яке займає його елемент і для того що б його вирівняти по вертикалі, потрібно відповідно задати висоту вікна браузера height: 900px.
.dws-wrapper {background: #ccc; height: 900px; display: flex; justify-content: center; align-items: center; }
Ось таким чином ми домоглися вирівнювання flex-елемента в нашому випадку.
Просто мені для запису уроків простіше перший варіант, так як в ньому висоту контейнера задавати не доводиться.
В даному прикладі залишу другий варіант, так як все ж урок по flexbox, тільки приберу задній фон / * background: #ccc; * /, який ставив для прикладу. Натомість йому зробимо фон body.
background: url ( "img / ignasi_pattern_s.png");
Все це не обов'язково робити, даний код я використовую для запису уроків, ви її можете не прописувати, а починати з даного моменту.
Переходимо до оформлення блоку img-box і наше завдання іконки розташувати з правого боку картинки. Тут нам допоможе flexbox. На початку уроку я говорив, що блок з класом img-box буде flex-контейнером, і вважаю, багато хто з вас запитають, що у нас може бути два flex-контейнера? Так чому б ні! Хоч десять їх наштопайте, це допустимо документацією і ми можемо робити їх багаторівневі вкладеності.
Задаємо для блоку з класом img-box правило display: flex. Далі що б вирівняти елементи по вертикалі пропишемо властивість align-items і приберемо обведення.
.img-box {display: flex; align-items: center; }
Тимчасово приховуємо елементи, з якими не працюємо це блок UL і текст, що б вони нам не заважали. Привчайте себе з самого початку, прибирати зі сторінки ті елементи, які на даний момент не використовуєте, це вас зайвий раз не буде відволікати від основного завдання, і зможете концентруватися на певному етапі роботи.
.img-box ul, .img-box h4, .img-box p {display: none; }
Приступимо до оформлення першого елемента, це блок з картинкою. Відбираємо його .img-wrapper img і задаємо ширину в 300 пік., Додаємо сіру обведення.
Так як цей елемент буде, переміщається по наведенню, додамо плавність за допомогою transition.
.img-wrapper img {height: 300px; border: 2px solid # 5F6062; transition: 1s; }
Нижче описуємо стилі з наведення. Робимо закруглення кутів за допомогою transform, зрушимо блок по осі X вліво на 80 пік. і додамо фільтр.
.img-box: hover img {border-radius: 30px; transform: translateX (-80px); filter: grayscale (.75); }
Основному блоку .img-box пропишемо властивість overflow: hidden що б картинка при зміщення по наведенню не виходила за його межі. Потім додамо бордюр з лівого боку, що б зображення не виглядала, як обрізане.
.img-box {... overflow: hidden; border-left: 2px solid # 5F6062; }
Прибираємо у картинки з лівого боку бордюр.
.img-wrapper img {... border-left: none; }
Ви, напевно, звернули увагу, що вкладений блок з картинкою трохи менше по висоті, про що говорить виступ бордюру і якщо задати контейнеру .img-box обведення outline: 1px solid orange це стане помітнішою.
Що б виправити таку справу, робимо блок .img-wrapper flex-контейнером і картинка займає все його простір блоку. .img-wrapper {display: flex; }
Блок з картинкою оформляти закінчи і тимчасово поки закоментуйте анімацію, що б вона нам не заважала.
/*.img-box:hover img {* / / * border-radius: 30px; * / / * transform: translateX (-80px); * / / * filter: grayscale (.75); * / / *} * /
Далі переходимо до оформлення списків з іконками.
Відображаємо блок UL, відбираємо його .img-box ul, приховуємо маркери, додам плавність анімації, задаємо фон, обведення в два пікселя і закруглити кути.
.img-box ul {list-style: none; background: # 2e81a7; border: 2px solid # 235477; border-radius: 0 10px 10px 0; transition: 1s; }
Потім оформляємо списки Li, робимо відступи, вирівнюємо іконки по горизонталі, і робимо роздільники.
.img-box li {margin: 10px; padding: 10px; text-align: center; border-bottom: 1px solid # 214263; box-shadow: 0 1px 0 0 # 8bb5d2; }
Останній роздільник нам не потрібен, його відразу приховуємо.
.img-box li: last-child {border-bottom: none; box-shadow: none; }
Потім оформляємо іконки з наведення.
.img-box li i {color: #fff; font-size: 30px; text-shadow: 2px 2px 3px # 133648; } .Img-box li a: hover i {color: # 1a4a6f; text-shadow: -1px -1px 0 # 000000; }
На закінчення робимо плавну анімацію, робимо переміщення блоку UL по наведенню на зображення.
.img-box ul {... margin-left: -114px; transform: translateX (-20px); ...} .img-box: hover ul {transform: translateX (0); }
Перевіряємо, як все працює в комплексі.
Для того що б блок з іконкою пішов на задній план, для картинки задаємо z-index.
.img-wrapper img {... z-index: 1; }
Тимчасово все закомментіруем і приступимо до оформлення текстових блоків. Відображаємо текст, і позиціонуємо його щодо контейнера .img-box. Тимчасово overflow: hidden закоментуйте.
.img-box {/ * overflow: hidden; * / position: relative; ...}
Потім задаємо напівпрозорий фон червоного кольору, колір тексту робимо білий, позиціонуємо з права 100 пік, з низу 70 пік., Задаємо внутрішні відступи і плавність анімації в 1s.
.img-box h4, .img-box p {position: absolute; background: rgba (191, 33, 26, 0.8); color: #ffffff; right: 100px; bottom: 70px; padding: 10px 30px; transition: 1s; }
Оформляємо текст параграфа.
.img-box p {font-size: 14px; background: rgba (41, 116, 146, 0.8); width: 60%; bottom: 20px; transition: 2s; }
Заголовку додаємо text-transform.
.img-box h4 {text-transform: uppercase; }
Тепер робимо анімацію, текст зміщуємо на 200 пік. за допомогою transform по осі X в ліву сторону і робимо невидимим.
.img-box h4, .img-box p {... opacity: 0; transform: translateX (-200px); }
За наведення на блок .img-box відображаємо текст за допомогою transform, і переміщаємо в початкове положення.
.img-box: hover h4, .img-box: hover p {opacity: 1; transform: translateX (0); }
Потім відображаємо весь закоментувавши код, і дивимося, який результат отримали.
Чи не з'явилися блоки з текстом, для них поставимо пріоритетність z-index в два.
.img-box h4, .img-box p {... z-index: 2; }
В принципі, закінчили даний приклад, отримали такого роду анімація.
Урок підготував Горєлов Денис.