Уеб уроци и ресурси по HTML,
CSS, CSS3, JavaScript и други

Заоблени ъгли чрез border-radius 4

Сподели урока

Заоблени ъгли. Звучи толкова примамливо. Ако се занимаваш с уеб от достатъчно дълго време, сигурно си спомняш колко трудно беше и колко време отнемаше, за да се добавят заоблени ъгли към някой елемент. Процеса беше дълъг и не се отдаваше на всеки. За сметка на това пък резултата наистина си заслужаваше. За радост, това остана в миналото.

Днес, създаването на заоблени ъгли е по-лесно от всякога. Благодарение на CSS3 свойството border-radius, добавянето на заоблени ъгли може да бъде направено дори и от първокласник. Най-хубавото от всичко е, че ще ти отнеме не повече от 5 минути, за да усвоиш това свойство. Всички съвременни браузъри вече го поддържат, което означава че можеш свободно да го използваш в своя уеб сайт.

Структура на урока

Какво е border-radius?

Това е CSS3 свойство, чрез което бързо и лесно можеш да заоблиш ъглите на даден елемент в настоящата уеб страницата. Border-radius е доста гъвкаво свойство, което може да приеме различни на брой стойности. Всичко това ще го разгледаме в този урок.

Настояща браузърна поддръжка

Всички съвременни браузъри поддържат това свойство. Дори Internet Explorer 9. Ето един по-подробен списък:

Desktop версии

  • IE 9+;
  • Firefox 4+;
  • Chrome 5+;
  • Safari 5+;
  • Opera 10.5+;

Мобилни версии

  • iOS Safari 4+;
  • Android 2.2+;
  • Opera Mobile 11.0+;
  • Opera Mini - Не се поддържа;

По-стари браузъри (Повече информация)

  • Firefox < 4 изисква представка –moz-;
  • Chrome < 4 и Safari < 5 изискват представка –webkit-;
  • Internet Explorer < 9 … просто не го поддържат. Както и да е, има начин да се заобиколи (повече за това).

За подробна информация разгледай страницата на border-radius в caniuse.com

Как работи

Всяка от стойностите на border-radius може да бъде в един от тези два типа:

  • дължина (length) - Това са всички валидни CSS стойности за дължина като px, em, cm, mm и т.н.
  • процент (%) – Това се определя като част от ширината и/или височината на елемента.

Негативните числа се считат за невалидни. Стойността по подразбиране е 0.

Ще започнем от съкратеното свойство на border-radius, защото с него се работи най-лесно.

Съкратено свойство

Свойството border-radius може да приеме една единствена стойност, която ще заобли еднакво всички ъгли на елемента. Това е т.нар. съкратено свойство. Резултата е ясно видим в следващия пример.

Синтаксис на съкратеното border-radius свойство.

Демо.

Както виждаш, не би ти отнело и минута, за да заоблиш ъглите на някой елемент.

Тук обаче идва един доста логичен въпрос.

Съкратеното свойство ни позволява да заоблим всички ъгли наведнъж. Да, обаче аз искам да заобля само горните два ъгъла. Как ще стане това?

Радвам се, че попита. Това става чрез задаване на отделна стойност за всеки ъгъл.

Разширено свойство

Синтаксис на разширеното border-radius свойство.

Демо.

Свойсвото е абсолютно същото, но този път броя на стойностите е по-голям. Тук задаваме четири отделни стойности (по една за всеки ъгъл). Те се задават в следния ред: горен-ляв, горен-десен, долен-десен и долен-ляв ъгъл.

Няма нищо сложно нали? Използването на border-radius е супер лесно и разбираемо. Какво ще стане обаче, ако зададем само две стойности, а не четири?

Задаване на две стойности

Има още един трик, който искам да ти разкрия. Ако зададеш само две стойности, тогава първата ще отговаря за заоблянето на горен-ляв и долен-десен ъгъл, а втората ще отговаря за заоблянето на горен-десен и долен-ляв ъгъл.

Задаване на две стойности на border-radius.

Демо.

Започна да става интересно. Ами ако стойностите са три? Е ... оставяме те да експериментираш.

Може би забелязваш обаче, че има един малък проблем в горните примери. Той е, че не можем да заоблим един единствен ъгъл без да зададем стойности на останалите. За тази цел можем да използваме свойството border-*-*-radius.

Заобляне на индивидуален ъгъл чрез border-*-*-radius

Чрез свойството border-*-*-radius имаш по-голям контрол върху заоблянето на индивидуални ъгли. Например горен-десен.

На мястото на * трябва да поставиш една от следните ключови думи: top, bottom, left или right. Комбинацията от тези думи ще ти позволи да се фокусираш върху един единствен ъгъл.

Това свойство може да приеме две стойности, но втората не е задължителна. Първата стойност определя хоризонталната граница на заобляне, а втората – вертикалната. В случай, че зададем само една стойност, тя ще бъде използвана и за двете граници.

Това става ясно от изображението долу.

border-top-left-radius: 15px; (1) 
						15px 15px; (2) 
                        30px 50px; (3) 
                        50px 30px; (4)

border-top-left-radius може да приеме една или две стойности.

Демо.

Във фиг. 1 използваме само една стойност, която се прилага хоризонтално и вертикално.

Във фиг. 2 използваме две еднакви стойности, които дават същия резултат като фиг. 1.

Във фиг. 3 използваме две различни стойности. Първата се прилага по хоризонтала, а втората по вертикала.

Фиг. 4 е подобна на фиг. 3. Разликата е, че стойностите са разменени.

Както виждаш, много лесно можеш да усвоиш начина на работа на border-*-*-radius.

Другите възможни комбинации са: border-top-right-radius, border-bottom-right-radius и border-bottom-left-radius. Пробвай ги, за да видиш как работят.

Поддръжка на по-стари браузъри

До тук нещата изглеждат наистина елементарни. Ще се радвам, ако ти също мислиш така. Както казах по-рано, border-radius работи безпроблемно във всички съвременни браузъри. Какво трябва да правиш обаче, за да проработи и в по-старите? Ето няколко предложения.

Важно е да отбележа, че вече все по-малко хора използват тези т.нар. “стари” браузърни версии (IE е малко по-специален случай). Предложенията по-долу ще ти помогнат да “подкараш” свойството, но аз лично ти предпоръчвам първо да провериш статистиката на сайта си и да видиш колко посетителя всъщност влизат в сайта през тези браузъри.

Ако голяма част от тях (да кажем 15%) все още ги използват, тогава може би си заслужава добавянето на всичкия този допълнителен код. Ако обаче статистиката показва, че само 10-20 човека в последния месец са влезли през Firefox < 4 или IE 6 (в което съм почти 100% убеден), тогава може би трябва да помислиш дали е добре да ги поддържаш.

Замисли се, ако ъглите на някои от елементите са остри, а не заоблени, това няма да направи сайта ти по-неизползваем.

Оставям решението на теб.

Firefox

Става въпрос за версиите преди 4.

За да ги поддържаш, простро трябва поставиш представката –moz- пред border-radius. Добра идея е този ред да бъде преди официалното свойство. Така, в случай че браузъра не го разбере, просто ще го игнорира.

-moz-border-radius: 15px; /* Поддръжка на Firefox < 4 */
border-radius: 15px;

Chrome и Safari

Става въпрос за версиите преди 4 (на Chrome) и 5 (на Safari).

Представката, която трябва да използваш тук е –webkit-. Добавя се преди border-radius. Тук също се препоръчва този ред да бъде преди официалното свойство. Комбинирайки го с предното, това ще стане така:

-moz-border-radius: 15px; /* Firefox < 4 */
-webkit-border-radius: 15px /* Chrome < 4, Safari < 5 */
border-radius: 15px;

Internet Explorer < 9

За съжаление, по-старите версии на Internet Explorer (< 9) игнорират изцяло border-radius, което всъщност не е голяма изненада.

Единствения начин, който съм открил (за сега) е като се използва CSS3 PIE. Това е специален файл, който се добавя задължително като последна декларация на текущия селектор.

В урока “Заоблени ъгли в Internet Explorer 6-8” можеш да прочетеш повече.

За сега съвета ми е да се фокусираш върху усвояването на border-radius. Пробвай го, виж как работи и създай няколко примера. Това ще ти бъде от голяма полза.

Полезни линкове

Заключение

Border-radius е страхотно CSS3 свойство, от което можеш да се възползваш още днес. В този урок научи колко лесно можеш да заоблиш ъглите на буквално всеки елемент. Надявам се, че урока ти хареса и откри нова и полезна информация.

Пропуснах ли да спомена нещо в урока? Затруднява ли те нещо? А ти използваш ли вече border-radius в някой свой сайт? Ако не, мислиш ли да се възползваш? Сподели коментара си по-долу.

Поздравления, това е краят на този урок!
За награда получаваш вкусен мъфин.

Награда за това, че успя да достигнеш до края на урока.

Хареса ли ти урока? Сподели го със света :)

Начало

4 страхотни коментара

  1. 1

    Plamen Penchev
    08 декември 2012 17:19

    За пореден път един прекрасен урок :)

  2. 2

    Дани
    08 декември 2012 19:03

    Страхотен урок. Повтарям се, че ми се иска като се учех да имах такива уроци. А ще разкажеш ли за -moz-animation?

  3. 3

    Джават Ушев (автор)
    08 декември 2012 23:40

    @Plamen Penchev: Благодаря. Радвам се, че го намираш за полезен :)

    @Дани: Постепенно ще качвам и уроци за по-напреднали, така че се надявам те да ти бъдат в плюс :)

    Animation вече се поддържа във Firefox (версия 16+) без представката -moz-. Chrome и Safari обаче все още изискват -webkit-. Animation е друго страхотно CSS3 свойство, за което с радост ще направя урок и ще го имам в предвид за вбъдеще :)

  4. 4

    ExTrEeMeR - Десислав Антонов
    09 декември 2012 09:44

    Много добър урок, браво! Ще е полезен за доста хора, макар че аз това го знаех, но на други хора, които не го знаят ще е от голяма полза! :)

Твоят коментар

* - задължителни полета