Думаю, всі знають, що зробити закруглені кути біля блоків – велика проблема. Крос-браузерного рішення без застосування JS милиць поки не існує. З релізом IE9 головного болю поменшає, але якщо ви все ще кип'ятите верстаєте під IE6/7, для вас це не стане порятунком. Але навіть якщо IE6/7 кануть у лету, ще чимало часу пройде, поки ми забудемо про 8 версії цього браузера, який теж не підтримує параметр border-radius. Іншими словами, сидіти на яваскриптових стероїдах наші сайти будуть ще довго.

Статей на тему округлих форм написано чимало, але всі вони (ті, що я зміг знайти), замовчують тонкощі і нюанси застосування фіксів для існуючої проблеми. Я постараюся перерахувати всі труднощі, з якими мені довелося зіткнутися при використанні популярних рішень.

Для початку, скажу пару слів про те, як змінюється ситуація з border-radiusпід час виходу нових версій браузерів.

По-перше, 4-а версія FireFox тепер не потребує свого власного параметра -moz-border-radius. IE9, як я вже говорив, теж реалізує підтримку border-radius, принаймні, в RС версії вона вже є. Opera все чудово з версії 10.5.

Тепер рішення для тих, кого Бог поділив.

І так, існує два найбільш відомих та застосовуваних способи зробити border-radius крос-браузерним. Перший з них – Curved-corner, який використовує VML та behaviour. Другий – CSS3 PIE, який має дві реалізації. Одна також заснована на VML і behaviour, друга являє собою JavaScript бібліотеку.

Розглянемо обидва рішення.

Curved-corner

З плюсів я знайшов тільки один - мала вага файлу, що підключається border-radius.htc. Поточна версіяреалізації займає лише 5кб. Проти PIE, який важить 33 кб, безумовно, це є значною перевагою. Але на цьому плюси закінчуються, принаймні для мене.

Мінусів дуже багато. Наприклад, не працюватиме така ось конструкція:

#selector ( border: #c6c5c2 1px solid; border-top: none; border-radius: 0 0 6px 6px; background: #f0ecdf; behavior: url(border-radius.htc); )

По-перше, не можна забрати рамку з однієї зі сторін. Тобто, параметр border-top приб'є рамку взагалі всього блоку, хоча кути залишаться закругленими. Кумедно, але параметр border-bottom рамку залишить на місці, але ніякого ефекту не дасть, тобто бордер залишиться навколо всього блоку.

По-друге, якщо вам необхідно обтесати всього два кути, як у прикладі, то на вас чекає розчарування. Curved-cornerтакого не вміє. Він може закруглювати лише всі кути блоку і на рівне значення радіуса. Кутів з різним радіусом заокруглення досягти не вийде. Правильні та робочий варіант виглядає тільки так:

#selector ( border: #c6c5c2 1px solid; border-radius: 6px; behavior: url(border-radius.htc); )

По-третє, Curved-corner не працює для блоків, у яких як тло задано зображення.

Ну останній неприємний момент- швидкість роботи. Кути закруглюються далеко не одразу. З моменту завантаження сторінки і до того, як кути приймуть потрібну формупроходить близько секунди. Візуально затримка дуже помітна і добре впадає у вічі.

Були ще якісь проблеми (читайте нюанси), але зараз уже не пригадаю.

Резюмуючи, можна сказати, що цей фікс підходить лише для дуже простих завдань. Хоча, як показує практика, такі прості завдання трапляються нечасто.

CSS3 PIE

Важить багато, нічого не скажеш. Версія PIE 1.0 beta 4 займає 33 кб, як у реализации.htc, і js аналог. Але при цьому CSS3 PIE позбавлений всіх тих проблем із border-radius, які є у Curved-corner. Також мені значно імпонує можливість використовувати JS реалізацію, яка не вимагає додаткового коду CSS і може чіплятися на будь-який селектор (при використанні jQuery, наприклад).

CSS3 PIE затримка у малюванні також присутня (іноді ні), але значно менша, ніж у випадку з Curved-corner. Вона практично непомітна, що робить бібліотеку дуже привабливою та придатною до використання.

