Сьогодні ми розберемо і подивимося на те, як можна закруглити кути блоку. У цій статті описаний метод заокруглення кутів за допомогою позиційного побудови блоків.
Також скачайте исходники собі на комп'ютер!
Створіть папку (наприклад, folder) і помістіть в її директорію просту HTML сторінку (наприклад, index.html). Ця сторінка повинна містити наступний код:
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Для того щоб зрозуміти де, що і як, ми розберемо код нашого файлу index.html більш докладно.
Отже, "xb1", "xb2", "xb3", "xb4", "xb5", "xb6", "xb7" - це блоки, за допомогою яких і створюються наші закруглені кути. Дані блоки розташовані горизонтально один під іншим, як пішохідна зебра, наприклад. Тобто спочатку йде блок "xb1", потім блок "xb2", після цього блок "xb3" і так до блоку "xb7" включно. Всі блоки відмінні, або рівні, по своїй ширині від блоку "сусіда" (в іншому випадку заокруглення кутів блоку у нас не було б, в результаті ми отримали б звичайний прямокутник).
Блок "top_corners" - блок, в якому розташовані блоки "xb1", "xb2", "xb3", "xb4", "xb5", "xb6", "xb7" в порядку зростання. За рахунок цієї послідовності ( "xb1", "xb2", ..., "xb7") утворюються верхні закруглені правий і лівий кути нашого блоку.
Блок "down_corners" - блок, в якому розташовані блоки "xb7", "xb6", "xb5", "xb4", "xb3", "xb2", "xb1" в порядку убування. Якщо дотримуватися цієї послідовності ( "xb7", "xb6", ..., "xb1",), то у нас утворюються закруглені нижні правий і лівий кути.
Т.ч. ми створили всі чотири закруглених кута блоку (за допомогою блоків "xb1", "xb2", ..., "xb7"). Але у вас напевно виникне питання: "- Навіщо нам блок" content "?". Даний блок є тематичної частиною нашого блоку (блоку з закругленими кутами). Якщо в блоці повинна розташовуватися будь-яка інформація, то її необхідно прописувати саме в рамках блоку "content".
Тепер ми розуміємо, що наш створюваний блок із закругленими кутами складається з 3-х подблоков.
Також вашій увазі хочу привести збільшене зображення лівого верхнього кута блоку:
А також нижнього лівого:
Після цього в папці folder ми створюємо ще одну папку (наприклад, style). Потім в неї ми поміщаємо файл-CSS (наприклад, style.css), який повинен містити наступний код:
Тепер ми докладно розглянемо код файлу style.css, тому що саме тут задаються ті параметри властивостей, які в сукупності і дали нам можливість закруглити кути блоку.
Почнемо з властивостей display: block; і overflow: hidden ;, які задані для блоків "xb1", "xb2", ..., "xb7". Ці властивості призначені для того, щоб блоки "xb1", "xb2", ..., "xb7" шикувалися один за одним (блочне розташування).
Для кожного блоку заданий свій колір (background: # 7f7f9c;) і свій відступ за допомогою властивості margin.
Розберемо властивості блоків "xb1", "xb2", ..., "xb7" на прикладі блоку "xb1":
margin: 0 8px; - відступ блоку зліва і справа в 8 пікселів від блоку "container". Значення "0" -це отсуп блоку зверху і знизу щодо блоку "container" (зверху) і блоку "xb2" (знизу);
background: # 7f7f9c; - колір блоку.
Аналогічно і з блоками "xb2", "xb3", ..., "xb7" (кожен має свій відступ). Можна сказати, що властивість margin в даній даної теми є ключовим. Але не варто забувати про властивість height, тому що саме воно задає висоту блоку (для блоків "xb1", "xb2", ..., "xb6" вона дорівнює 1 піксель, для "xb7" - 2 пікселя).
Розглянемо властивості блоку "content". Вони такі ж, як і у блоків "xb1", "xb2", ..., "xb7", але відмінність є тільки у величині висоти блоку (вона дорівнює 100 пікселів). За допомогою даного властивості ми можемо збільшувати і зменшувати висоту блоку з закругленими кутами (про це ми поговоримо трохи пізніше).
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
У блоку "container" є всього лише одна властивість width. Воно допомагає нам поставити ширину блоку із закругленими кутами. Зміни ширини блоку за рахунок даного властивості будуть розглянуті нижче.
Блоки "top_corners" і "down_corners" є допоміжними. Функціонального навантаження не несуть. При бажанні їх можна видалити - все залишиться на своїх колишніх місцях. Вони введені для більш чіткого уявлення коду.
Після того, як виконані пункти 1 і 2, у вікні нашого браузера з'явився блок із закругленими кутами:
"Так, блок із закругленими кутами є, але він же розтягнутий на всю ширину вікна браузера, та й висота у нього не та, що мені потрібно", - скажете Ви. Але переживати з цього приводу не варто. Даний блок можна задавати будь-нам необхідної як ширини, так і висоти.
Для цього нам необхідно ознайомитися більш детально з файлом style.css. а саме ось з цими елементами і їх властивостями:
За ширину створюваного блоку відповідає блок "container".
Як ми можемо побачити, в елементі container задана ширина блоку 100% (тобто блок тягнеться і розташовується на всю ширину екрана браузера). Для її зміни нам потрібно змінити параметр властивості ширини блоку width (зараз він дорівнює у нас 100%). Поставимо, наприклад, 600 пікселів:
Після внесення вищевказаних змін наш блок став виглядати так:
Для того щоб задати потрібну висоту блоку, необхідно у властивостях блоку "content" змінити параметр властивості висоти блоку height (зараз він дорівнює у нас 100px). Задамо висоту блоку, рівну, наприклад, 300 пікселів:
Тепер наш блок виглядає ось так:
На завершення теми хотів би поговорити ще про одну важливу деталь - це радіус заокруглення кута блоку. Як Ви вже зрозуміли, закруглений кут створюється саме за коштами накладення одного блоку на інший (побачити це можна на збільшеному зображенні лівого верхнього кута, а також лівого нижнього, яке я доклав вище). Для того щоб збільшити радіус заокруглення Вам просто необхідно додати n блоків "xbn". Кожен новий блок повинен мати зовсім інше значення властивості height і margin від попереднього. За рахунок цього і буде досягнутий закруглений кут.
Т.ч. чим більше у вас використовується блоків «xbn», тим більше радіус заокруглення кута блоку.
Також додаю детальну карту блоків для того, щоб було простіше в усьому орієнтуватися:
На цьому у мене все. Дякуємо за увагу.
висновок
У цьому уроці ми навчилися закругляти кути блоків засобами HTML / CSS. Розглянуто метод "закруглення кутів блоку за допомогою позиційного побудови блоків" заокруглення кутів блоку. Існують ще кілька способів заокруглення кутів блоку (наприклад, за допомогою картинок; засобами CSS3, JS), але їх ми розглянемо вже в наступний раз.
Хотілося б виділити переваги і недоліки розглянутого методу:
- переваги:
1. Цей метод виключає можливість некоректного відображення web-сторінки в браузері, що є явним недоліком методу "закруглення кутів блоку за допомогою картинок" (якщо відключити відображення картинок у вікні браузера при використанні "закруглення кутів блоку за допомогою картинок", то блок буде відображено некоректно - відсутність закруглені кути);
2. Зрозумілий і легкий у використанні код;
- недоліки:
1.Нужно використовувати багато блоків, щоб створити один із закругленими кутами.
Редакція: Ріг Віктор і Андрій Бернацький. Команда webformyself.
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі
Практика HTML5 та CSS3 з нуля до результату!
Новорічна відгадка - Новорічної загадки!
Вся справа в кодуванні. Якщо в рядку 04. замість utf-8 написати windows-1251, то все стане на свої місця. Або в браузері змінити кодування Настроювання-> Інструменти-> Кодування (в загальному змінити кодування на кирилицю).