При разработке сайта часто сталкиваешься с задачей закругления углов элементов страницы. Часто верстальщик ищет решение в интернете, перечитывая множество статей по этому поводу. В таких случаях имеем несколько секунд работы дизайнера и полный ступор с головной болью у верстальщика. В интернете имеется несколько готовых (с большим объемом кода) решений для реализации такой задачи, но хотелось бы облегчить труды верстальщика и найти простое, универсальное решение, которое было бы кроссбраузерным и многофункциональным в плане оформления углов и написания кода.
Итак, приступим непосредственно к обзору нескольких (на мое мнение распространенных) методов закругления углов.
1 - использование нестандартных свойств CSS, таких как:
-webkit-border-radius, -moz-border-radius, -khtml-border-radius, border-radius
Для всенародного любимчика верстальщиков IE используется PIE (pie.htc).
Так называемый "костыль" PIE предназначен для поддержки некоторых свойств CSS3.
Для кроссбраузерного закругления углов элементов страницы радиусом в 5 пикселей используется такая комбинация кода:
border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; behavior: url(PIE.htc);
Также значения можно записывать и для каждого угла отдельно. К примеру:
border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; -khtml-border-radius:0 0 5px 5px; behavior: url(PIE.htc);
Еще одна особенность метода заключается в том, что допустимо написание двух значений через слеш (/), в этом случае первое значение задает радиус по горизонтали, а второе по вертикали.
Если заданы два значения через слэш, то первый задает радиус по горизонтали, а второй по вертикали (так называемые «эллиптические уголки»).
Разница между обычным скругленным уголком и эллиптическим уголком
Данное свойство применяется ко всем элементам, за исключением таблиц с border-collapse: collapse.
В качестве значений можно записывать числа в любом CSS формате. В случае применения процентов, отсчет ведется относительно ширины блока.
Этот метод я использовал довольно часто и долго до той поры как не ознакомился с еще одним более усовершенствованным медотом.
2 - использование плагина Jquery Corner
Перейдя на сайт, сразу поражает количество параметров для не только закругления, а я бы сказал, оформления границ элементов на сайте. Для использования плагина нужно подключить библиотеку Jquery и собственно сам плагин JqueryCorner. После этого вам открывается множество возможностей для оформления границ элементов веб-страниц.
Приведу пример гибкого использования этого плагина.
1 - подключаем библиотеку Jquery (можно обращаться к онлайн версии, а можно и подключить файл находящийся на сервере, предварительно скачав свежую версию на сайте разработчиков.)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script>
2 - подключаем сам плагин
<script type="text/javascript" src="href="/jquery.corner.js"> </script>
3 - вызываем плагин, прописывая или отдельный элемент со свойствами оформления, или общий класс, который будет присвоен элементу для оформления
<script type="text/javascript">
$(function(){
$("img.testcorner").corner("10px");
});
</script>Это приведет к закруглению углов у изображения с классом testcorner радиусом в 10пикселей
<script type="text/javascript">
$(function(){
$(".corner").corner();
});
</script>Это более универсальный способ инициализации плагина. Гибкость такого способа заключается в том, что параметры оформления границ уже прописываются непосредственно в верстке.
Пример. Мне необходимо скруглить углы в блоке радиусов в 5 пикселей.
Вот так все просто. Задавая класс для элемента на странице (в нашем примере класс corner) и используя атрибут data-corner, можно с легкостью задать красивое оформление блоку на сайте.
Единственным неудобством (для неопытных верстальщиков) является то, что данный метод использует библиотеку Jquery с подключаемым скриптом, но это не есть недостатком, так как современные сайты обязательно содержат подключенные скрипты.
Совет: для любой работы разработчика важна правильная настройка доступа в интернет именно поэтому рекомендуем прежде чем брать заказ в разработку проверить подключение, предусмотреть вопросы безопасности и продумать что делать в случае отключения света.