УрокСпособы закругления уголков. 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; }
Таким способом можно сделать абсолютно любые уголки. Я описал самый сложный случай - из него всегда можно сделать попроще. Или если задание будет действительно несложное - сделать одним из более простых способов.
- Spleshka
- 31.08.2010
- 11027
Комментарии
спасибо большое ибо полезно))
пару вопросов: что дает z-index: -1
и почему в #content .t {left: 91%;} ?
z-index: -1 у абсолютного позиционирования располагает фон под текст. Если ты укажешь без него, то фон будет поверх текста. А #content .t исправил, спасибо)
А ради чего париться
Сначала создадим элемент 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.
Все запары исключительно из мира IE и кроссбраузерности :)
спасибо за урок, сэнсэй))
Правильно ли я понимаю, что расширяя div id = "content", мы поступаем не очень хорошо с точки зрения SEO ?
Это почему?
Есть намного намного проще метод......наткнулса на него в инете...всё работает и без всякой графики
Радиус закруглений 12px
Жаль решение-то не катит в IE =) И под старыми FF, Opera тоже не работает
мелкософт от ИЕ6 отказался, а под вистой и ИЕ7 сидят сейчас единицы + те кто поставил себе на ХП ИЕ7...вин7 и ИЕ8+ уже использют большую часть функционала CSS3+.
Сидеть под старыми браузераи - себя не уважать.
так вроде речь идет о кроссбраузерности, а не том, кто с каким софтом сидит!!!
Разве в для этого рисунка z-index прописывать не надо?
Как выяснилось опытным путём - желательно указать всем уголкам z-index: 0, а контентной части z-index: 1
статья писалась на момент когда еще не все браузеры поддерживали CSS3
хотелось бы узнать что Вы думайте насчёт CSS3 PIE, в качестве способа решение проблемы для старых IE?
и еще хотел добавить, я раньше тоже вырезал углы, но в какой то момент понял что толку выразить их мало, достаточно просто в фотошопе нарисовать в квадрате кружок можно сразу с тенью, потом просто использовать background-position, чтобы вывести нужные части картинки в нужных местах, в идеале, все мелкие элементы дизайна лучше хранить в одной картинке. По английски вроде это называется - image sprites, так сайт будет быстрее загрузатся
Комментировать