SdelaemBlog

Создание Сайтов и их настройка

Закругленные углы используя CSS.

Главная Статьи HTML & CSS Закругленные углы используя CSS.
#HTML & CSS

13 ноября 2013

Приветствую, Друзья. Данная статья посвящена  довольно популярной теме среди начинающих вебмастеров — закругленные углы CSS. Вопросы, которые я попытаюсь, раскрыть будут касаться того, как сделать скругленные углы элементов сайта, используя только CSS не прибегая к использованию каких-либо изображений.

Закругленные углы используя CSS.

В данном способе есть, как плюсы, так и минусы. Плюсы, конечно же, заключаются в том, что нет необходимости создавать изображения, используя какой-либо графический редактор, загружать их на сервер, а потом расставлять с помощью CSS на необходимые места для создания нужного эффекта. При этом необходимо создавать дополнительные элементы в HTML-коде, а также прописывать отдельные свойства для каждого из них.

Что касается минусов, то здесь можно отметить одну проблему — это поддержка данного свойства не всеми веб-браузерами, особенно это касается устаревших версий различных браузеров.

Однако закругление углов с помощью CSS становится все популярнее и популярнее. Как Вы уже могли понять, в данной статье мы будем использовать свойство доступное в CSS 3.

Скругленные углы с помощью CSS.

Итак, для примера мы возьмем блочный элемент DIV и сделаем его углы скругленными. Для примера создадим блок, и прямо в HTML-коде будем назначать ему свойства, используя атрибут style. Сначала мы имеем блочный элемент залитый фоном любого цвета:

<div style="width:100px; height:80px; background:#0a63b1;"></div>

Кстати, если Вам необходимо узнать какой код цвета у Вас на сайте или на любом другом, Вам пригодится данная статья.

А вот так мы увидим его в веб-браузере:

Теперь, чтобы закруглить углы воспользуемся свойством «border-radius», которое можно перевести, как радиус границы. Да именно так, а не как многие могли подумать, что это радиус рамки или как там его еще называют (border). Данное свойство отвечает именно за радиус границ элемента, а не за его рамки или бордюры, которых может и не быть. Однако, свойство будет по-прежнему работать и без использования border у элемента. Надеюсь, вы поняли, что я хотел сказать. Значением для данного свойства являются любые числовые значения, которые применимы в CSS, такие как проценты, пикселы (px), пункты (pt) и так далее. Да, и следует учитывать, что данное свойство работает сразу на все четыре угла элемента, кроме того, можно указать разный радиус для каждого угла, но об этом чуть позже. Для начала зададим радиус углов нашего прямоугольника. Пусть он будет равен 5 пикселам:

<div style="width:100px; height:80px; background:#0a63b1; border-radius:5px;"></div>

Тогда элемент станет выглядеть так:

Теперь, предлагаю разобраться в том, как добавить свой радиус для каждого угла в отдельности. Для этого мы можем воспользоваться свойством, которое можно применить для каждого угла в отдельности. Если говорить о прошлом примере, то в полном виде свойства для элемента выглядели бы так:

border-top-left-radius:5px; /* верхний левый угол */
 border-top-right-radius:5px; /* верхний правый угол */
 border-bottom-right-radius:5px; /* нижний правый угол */
 border-bottom-left-radius:5px; /* нижний левый угол */

То есть, если мы хотим задать каждому углу свое значение, мы имеем такую возможность, и чтобы убедиться в этом возьмем следующий код:

<div style="width:100px; height:80px; background:#0a63b1; border-top-left-radius:5px; border-top-right-radius:10px; border-bottom-right-radius:15px; border-bottom-left-radius:20px; "></div>

И тогда мы получим такой результат:

Как мы можем видеть, для границы каждого угла задано свое значение радиуса.
Кроме того CSS позволяет нам задать значение для границы каждого угла в виде короткой записи, которая будет выглядеть так:

<div style="width:100px; height:80px; background:#0a63b1; border-radius: 5px 10px 15px 20px; "></div>

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

border-radius: 5px /* верхний левый угол */ 10px /* верхний правый угол */ 15px /* нижний правый угол */ 20px /* нижний левый угол */;

Соответственно, исходя из выше сказанного, становится понятно, что таким же образом мы можем задать границу радиуса только для трех (одного или двух) углов:

<div style="width:100px; height:80px; background:#0a63b1; border-radius: 5px 0px 15px 20px; "></div>

Так это выглядит в веб-браузере:

Если Вы еще не совсем запутались, то продолжим. Дело в том, что радиус для каждой границы угла может быть указан не в одном значении, как мы рассматривали выше, а в двух. То есть два значения для каждого угла. В таком случае первое значение установит радиус для угла по горизонтали, а второе по вертикали. Давайте начнем сначала с одного угла:

<div style="width:100px; height:80px; background:#0a63b1; border-top-left-radius:5px 50px;"></div>

В данном примере мы воздействовали только на левый верхний угол элемента:

Если расставить значения наоборот, тогда элемент станет выглядеть так:

На этом вроде бы можно было бы, и закончить, но нет. Есть еще одна хитрость. В значении свойства мы можем использовать слеш (/) между значениями. Слеш может помочь нам совместить значения с другими значениями. В общем проще показать, чем рассказать. Начнем с простого. Предположим, что нам необходимо, чтобы по горизонтали радиус был равен 35 пикселам, а по вертикали 5. При этом, чтобы данные значения относились ко всем углам. Тогда мы можем написать так:

