Закругляем углы, используя CSS, JavaScript
Уже не новая, но до сих пор не прошедшая мода на закругление углов в web дизайне, сподвигнула меня написать данную статейку. До сих пор не все знают, как это делается и тем более не каждый знает, что способов закруглить углы как минимум три:
1. C помощью CSS и нескольких картинок
2. Только с помощью CSS (без использования графики)
3. С помощью CSS и JavaScript (без использования графики)
Ну а теперь за дело, начнем по порядку:
1. Закругляем углы, используя CSS и 4 картинки
Для начала создайте эти 4 картинки углов, это можно сделать с помощью большинства графических программ, желательно, что бы картинки были квадратными (с одинаковыми размерами сторон, например по 15 пикселей).
Пример картинок:
Что бы проще было описывать пути к картинкам, лучше назвать их, полагаясь на какую либо логику, к примеру, я назвал свои 4 картинки следующим образом: ctl.gif, ctr.gif, cbl.gif, cbr.gif.
Лично для меня тут все понятно: ctl = corner top left; cbr= corner bottom right и так далее. Если вам удобней обзывать картинки как-то иначе, то вперед!
Теперь, когда мы точно знаем как называются картинки и точно представляем себе задуманное, переходим к написанию каскадной таблицы стилей (CSS). Вот собственно весь код для наших уголков:
| Код: |
| div.top-left { background-image: url(’img/ctl.gif’); background-repeat: no-repeat; background-position: top left; height: 15px; } div.top-right { background-image: url(’img/ctr.gif’); background-repeat: no-repeat; background-position: top right; height: 15px; } div.bottom-left { background-image: url(’img/cbl.gif’); background-repeat: no-repeat; background-position: bottom left; height: 15px; } div.bottom-right { background-image: url(’img/cbr.gif’); background-repeat: no-repeat; background-position: bottom right; height: 15px; } |
Код, думаю, понятен и логичен. Теперь нам остается лишь правильно воспользоваться им. Для этого необходимо весь контент, который должен находится в закругленной «коробочке» положить в общий div (в моем примере это div box) и задать ему цвет идентичный цвету уголков. Затем сразу после открытия и до закрытия общего дива положить два вложенных друг в друга верхних (top-left и top-right) и соответственно нижних (bottom-left и bottom-right) дива. Вот наглядный пример html кода:
| Код: |
| <div class=”box”><!–Открываем общий див–> <div class=”top-left”><div class=”top-right”></div></div><!–Два вложенных друг в друга верхних дива–> <p>Ваш контент здесь. Ваш контент здесь. Ваш контент здесь. Ваш контент здесь. Ваш контент здесь. Ваш контент здесь. Ваш контент здесь. Ваш контент здесь. Ваш контент здесь. Ваш контент здесь.</p> <div class=”bottom-left”><div class=”bottom-right”></div></div><!–Два вложенных друг в друга нижних дива–> </div><!–Закрываем общий див–> |
С этим вариантом закругления краев покончено.
Рабочий пример смотрите здесь.
2. Закругляем углы, используя только CSS (ни какой графики)
Я бы назвал данный способ линейным, так как его основная идея заключается в создании нескольких окрашенных линий, для создания эффекта закругленности. Вот html код для получения закругленного дива:
| Код: |
| <div id=”container”> <b class=”rtop”> <b class=”r1″></b> <b class=”r2″></b> <b class=”r3″></b> <b class=”r4″></b> </b> <!–content goes here –> <b class=”rbottom”> <b class=”r4″></b> <b class=”r3″></b> <b class=”r2″></b> <b class=”r1″></b> </b> </div> |
И вот основной код CSS
| Код: |
| .rtop, .rbottom{display:block} .rtop *, .rbottom *{display: block; height: 1px; overflow: hidden} .r1{margin: 0 5px} .r2{margin: 0 3px} .r3{margin: 0 2px} .r4{margin: 0 1px; height: 2px} |
Здесь вы сможете найти наглядный пример.
Несколько слов об использовании тега <b> в данном случае. Нам был необходим линейный элемент, для получения закругленных углов, а так как данный тег самый короткий в написании, я выбрал именно его. Один из минусов данного метода состоит в том, что все эти теги получаются пустыми, соответственно html код получается не валидированным по стандарту W3C.
3. Закругление углов, используя CSS и JavaScript
На примере выше, мы убедились в том, что углы можно закруглить и, не используя картинок, наш код вместе со стилями и текстом не превышает 3-х килобайт, что совсем немного! Но мы должны уважать web стандарты и хранить наш код в полном порядке!
Наш следующий метод состоит в том, что бы заменить ненужный элемент <b> Java скриптом и объектной моделью документов (DOM), чтобы придавать закругленные углы, почти любому элементу на странице, без добавления лишнего или не корректного html и CSS кода. Вот собственно и наглядный пример такого варианта закругления. Если вы смотрели код страницы, то, наверняка, заметили отсутствие лишнего либо некорректного html кода. Весь фокус это комбинация CSS и Javascript. Техника состоит из 4-х основных частей:
1. CSS файл для экрана
2. CSS файл для распечатки
3. Библиотека Javascript для получения уголков
4. Javascript вызывающийся для округления нужных элементов
Первые три компонента менять не стоит редактировать вне зависимости от того, чего вы хотите достигнуть. Их нужно лишь объявить теге <head>, используя следующий код:
| Код: |
| <link rel=”stylesheet” type=”text/css” href=”niftyCorners.css”> <link rel=”stylesheet” type=”text/css” href=”niftyPrint.css” media=”print”> <script type=”text/javascript” src=”nifty.js”></script> |
Ну а что бы скруглять нужные вам элементы (h1, p, div и так далее) и задавать необходимые цвета для уголков, вам нужно вставить следующий JvavaScript, непосредственно в код страницы, где происходит округление углов (смотрите наглядный пример):
| Код: |
| <script type=”text/javascript”> window.onload=function(){ if(!NiftyCheck()) return; Rounded(”div#nifty”,”#377CB1″,”#9BD1FA”); } |
И уже здесь менять три параметра:
“div#nifty” элемент, у которого необходимо скруглить углы
“#377CB1″ внешний цвет уголка
“#9BD1FA” внутренний цвет угла
Так же можно задать 4-й параметр: “small“, он не обязательный и делает ваши уголки еще меньше в размере.
Если вы хотите скруглить более чем один элемент, то делайте это так:
| Код: |
| Rounded(”h1″,”#fff”,”#9DD4FF”); Rounded(”div#nifty”,”#fff”,”#E5FFC4″); |
Этот способ самый «навороченный», но на самом деле самый простой, когда поймешь, как он работает.
Источник: http://www.phpground.ru/forum/post-46.html
Апрель 5, 2007 в 9:23 пп
o4en pomoglo:D:D:D
Июнь 27, 2007 в 2:03 пп
Кстати, валидатор w3c нормально относится к коду, в котором закругленные уголки реализуются только с помощью css без графики. Просто мета-тег с указанием charset нужно поместить перед титулом, поскольку титул на русском языке
Сентябрь 9, 2008 в 3:49 пп
по третьему способу не могу понять, если я пытаюсь получить закругленные уголки у второго div то ничего не получается….как быть?
т.е. мне нужно два закругленных блока, а во втором случае ничего не получается как бы я не пробовал