Закруглення кутів блоку засобами HTML/CSS

15

Від автора: Часто перед початківцям верстальником виникає ряд задач, які йому треба розв’язати для виконання верстки сторінки. Одна з найбільш поширених проблем – це закруглення кутів блоку засобами HTML/CSS.

Сьогодні ми розберемо і подивимося на те, як можна закруглити кути блоку. У цій статті описано метод заокруглення кутів за допомогою позиційного побудови блоків.

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

Також завантажте вихідні коди собі на комп’ютер!

Крок 1

Створіть папку (наприклад, folder) і помістіть в її директорію просту HTML сторінку (наприклад, index.html). Ця сторінка повинна містити наступний код:

Урок 1

Даний блок закруглений без використання картинок

Для того щоб зрозуміти де, що і як, ми розберемо код нашого файлу 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-х підблоків.

Також до вашої уваги хочу привести збільшене зображення лівого верхнього кута блоку:

Закруглення кутів блоку засобами HTML/CSS

А також нижнього лівого:

Закруглення кутів блоку засобами HTML/CSS

Крок 2

Після цього в папці folder ми створюємо ще одну папку (наприклад, style). Потім у неї ми поміщаємо файл CSS (наприклад, style.css), який повинен містити наступний код:

#container{
width: 100%;
}
.xb1, .xb2, .xb3, .xb4, .xb5, .xb6, .xb7{
display: block;
overflow: hidden;
}
.xb1, .xb2, .xb3, .xb4, .xb5, .xb6{
height: 1px;
}
.xb1{
margin: 0 8px;
background: #7f7f9c;
}
.xb2{
margin: 6px 0;
background: #7f7f9c;
}
.xb3{
margin: 0 4px;
background: #7f7f9c;
}
.xb4{
margin: 0 3px;
background: #7f7f9c;
}
.xb5{
margin: 2px 0;
background: #7f7f9c;
}
.xb6{
margin: 2px 0;
background: #7f7f9c;
}
.xb7{
margin: 0 1px;
background: #7f7f9c;
height: 2px;
}
.content{
display: block;
height: 100px;
background: #7f7f9c;
}
.content p{
font-size: 2.5 em;
color: #fc0;
margin: 0 10px;
letter-spacing: 1px;
}
.top_corners{
margin: 0;
padding: 0;
}
.down_corners{
margin: 0;
padding: 0;
}

Тепер ми докладно розглянемо код файлу style.css, оскільки саме тут задаються параметри властивостей, які в сукупності і дали нам можливість закруглити кути блоку.

Почнемо з властивостей display: block; overflow: hidden;, які задані для блоків «xb1″,» xb2″,…,»xb7″. Ці властивості призначені для того, щоб блоки «xb1», «xb2″,…,»xb7» вишикувалися один за одним (блочне розташування).

Для кожного блоку заданий свій колір (background: #7f7f9c;) і свій відступ за допомогою властивості margin.

Розберемо властивості блоків «xb1», «xb2″,…,»xb7» на прикладі блоку «xb1»:

.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 пікселів). За допомогою цієї властивості ми можемо збільшувати і зменшувати висоту блоку з закругленими кутами (про це ми поговоримо трохи пізніше).

У блоку «container» є лише одна властивість width. Воно допомагає нам визначити ширину блоку з закругленими кутами. Зміни ширини блоку за рахунок цієї властивості будуть розглянуті нижче.

Блоки «top_corners» і «down_corners» є допоміжними. Функціонального навантаження не несуть. При бажанні їх можна видалити – все залишиться на своїх колишніх місцях. Вони введені для більш ясного уявлення коду.

Після того, як виконані пункти 1 і 2, у вікні нашого браузера з’явився блок з закругленими кутами:

Закруглення кутів блоку засобами HTML/CSS

«Так, блок з закругленими кутами є, але він же розтягнутий на всю ширину вікна браузера, так і висота у нього не та, що мені потрібно», — скажете Ви. Але переживати з цього приводу не варто. Даний блок можна задавати будь-нам необхідної ширини, так і висоти.

Для цього нам необхідно ознайомитися більш докладно з файлом style.css., а саме ось з цими елементами та їх властивостями:

#container{
width: 100%;
}
і
.content{
display: block;
height: 100px;
background: #7f7f9c;
}

За ширину створюваного блоку відповідає блок «container».

Як ми можемо побачити, в елементі container задана ширина блоку 100% (тобто блок тягнеться і розташовується на всю ширину екрана браузера). Для її зміни нам потрібно змінити значення властивості ширини блоку width (зараз він дорівнює у нас 100%). Поставимо, приміром, 600 пікселів:

#container{
width: 600px;
}

Після внесення вищевказаних змін наш блок став виглядати так:

Закруглення кутів блоку засобами HTML/CSS

Для того щоб задати потрібну висоту блоку, необхідно у властивостях блоку «content» змінити значення властивості висоти блоку height (зараз він дорівнює у нас 100px). Задамо висоту блоку, рівну, наприклад, 300 пікселів:

.content{
display: block;
height: 300px;
background: #7f7f9c;
}

Тепер наш блок виглядає ось так:

Закруглення кутів блоку засобами HTML/CSS

Крок 3

В завершення теми хотів би поговорити ще про одну важливу деталь – це радіус закруглення кута блоку. Як Ви вже зрозуміли, закруглений кут створюється саме за коштами накладення одного блоку на інший (побачити це можна на збільшеному зображенні лівого верхнього кута, а також лівого нижнього, яке я доклав вище). Для того щоб збільшити радіус закруглення Вам просто необхідно додати n блоків «xbn». Кожен новий блок повинен мати зовсім інше значення властивостей height і margin від попереднього. За рахунок цього і буде досягнутий закруглений кут.

Т. о., чим більше у вас використовується блоків «xbn», тим більше радіус закруглення кута блоку.

Також додаю детальну карту блоків для того, щоб було простіше у всьому орієнтуватися:

Закруглення кутів блоку засобами HTML/CSS

На цьому у мене все. Дякую за увагу.

Висновок

У цьому уроці ми навчилися закруглювати кути блоків засобами HTML/CSS. Розглянуто метод «закруглення кутів блоку за допомогою позиційного побудови блоків» заокруглення кутів блоку. Існують ще кілька способів заокруглення кутів блоку (наприклад, за допомогою картинок; засобами CSS3, JS), але їх ми розглянемо вже в наступний раз.

Хотілося б виділити переваги і недоліки розглянутого методу:

— переваги:
1. Цей метод виключає можливість некоректного відображення web-сторінки в браузері, що є явним недоліком методу «закруглення кутів блоку за допомогою картинок» (якщо відключити відображення картинок в вікні браузера при використанні «закруглення кутів блоку за допомогою картинок», то блок відображається некоректно – відсутність закруглених кутів);
2. Зрозумілий і легкий у використанні код;
— недоліки:
1.Потрібно використовувати багато блоків, щоб створити один з закругленими кутами.

З Новим 2011 Роком!

Закруглення кутів блоку засобами HTML/CSS

E-mail: [email protected]

Проект webformyself.com — Як створити свій сайт. Основи самостійного сайтобудування

P. S. Хочете опублікувати цікавий тематичний матеріал і заробити? Якщо відповідь «Так», то тисніть сюди.