Ну і найпрекрасніше полягає в тому, що CSS3 PIE виправляє проблему не тільки з border-radius, але й додає значно кількість властивостей CSS3 у криві майкрософтівські браузери. Так, наприклад, працюватимуть border-image та box-shadow, властивості роботи з градієнтами. Вирішується проблема прозорості pngі багато іншого. Все це хвацько компенсує і пояснює розмір CSS3 PIE.

Ще дьогтю

На жаль, ні CSS3 PIE, ні Curved-corner не здатні заткнути собою всі щілини. Так, наприклад, круглих кутів ви не отримаєте тих елементів, які спочатку приховані - мають параметр display: none . Аналогічно з параметром visible та його значенням hidden. Можуть виникнути проблеми, якщо елемент абсолютно позиціонується. На жаль, дати детальний описситуації не можу, тому що не вдалося повторити умови, за яких виникали проблеми, але пам'ятаю, що проблеми безперечно були.

Є ще одна відома мені проблема. Для того, щоб застосувати border-radius для елемента при наведенні на нього курсору миші, наприклад:

A:hover ( background: #ccc; color: #000; border: #ccc 1px solid; border-radius: 6px )

Необхідно, щоб цей елемент мав закруглені кути спочатку, інакше ефекту не буде. Тобто, в даному прикладі, повинен бути селектор A, у якого також буде заданий border-radius і border:

A ( background: #fff; color: #000; border: #fff 1px solid; border-radius: 6px ) a:hover ( background: #ccc; color: #000; border: #ccc 1px solid; border-radius: 6px )

Підсумки

Особисто для мене безумовним фаворитом є CSS3 PIE. Справді справляється зі своїм завданням і робить це гідно. До того ж, бібліотека розвивається. Цей розвиток супроводжується регулярним виходом нових версій, що дуже обнадіює.

Я впевнений, що ви вже знайомі з css властивістю border. Чи дізнаєтесь ви щось нове, чого не знали раніше про css border? Що ж, не тільки дізнаєтесь, а й побачите кілька нових речей, яких ви ніколи не знали раніше!

Не тільки CSS3 можна використовувати для закруглення куточків, але й чистий CSS-код підійде для створення складних форм. Раніше ви могли використовувати background-image для створення враження закруглених куточків. Завдяки новим технікам використання border, ми можемо зробити це на чистому css коді.

Основи використання css border

Напевно, ви вже ознайомлені з стандартним використанням border властивості:

Border: 1px solid black;

Код вище, виведе рамку у 1px, яка буде чорного кольору. Легко і просто. Також можна трохи розширити синтаксис:

Border-width: thick; border-style: solid; border-color: black;

Як додаток можна використовувати специфічні значення властивості border-width, три ключових слова: thin, medium, thick.

Але використання розширеного синтаксису який завжди практично. Давайте розглянемо приклад, коли потрібно змінити колір рамки блоку при наведенні миші. У такому разі використання скороченого синтаксису набагато простіше:

Box ( border: 1px solid red; ) .box:hover ( border: 1px solid green; )

Елегантніше і простіше можна зробити наступним чином:

Box ( border: 1px solid red; ) .box:hover ( border-color: green; )

Як бачите, розширена техніка також корисна, коли ми змінюємо лише деякі властивості: width, style, color та інші.

Border-Radius

Border-radius- це "золота" властивість CSS3 - перша, найбільш поширена властивість, яка стала практичною і корисною. Виключаючи IE8 та версії нижче, всі браузери відображають закруглені куточки за допомогою цього.

Хоча, необхідно використовувати спеціальні префікси для Webkit та Mozilla, щоб стилізація була коректною.

Webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;

В даний час ми можемо прибрати спеціальні префікси, і використовувати стандартну форму border-radius.

Ще один привілей у тому, що ми можемо використовувати спеціальні значення для кожної із сторін блоку:

Border-top-left-radius: 20px; border-top-right-radius: 0; border-bottom-right-radius: 30px; border-bottom-left-radius: 0;

У коді вище, встановлюючи border-top-right-radius та border-bottom-left-radius на «нуль», можна досягти дивовижних форм. Хоча елемент може успадковувати деякі властивості, які потрібно обнулити.

На кшталт margin і padding, ми можемо стиснути синтаксис:

/* top left, top right, bottom right, bottom left */ border-radius: 20px 0 30px 0;

Як приклад застосування властивості border-radius покажу вам «лимон», який часто використовують дизайнери при верстці сайтів:

Lemon ( width: 200px; height: 200px; background: #F5F240; border: 1px solid #F0D900; border-radius: 10px 150px 30px 150px; )

Ідемо далі основ

У багатьох дизайнерів всі знання, в області css властивості border, на цьому закінчуються. Але існує ще кілька крутих штук, за допомогою яких можна створити чудові речі!

Складні структури css border

Існує безліч технік для створення дизайну із застосуванням складних структур border. Наприклад, розберемо такі…

Border-Style

Ми завжди використовуємо найбільш відомі властивості solid, dashed та dotted. Але існує кілька інших властивостей border-style: groove і ridge.

Border: 20px groove #e3e3e3;

Або в розширеному синтаксисі:

Border-color: #e3e3e3; border-width: 20px; border-style: groove;

Хоча ці властивості корисні, але вони є основою створення складних рамок.

Outline

Найбільш популярна техніка створення подвійний рамки- Використання властивості outline.

Box ( border: 5px solid #292929; outline: 5px solid #e3e3e3; )

Цей спосіб працює відмінно, хоча він нас обмежує тільки двома рамками. Іноді буває потрібно створити градієнтний border, який складається з багатьох верств… як тоді?

Псевдоелементи

Коли техніки outline мало, альтернативним засобомє використання псевдо елементів:before та:after. За допомогою яких можна додати додаткові рамкидо елемента:

Box ( width: 200px; height: 200px; background: #e3e3e3; position: relative; border: 10px solid green; ) /* Create 2 boxes with same width of container */ .box:after, .box:before ( content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; ) .box:after ( border: 5px solid red; : 10px solid blue;

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

Box-Shadow

Цікавим «дитячим способом» створення подібного ефекту є використання CSS3 властивості box-shadow:

Box ( border: 5px solid red; box-shadow: 0 0 0 5px green, 0 0 0 10px yellow, 0 0 0 15px orange; )

У цьому випадку ми були розумнішими, використовували спеціально призначену властивість box-shadow. Змінюючи параметри x, y, blur на нуль, ми можемо використовувати різні кольори для створення безлічі рамок.

Але є проблемка, в старих браузерах, які не розуміють властивості box-shadow, буде видно лише одну червону рамку в 5px.

«Пам'ятайте! Дизайн сайту має виглядати кроссбраузерно, тобто однаково у всіх браузерах. Включаючи старі версії.

Змінюємо кути

На додаток до використовуваного простого значення border-radius, ми можемо вказати два окремі - розділяючи їх через / ми вкажемо горизонтальний і вертикальний радіус.

Для прикладу:

Border-radius: 50px/100px; /* horizontal radius, vertical radius */

… це рівносильно:

Border-top-left-radius: 50px 100px; border-top-right-radius: 50px 100px; border-bottom-right-radius: 50px 100px; border-bottom-left-radius: 50px 100px;

Ця техніка підходить для створення унікальних форм блоків. Наприклад, ось створення ефекту загорнутого паперу:

Box ( width: 200px; height: 200px; background: #666; border-top-left-radius: 15em 1em; border-bottom-right-radius: 15em 1em; )

CSS форми, з використанням border

Ця техніка показує, як можна створювати css форми, при цьому використовувати елементи з нульовими розмірамивисоти та ширини. Здивовані? Давайте подивимося на прикладі…

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

…і наступний базовий стиль:

Box ( width: 200px; height: 200px; background: black; )

Найчастіший приклад використання CSS форм - створення обтічної стрілки. Секрет цієї стрілки криється у створенні border із різними кольорами для кожної із сторін. Потім ставимо атрибути width і height на 0.

Призначимо до блоку div клас arrow:

Arrow ( width: 0; height: 0; border-top: 100px solid red; border-right: 100px solid green; border-bottom: 100px solid blue; border-left: 100px solid yellow; )

Щоб продемонструвати, спочатку ми використовуємо розширений синтаксис. Далі ми можемо забрати зайвий код, використовуючи скорочений синтаксис:

Arrow ( width: 0; height: 0; border: 100px solid; border-color: red green blue yellow; )

Цікаво, чи не так? Тепер ми встановимо прозорі кольорина всі боки, крім блакитної сторони.

Arrow ( width: 0; height: 0; border: 100px solid; border-bottom-color: blue; )

Чудово вийшло! Але це суперечить семантичній верстці, створювати.arrow div, тільки для того, щоб додати стрілку на сторінку. Для цієї мети ми можемо використовувати псевдоелементи, що ми зараз і зробимо.

Створюємо Speech Bubble

Для створення Speech Bubble («Мовленевого хмари»), нам знадобиться невеликий шматочок чистого CSSкоду та один div блок.

Speech-bubble ( position: relative; background-color: #292929; width: 200px; height: 150px; line-height: 150px; /* vertically center */ color: white; text-align: center; )

Speech-bubble:after (content: ""; )

На цьому етапі ми створимо стрілочку, яку робили раніше, додамо до елемента і залишається лише позиціонувати:

Speech-bubble:after ( content: ""; position: absolute; width: 0; height: 0; border: 10px solid; border-color: red green blue yellow; )

Якщо ми хочемо, щоб стрілочка була спрямована вниз, нам доведеться встановити все border прозорими, крім верхнього.

Speech-bubble:after ( content: ""; position: absolute; width: 0; height: 0; border: 10px solid; border-top-color: red; )

Коли ми створюємо цю CSS форму, ми можемо конкретно вказати розмір стрілочки. Натомість ми можемо встановити властивість border-width, яка призначатиме розмір для стрілочки. Також ми встановимо позицію стрілочки внизу посередині. Відповідно для цього використовуємо значення top та left.

Speech-bubble:after ( content: ""; position: absolute; width: 0; height: 0; border: 15px solid; border-top-color: red; top: 100%; left: 50%; )

Крім цього, нам залишається надати колір, такий самий як у блоку. Пам'ятайте, що при позиціонуванні, потрібно враховувати розмір інших border, які невидимі (15px). Також додамо блоку заокруглення по кутах.

Speech-bubble ( /* … інші styles */ border-radius: 10px; ) .speech-bubble:after ( content: ""; position: absolute; width: 0; height: 0; border: 15px solid; border-top -color: #292929; top: 100%; left: 50%; margin-left: -15px; /* adjust for border width */ )

Не погано, га? Використовуючи кілька css класів та хитрощі border, можна створити таку штуку.

/* Speech Bubbles Usage: застосуйте клас.speech-bubble і.speech-bubble-НАПРЯМ, як показано нижче

*/ .speech-bubble ( position: relative; background-color: #292929; width: 200px; height: 150px; line-height: 150px; /* vertically center */ color: white; text-align: center; border- radius: 10px; font-family: sans-serif; ) .speech-bubble:after ( content: ""; position: absolute; width: 0; height: 0; border: 15px solid; ) /* Position the Arrow .speech-bubble-top:after ( border-bottom-color: #292929; left: 50%; bottom: 100%; margin-left: -15px; ) .speech-bubble-right:after ( border-left-color : #292929; left: 100%; top: 50%; margin-top: -15px; ) .speech-bubble-bottom:after ( border-top-color: #292929; top: 100%; left: 50%; margin-left: -15px; ) .speech-bubble-left:after ( border-right-color: #292929; top: 50%; right: 100%;

Бонус! Вертикальне центрування всередині блоку

Для одного рядка тексту можна використовувати line-height. Але якщо у вас два або більше рядків тексту ... найкращим рішенням буде встановити display властивість на table, і помістити весь текст у параграф. Ось як це виглядає на html розмітці: