This page has been robot translated, sorry for typos if any. Original content here.

38 статей про створення закруглені кути на сайтах за допомогою css

38 статей про створення закруглені кути на сайтах

Часто стикаєшся з необхідністю створення блоків з круглими краями. Поставивши собі за питанням як взагалі можна вирішити поставлене завдання, зробив добірку цікавих статей та уроків на дану тему.

Тут представлений огляд 38 статей, розбитих на 4 категорії за способами реалізації.


Без використання порожніх тегів

Простий, семантично правильний CSS блок з чистим кодом

Створює блок і додає можливість створення заголовка блоку. Тягнеться по ширині і висоті. Незважаючи на тінь на прикладі, реалізації напівпрозорої тіні не передбачено.
Простий, семантично правильний CSS блок з чистим кодом


Круглі кути в CSS

Дуже приємний зовнішній вигляд, проста реалізація, мала кількість HTML-елементів. До мінусів, мабуть, можна віднести тільки наявність 4 картинок для кожного з кутів. Але на жаль не працює в IE.
Круглі кути в CSS


CSS тизер-блок

Передбачена реалізація як одно- так і двох-картіночного методу. Мала кількість HTML-елементів. Дуже зручно для створення тізерів.
CSS тизер-блок


Посилання на останні новини

Дуже цікаве рішення на основі неупорядкованого списку. Плюсом буде проста реалізація і мала кількість HTML-елементів. Приємне оформлення з функцією зміни кольору при наведенні мишкою (але ця приємність не працює в IE).
Посилання на останні новини


CSS і круглі кути: Кордони з дугами

Незаперечним мінусом є наявність 8 Дивов для реалізації. Так само в статті є опис іншого методу, в якому використовується в 2 рази менше Дивов, але блок залитий кольором.
CSS і круглі кути: Кордони з дугами


Озаглавлені зверху кути

Реалізовано на основі списків визначень. Досить гарне оформлення, можливість створення заголовка. Відсутня підтримка зміни ширини. Але є зручна можливість швидкої зміни кольору заголовків і самого блоку.
Озаглавлені зверху кути


Створення округленій блоку або дизайн з CSS і XHTML

Як і в попередньому способі все реалізовано на основі списку визначень. У статті розглянуто два способи реалізації. Так само з'явилася можливість тягнеться ширини.
Створення округленій блоку або дизайн з CSS і XHTML


Гумовий блок з легко змінюваними кутами і поверхнею

Мінусами в цьому способі так само є велика кількість Дивов (5) і 4 файлів картинок. Але є цікаві приклади для реалізації.
Гумовий блок з легко змінюваними кутами і поверхнею


Закруглені кути бордера

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


Круглі кута в CSS

Досить приємний урок. Його мінусом, мабуть, є відносно велика кількість HTML-елементів і наявність 4 картинок для кожного з кутів.
Круглі кута в CSS


Створення довільних кутів і кордонів

Використовується 4 файлу з картинками (максимальна ширина блоку залежить від ширини картинки). Але дуже докладний урок.
Створення довільних кутів і кордонів


«Куленепробивні» круглі кути

Дуже докладна стаття з великою кількістю прикладів. Але досить складна реалізація. До того ж використовується 4 картинки.
Куленепробивні круглі кути


Малювання тіней і рамок елементів оформлення

Стаття Володимира Токмакова. Вельми складна реалізація, але до плюсів, звичайно, відноситься можливість створення напівпрозорих тіней. Стаття російською.
Малювання тіней і рамок елементів оформлення


Круглі кути з фіксованою шириною

Цікавий приклад використання. Але мінус у фіксованій ширині даного способу. Плюс - дуже проста реалізація.
Круглі кути з фіксованою шириною


CSS тягнеться блок з 4 довільними кутами

Цілком хороший урок. Можливість відкидання тіней. Плюс - можливість створення заголовків.
CSS тягнеться блок з 4 довільними кутами


Робимо закруглені куточки за допомогою псевдоелементів: before та: after

Стаття вже була описана на Хабре. Дуже проста реалізація, але не всі приклади, наведені в статті, працюю в IE. Використовується 4 файлу з картинками для реалізації. Стаття російською.
Робимо закруглені куточки за допомогою псевдоелементів: before та: after


Створення довільних кутів і кордонів. частина II

Описується спосіб при якому фон не суцільний, а градієнтний. Використовується 4 картинки.
Створення довільних кутів і кордонів. частина II


Круглі кути в DIVах

Описано 3 способи реалізації. Таблицями, дивами і дивами без картинок. Останній варіант не дуже хороший, тому що використовується багато порожніх тегів.
Круглі кути в DIVах


Круглі кути і блоки з тінню

Мабуть, не дуже добрий спосіб, так як використовується 5 картинок. Але начебто передбачена можливість створення тіні. Плюс - використання тільки двох HTML-елементом.
Круглі кути і блоки з тінню


Цікава верстка

Стаття на Хабре, в якій хабражітелі намагаються запропонувати свої варіанти вирішення. Стаття російською.
Цікава верстка


Використовують порожні теги

Ще більше круглих кутів з CSS

Приємна на зовнішній вигляд техніка, але шкода, що немає реалізації PNG під IE.
Ще більше круглих кутів з CSS


CSS гумові круглі кути

Використовує по два порожніх тега на верх і низ блоку. До мінусів відноситься 6 картинок для реалізації.
CSS гумові круглі кути


CSS: Розумні кути

Використовує один порожній для верху і два для низу. Цілком приємна реалізація.
CSS: Розумні кути


Як зробити тягнуться по ширині divи з круглими краями

Начебто і з PNG, але знову ж таки в IE не працює. Як плюсів можна назвати урок з малювання круглих країв :)
Як зробити тягнуться по ширині divи з круглими краями


Тягнуться круглі кути

Велика докладна стаття з великою кількістю картинок. Але на кожен кут по диву, плюс див для контенту.
Тягнуться круглі кути


Закруглення кутів без використання зображень

Спосіб безкартіночного створення закруглені кути. Але багато порожніх елементів <B> (спосіб, аналогічний блокам GMail).
Закруглення кутів без використання зображень


використовують JavaScript

подання DomCorners

У статті є кілька варіацій на тему кількості використовуваних зображень. Мінус у використанні порожніх тегів.
подання DomCorners


Прозорі довільні кути і межі. версія 2

Наочний приклад використання. Гарне оформлення. Відкидання напівпрозорих тіней, але тіні не працюють в IE.
Прозорі довільні кути і межі. версія 2


Nifty кути зі згладжуванням

У своєму роді є додавання до скрипту Nifty Corners. Чи не використовує зображень. Можна змінювати радіус заокруглення як по осі X так і по Y.
Nifty кути без згладжування


Круглі кути

Дуже проста реалізація, всього один елемент div. Так само в коментарях багато доповнень.
Круглі кути


http://www.curvycorners.net

Окремий сайт присвячений круглим кутах. Красиві приклади використання. Дуже проста реалізація і багато можливостей налаштування.
www.curvycorners.net


Nifty Corners Cube

Дуже популярний скрипт, що дозволяє створити круглі кути без зображень. Дуже багато варіантів реалізації.
Nifty Corners Cube


RUZEE.Borders - круглі кути за допомогою яваскрипт

Досить велика кількість можливостей. Так само заснований на Nifty. Можливість створювати тінь, але не працює в IE.
RUZEE.Borders - круглі кути за допомогою яваскрипт


jQuery скругление

Мабуть найбільший вибір всіляких кутів. Мала кількість HTML-елементів для реалізації.
jQuery скругление


Генератори круглих країв

RoundedCornr

Велика кількість можливостей. Генерує 4 типи блоків, в тому числі і кнопки. Єдиний мінус в наявність порожніх тегів в генерованому коді.
RoundedCornr


Spiffy Corners

Дуже простий генератор. Але генерує дуже велика кількість елементів <B> .
Spiffy Corners


Spanky Corners 1.1

Простий генератор з хорошим HTML-кодів, плюс генерує окремий css-файл для IE.
Spanky Corners 1.1


Spiffy Box

Генерує одну png-картинку з заданими параметрами. До плюсів можна віднести простий HTML-код. Так само в статті є посилання на урок, по якому створено генерований код.
Spiffy Box