<div style="width:100px; height:80px; background:#0a63b1; border-radius: 35px / 5px; "></div>

И получить вот такой результат:

Теперь рассмотрим пример посложнее:

<div style="width:100px; height:80px; background:#0a63b1; border-radius: 20px 10px 40px / 15px 25px; "></div>

В данном случае значение до знака слеша (/) будет иметь отношение к горизонтальному радиусу угла, а после знака к вертикальному. При этом значения будут относиться друг к другу таким образом:

border-top-left-radius: 20px 15px;
 border-top-right-radius: 10px 25px;
 border-bottom-right-radius: 40px 15px;
 border-bottom-left-radius: 10px 25px;

А результат будет таким:

И в завершении статьи поговорим о поддержке различными браузерами данного свойства.

Закругление углов в различных веб-браузерах.

Здесь стоит отметить, что данное свойство поддерживается не всеми версиями браузеров. Свойство поддерживается в IE9 +, Firefox 4 +, Chrome, Safari 5 +, и Опера.
Но для некоторых браузеров версии, которых не поддерживают данное свойство, существуют нестандартные свойства, которые добавляют, так называемый префикс или приставку к свойству.
Chrome до версии 4.0, Safari до версии 5.0, iOS используют нестандартное свойство -webkit-border-bottom-left-radius.
Firefox до версии 4.0 использует нестандартное свойство -moz-border-radius-bottomleft.
При этом нам придется продублировать свойство, используя данные префиксы. Например, если у нас задано свойство для границы левого верхнего угла значение, которого равно пяти пикселам:

border-top-left-radius: 5px;

Тогда свойство с дублированием его с помощью префиксов будет выглядеть так:

-webkit-border-bottom-left-radius:5px;
 -moz-border-radius-bottomleft:5px;
 border-top-left-radius: 5px;

Очень надеюсь, что смог понятно все объяснить и Вам теперь понятно, как сделать закругленные углы, используя только CSS.
Удачи, Вам!

Оставьте свой коммент
ДОСТАВКА СТАТЕЙ ПОЧТОЙ, на дом

Ознакомьтесь с условиями хранения ваших данных

Комментарии

  1. Михаил Веб

    @ maks:
    Извиняюсь, но не понял глубокого смысла данного высказывания, в отношении данной статьи, или комментариев.

    4 года назад29.11.2013 Ответить
  2. Михаил Веб

    @ Влад:
    :mrgreen: Ну это слишком жестоко, наверное. Ибо, как раз какой-то процент тех, кто не обновляется боятся, как раз вирусов. Так сейчас куча всякой рекламы с вирусами, в том числе и которая, предлагает, якобы, обновить браузер. А остальные, видимо просто не в «теме», так сказать. Но, это всего лишь мое сугубо личное мнение. :-)

    4 года назад27.11.2013 Ответить
  3. Влад

    @ Михаил Веб:
    Лучше вирус, который бы все версии IE до 9.0 скосил бы

    4 года назад26.11.2013 Ответить
  4. Михаил Веб

    @ Влад:
    :mrgreen:
    Это как: Обновления? :shock: Не, не слышал :roll:
    Глянул, тоже есть посетители с такими версиями, но их совсем мало, но… В общем, я не понимаю, в чем тут юмор…
    Может пост накатать, как это делается :!: :mrgreen:

    4 года назад26.11.2013 Ответить
  5. Влад

    IE 7 :)
    Я не когда не смогу понять, кто их использует…
    По своей статистике могу сказать что я даже имею 0,5-2% посещений с IE 4,01 и IE 5, а это не мало. Люди не хотят блин техническими новинками пользоваться.

    4 года назад25.11.2013 Ответить
  6. Михаил Веб

    @ Александр Алексеенко:
    Спасибо за хорошую новость :-) Вот только читателей еще нужно заставить обновить браузеры до последних версий :-) До сих пор в статистике можно увидеть, как заходят, например, используя ie7 :?:

    4 года назад21.11.2013 Ответить
  7. Александр Алексеенко

    Хороший пример, закругленные углы использую давно, буквально вчера один человек (вестальщик) мне сказал, что коды дублирования более не нужны. Только для старых версий броузеров, которые все обновляются. Т.е. старым броузер может оставить только опытный пользователь для своих нужд. А во всех новых версиях свойство border-radius уже работает.

    4 года назад18.11.2013 Ответить

Чтобы оставить комментарий, заполните, пожалуйста форму ниже:

Смайлы

Нажимая на кнопку "Комментировать" Вы согласшаетесь с условиями политики конфиденциальности

Обязательно для Заполнения!

Обязательно для Заполнения!

Проверка комментариев включена. Прежде чем Ваши комментарии будут опубликованы пройдет какое-то время.

Отправить жалобу разработчику сайта

Если у Вас возникли проблемы, не стесняйтесь отправлять жалобу, она обязательно будет учтена и все будет исправлено.

[contact-form-7 404 "Not Found"]

Спасибо большое за поддержку проекта! :)

Для поддержки проекта, выберите убодный способ для оплаты: