УрокСпособы закругления уголков. 3 способ

Самый мощный способ загруглять уголки - этот. По крайней мере, на мой взгляд. Можно было бы использовать какие-нибудь скрипты, но если будет отключена поддержка скриптов в браузере (а это процентов 10-15 пользователей), то все ваши углолки окажутся абсолютно не закруглёнными. Поэтому будем работать исключительно с css, который поддерживают все браузеры.

Суть этого метода основывается на кроссбраузерной "тяжёлой артилерии" - position: absolute. Теперь объясняю более подробно:

Сначала нам надо создать контейнер, в который мы поместим контент. Пока всё просто - div с id = "content", а в нём выводим содержимое:

HTML

<div id = "content">
   <?php echo $content; ?>
</div>

CSS

#content {
    position: relative; /* обязательно надо прописать */
}

Представим, что у нас самый сложный случай - нам надо на неповторяющемся фоне сделать блок с закруглёнными уголками, которые ещё и с тенью. Кошмар для верстальщиков :) В общем сначала нарезаем 8 картинок с макета блока: 4 уголка и 4 полоски с тенью (левая, правая, верхняя и нижняя).

Теперь развиваем наш html до следующего: 

<div id = "content">
  <div class = "br"></div>
  <div class = "bl"></div>
  <div class = "tr"></div>
  <div class = "tl"></div>
  <div class = "t"></div>
  <div class = "b"></div>
  <div class = "l"></div>
  <div class = "r"></div>
  <?php echo $content; ?>
</div>

Если кого-то вдруг смущают сокращения типа "tl" то я лучше их сразу расшифрую, так как вы будете их нередко встречать:

  • tl - top left
  • bl - bottom left
  • br - bottom right
  • tr - top right
  • l - left
  • t - top
  • r - right
  • b - bottom

В общем, хтмл прокачали. Теперь цсс:

#content .br {
    background: url(images/br.png) no-repeat; /* наш уголок. фон без повторений */
    position: absolute; /* абсолютное позиционирование делает наш уголок неуязвимым ;) */
    width: 10px; /* ширина картинки */
    height: 10px; /* высота картинки */
    right: 0; /* расположение: справа.. */
    bottom: 0; /* .. и снизу */
    z-index: -1; /* тоже не забудьте, а то картинки будут поверх контента */
}
 
#content .bl {
    background: url(images/bl.png) no-repeat;
    position: absolute;
    width: 10px;
    height: 10px;
    left: 0;
    bottom: 0;
    z-index: -1;
}
 
#content .tl {
    background: url(images/tl.png) no-repeat;
    position: absolute;
    width: 10px;
    height: 10px;
    left: 0;
    top: 0;
    z-index: -1;
}
 
#content .tr {
    background: url(images/tr.png) no-repeat;
    position: absolute;
    width: 10px;
    height: 10px;
    right: 0;
    top: 0;
    z-index: -1;
}
 
#content .t {
    background: url(images/top.png) repeat-x; /* обратите внимание: тут уже повторения фона */
    position: absolute;
    height: 10px;
    right: 10px;
    left: 10px;
    top: 0;
}
 
#content .b {
    background: url(images/bottom.png) repeat-x;
    position: absolute;
    height: 10px;
    right: 10px;
    left: 10px;
    bottom: 0;
    z-index: -1;
}
 
#content .l {
    background: url(images/left.png) repeat-y;
    position: absolute;
    width: 10px;
    left: 0;
    bottom: 10px;
    top: 10px;
    z-index: -1;
}
 
#content .r {
    background: url(images/right.png) repeat-y;
    position: absolute;
    width: 10px;
    right    : 0;
    bottom: 10px;
    top: 10px;
    z-index: -1;
}

Вот и всё, контейнер округлён как надо. Если блок с закруглёнными уголками имеет другой цвет фона (а обычно так и есть) - надо добавить ещё один класс к тем восьми. Назовём его, например, bg. А цсс у него будет такой:

#content .bg {
    background: #цвет;
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    top: 10px;
    z-index: -1;
}

Таким способом можно сделать абсолютно любые уголки. Я описал самый сложный случай - из него всегда можно сделать попроще. Или если задание будет действительно несложное - сделать одним из более простых способов.

Способы закругления уголков. 2 способ.
Меню с анимацией
Навигация

Похожие материалы

Комментарии

Аватар пользователя D.Choomc
D.Choomc написал:

спасибо большое ибо полезно))
пару вопросов: что дает z-index: -1
и почему в #content .t {left: 91%;} ?

31.08.2010 12:02
Аватар пользователя Spleshka
Spleshka написал:

z-index: -1 у абсолютного позиционирования располагает фон под текст. Если ты укажешь без него, то фон будет поверх текста. А #content .t исправил, спасибо)

31.08.2010 12:41
Аватар пользователя Вебмпир
Вебмпир написал:

А ради чего париться
Сначала создадим элемент div 1

Пропишем стили:

#test{ background:#F00; width:100px; height:100px }
Наш квадрат готов.
Теперь зададим свойства закругления.
Для этого используем команду: border-radius
#test{ Width:100px; Height:100px; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:5px; -khtml-border-radius:10px; }
Смотрим результат и радуемся.
Теперь немного разберем код:
border-radius:6px — Свойство CSS3. Чем больше значение в пикселях, тем сильнее скруглённые углы;
-webkit-border-radius:6px — Хак для включения поддержки закругления в браузерах на основе webkit (Google Chrome и Safari). Но стоит заметить, в последних версиях браузеров Chrome и Safari для поддержки border-radius не нужны никакие хаки.
-moz-border-radius:5px — Хак для включения поддержки закругления в браузере Firefox. Без него будет просто квадрат;
-khtml-border-radius:10px — Хак для включения поддержки закругления в браузере Konquerer. Это из мира Linux.

27.10.2011 15:52
Аватар пользователя Spleshka
Spleshka написал:

Все запары исключительно из мира IE и кроссбраузерности :)

27.10.2011 16:31
Аватар пользователя D.Choomc
D.Choomc написал:

спасибо за урок, сэнсэй))

01.09.2010 11:33
Аватар пользователя Тайный поклонник
Тайный поклонник написал:

Правильно ли я понимаю, что расширяя div id = "content", мы поступаем не очень хорошо с точки зрения SEO ?

12.04.2011 18:31
Аватар пользователя Spleshka
Spleshka написал:

Это почему?

13.04.2011 14:28
Аватар пользователя Тайный поклонник
Тайный поклонник написал:

Есть намного намного проще метод......наткнулса на него в инете...всё работает и без всякой графики

.r12 {width:300px; height:100px; margin:15px; padding:20px; text-align:center; background-color:#FFC; border:5px #00C solid; 
 border-radius:12px;
 -moz-border-radius:12px;
 -khtml-border-radius:12px;
 -webkit-border-radius:12px;
 }

Радиус закруглений 12px

08.07.2011 19:25
Аватар пользователя Spleshka
Spleshka написал:

Жаль решение-то не катит в IE =) И под старыми FF, Opera тоже не работает

16.07.2011 17:22
Аватар пользователя SergiK_KilleR
SergiK_KilleR написал:

мелкософт от ИЕ6 отказался, а под вистой и ИЕ7 сидят сейчас единицы + те кто поставил себе на ХП ИЕ7...вин7 и ИЕ8+ уже использют большую часть функционала CSS3+.
Сидеть под старыми браузераи - себя не уважать.

27.11.2011 03:42
Аватар пользователя dotter90
dotter90 написал:

так вроде речь идет о кроссбраузерности, а не том, кто с каким софтом сидит!!!

09.03.2012 14:42
Аватар пользователя dotter90
dotter90 написал:

Разве в для этого рисунка z-index прописывать не надо?

#content .t {
    background: url(images/top.png) repeat-x; /* обратите внимание: тут уже повторения фона */
    position: absolute;
    height: 10px;
    right: 10px;
    left: 10px;
    top: 0;
}
09.03.2012 14:40
Аватар пользователя Spleshka
Spleshka написал:

Как выяснилось опытным путём - желательно указать всем уголкам z-index: 0, а контентной части z-index: 1

11.03.2012 23:59
Аватар пользователя nabusi
nabusi написал:

статья писалась на момент когда еще не все браузеры поддерживали CSS3
хотелось бы узнать что Вы думайте насчёт CSS3 PIE, в качестве способа решение проблемы для старых IE?

23.06.2012 13:49
Аватар пользователя nabusi
nabusi написал:

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

23.06.2012 14:01

Комментировать