Только проверенные методы заработка в сети

Скругление углов. Элементы оформления сайта

Здравствуйте уважаемые читатели моего блога. Открываю первый пост посвященный созданию элементов оформления сайта.
И сегодня я расскажу Вам какими методами, с помощью css, можно выполнить скругление углов элементов Вашего сайта. Покажу какой способ скругления я использовал раньше и насколько проще это можно сделать теперь. А также Вы узнаете как задать нужный радиус скругления…

Итак, приступим! Вы наверное уже видели на моем блоге как я оформляю различные части контента такие как схемы или же алгоритмы действий. Для выделения их в рамку я как раз и использую один из способов скругления. До недавнего времени я использовал скргуление с помощью div блоков, но так как браузеры постоянно совершенствуются и все больше и больше соответствуют стандартам W3C, в настоящее время скругление можно выполнить гораздо проще…

Способы скругления углов блочных элементов сайта:

1# С помощью картинок - Вставляем в блок div 4 картинки по углам, Либо две сверху и снизу в виде шапки, где уже выполнено скругление.
2# С помощью блоков div и пощаговой аппроксимации радиуса - имитация скругления (скругление без картинок) css-div округлые углы. Скругление на уровне стилей...
3# W3C CSS3 и свойство border-radius. Благодаря различным вендорным свойствам от производителей браузеров и плагина PIE (для Internet Explorer) - стало возможно скруглять углы на уровне браузера, путем задания соответствующих стилей блоку div и указания радиуса скругления.

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

1# – Скругление с помощью картинок.
Как я уже писал раньше здесь возможно два варианта:
- Формирование скругления с помощью разбивки на три горизонтальных рисунка – верхней и нижней части (top, botton) и толщиной в пиксель центральной картинки, которая повторяется методом repeat при увеличении объема контента в форме.
окрглые углы при помощи 3х картинок
- Формирование скругления с помощью разбивки окружности нужного радиуса на четыре части, каждая из которых с помощью css помещается в свой угол.

окрглые углы при помощи 4х картинок

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

Просмотреть примеры Скачать код примеров

2# – Скругление без картинок с помощью div и css.

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

Рассмотрим более подробно пример блока со скруглением в 5px
Файл стилей css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
.bform {
background: transparent; 
width:485px; 
float:left; 
margin:3px 3px;
font-size:14px;
}
.bform h1 {
margin:0; 
font-size:14px;
text-align:center;
padding:0 10px 5px 10px; 
border-bottom:1px solid #444;
}
.bform h2 {
margin:5px 0; 
font-size:14px;
padding:0 10px 5px 10px;
}
.bform p {
margin:0; 
padding:2px 5px; 
}
 
.formtop, .formbottom {
margin:0; 
display:block; 
background:transparent; 
font-size:1px;
}
.hp1, .hp2, .hp3, .hp4 {
display:block; 
overflow:hidden;
}
.hp1, .hp2, .hp3 {
height:1px;
}
.hp2, .hp3, .hp4 {
background:#fff; 
border-left:1px solid #444;
border-right:1px solid #444;
}
/*прописываем для каждой полосы b, которые формируют радиус, отступы*/
.hp1 {
margin:0 5px; 
background:#444;
}
.hp2 {
margin:0 3px;
border-width:0 2px;
}
.hp3 {
margin:0 2px;
}
.hp4 {
height:2px; 
margin:0 1px;
}
.textform {
margin:0;
display:block; 
border:0 solid #444; 
border-width:0 1px; 
height:auto;
}
 
* html .textform {
height:1px;
}
/* дополнительные классы для оформления шапок формы*/
.hfirst {
background:#d0d9ea; 
color:#000;
}
.hsecond {
background:#eaeff9; 
color:#000;
}
.hsxem {
background:#d0ead8; 
color:#000;
}

Итак, шапка формируется из попиксельных полос, каждая последующая полоса b-стиля увеличивается на необходимое число пикселей.

Для создания скругления в 5px необходимо описать 4 полосы:

1пол. делаем отступы по 5px слева и справа с помощью margin и прописываем высоту в 1px - так: {margin:0 5px; height:1px;}
2пол. - отступы в 3px - {margin:0 3px; height:1px;}
3пол. - отступы в 2px - {margin:0 2px; height:1px;}
4пол. - отступы в 1px и высота в 2px - {margin:0 1px; height:2px;}

html код блока:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Пример кода скругленного div-а радиусом 5px</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="bform"><b class="formtop"><b class="hp1"> </b><b class="hp2 hfirst">
</b><b class="hp3 hfirst"> </b><b class="hp4 hfirst"> </b></b>
<div class="textform">
<h1 class="hfirst">Заголовок</h1>
<p>
Необходимый текст
</p>
</div>
<b class="formbottom"><b class="hp4"> </b><b class="hp3"></b>
<b class="hp2"> </b><b class="hp1"> </b></b>
</div>
</body>
</html>
Просмотреть примеры Скачать код примеров

3# Скругление с помощью свойства border-radius описанного в CSS3, но лишь с недавнего времени более или менее внедренного в браузера, с помощью различных вендорных префиксов для каждого браузера. Подробнее об этом свойстве можно узнать на сайте: HtmlBook.ru – Скруглённые уголки
Для ранних версий браузера IE проблема скругления решается подгрузкой через css плагина PIE.htc (behavior: url(PIE.htc);)

Зная особенности каждого браузера, создадим кроссбраузерный класс в css:

1
2
3
4
5
6
7
8
9
10
11
.roundCSS {
	width:803px; //указываем необходмую ширину блока
	font-weight:bold; 
	background:#fff;
	border: 2px solid #ccc; //рамка блока
	border-radius: 10px; //радиус скругления - из стандарта CSS3
	-moz-border-radius: 10px; //вендорное свойство для радиуса в mozilla firefox
	-webkit-border-radius: 10px;
	-khtml-border-radius: 10px; //вендорные свойства скругления для браузеров на движках webkit и khtml
	behavior: url(PIE.htc); //и наконец подгружаем плагин позволяющий скруглить углы через border-radius в Internet Explorer, в данном случае сам плагин находится в корне сайта.
}
Просмотреть примеры Скачать код примеров

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

P.S.>>
Буду рад если вы поделитесь в комментариях: Какой метод скругления используете Вы и почему?

Вам понравился этот пост? Примите участие в развитии сайта - поделись качественной информацией со своими друзьями в социальных сетях.

ВК комментарии

Комментарии на статью: “Три метода скругления углов у элементов сайта”

  1. Никита В. Мастер

    26 июля 2011

    Здравствуйте, всё очень хорошо, но рекомндую все пользоваться 1 способом.

    Почему ?

    Не в каждом браузере отображается корректно.
    Например, в IE эта закачка вообще не идёт. (может яне правильно делаю ? )

    [Ответить]

  2. admin

    1 сентября 2011

    В принципе в 6 версии IE все работает – проверено! Возьмите исходный код примеров – залейте все содержимое папки src на свой Хостинг – И убедитесь что плагин PIE.htc в IE 6, отлично скругляет углы.

    [Ответить]

Комментарий RSS · Обратная ссылка URI

Оставить комментарий

Имя: (обязательно)

E-mail: (обязателен - не публикуется)

Сайт:

Комментарии:

*