УрокСпособы закругления уголков. 1 способ.
Закругленные углы - одна из любимейших "фишек" дизайнеров в современном интернете. Есть множество вариантов их реализации, простых и не очень. Например, такой всем известный браузер FireFox поддерживает специфическое решение: -moz-border-radius. Достаточно указать для контейнера его значение 10px - и углы закруглены! Однако полезность данного метода сомнительна, ибо пригоден он только для FF. Просмотрев эту же страницу в другом браузере, например в Opera, мы увидим что никаких закругленных уголков нет.
Ну а теперь перейдём к более кроссбраузерному решению. Оно действительно самое кроссбраузерное, так как используется только картинка для фона и дополнительные контейнеры.
Закругляем углы, используя CSS и 4 картинки
Для начала создайте эти 4 картинки углов, это можно сделать с помощью большинства графических программ, желательно, что бы картинки были квадратными (с одинаковыми размерами сторон, например по 20 пикселей).
Вот пример таких картинок:
Что бы проще было описывать пути к картинкам, лучше назвать их полагаясь на какую-либо логику. К примеру, я назвал свои 4 картинки следующим образом: tl.gif, tr.gif, bl.gif, br.gif.
Это означает: tl - top left, tr - top right, bl - bottom left, br - bottom right. Все кто знаком с английским, я надеюсь, поймёт что к чему.
Теперь, когда мы точно знаем как называются картинки и точно представляем себе задуманное, переходим к написанию каскадной таблицы стилей (CSS). Вот собственно весь код для наших уголков:
div.top-left { background: url("img/tl.gif") no-repeat scroll left top transparent; } div.top-right { background: url("img/tr.gif") no-repeat scroll right transparent; } div.bottom-left { background: url("img/bl.gif") no-repeat scroll bottom left transparent; } div.bottom-right { background: url("img/br.gif") no-repeat scroll right bottom transparent; }
Ничего сложного нет - просто для каждого контейнера указываем фон и его положение. Теперь нам остается лишь правильно воспользоваться им. Для этого необходимо весь контент, который должен находится в закругленном контейнере положить в общий div (в моем примере это div box) и задать ему цвет идентичный цвету уголков. Затем сразу после открытия и до закрытия общего дива положить четыре вложенных друг в друга верхних (top-left и top-right) и соответственно нижних (bottom-left и bottom-right) дива. Вот наглядный пример html кода:
<div class="box"> <div class="top-right"> <div class="top-left"> <div class="bottom-left"> <div class="bottom-right"> <p> Ваш контент здесь. </p> </div> </div> </div> </div </div>
Картинки для этого метода надо вырезать таким способом, чтобы внутри закруглённого угла был цвет контейнера с этими углами, а снаружи - цвет фона.
Плюсы данного метода:
- прост в понимании
- кроссбраузерный (что очень важно!)
Минусы его же:
- много хтмл-кода (минус для seo-продвижения)
- фон вне уголков нельзя сделать прозрачным
Вот и всё, а пользоваться этим методом или нет - решать вам! Я же ещё предложу несколько способов.
- powerscin
- 25.08.2010
- 12572
Комментарии
Спасибо за урок)
маааленькй вопрос: чем в css div.class отличается от простого .class ? более валиден?
Для css разницы нет, но div.class считается более "кошерным" и валидным. И ещё, я где-то читал, что div.class работает немного быстрее чем просто .class, так как тратится меньше времени на поиск этого класса
соответсвенно #id будет div#id?
ага)) а вообще поставь лучше себе плагин firebug, если у тебя firefox. Там всё отлично понятно что и где надо писать. Если не разберёшься - пиши, я сделаю урок в картинках)
firebug стоит. Просто мозилой не люблю пользоваться. Хотя ща вышла 4-я бета версия, может и ниче так будет))
я мозилой пользуюсь исключительно из-за фаербага. Нереально классная и мощная штука, без неё как без рук. Особенно когда начинал - если б не она, то вообще не разобрался бы
ага, файербаг как-то удобнее и понятнее его аналога в Опере - "проинспектировать элемент".
А вот по поводу уголков - у меня сайт со стилями в цсс. Последние оперы уже понимают круглые углы. Вот мои цсс:
.block {
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
Не помню как ИЕ это все понимает.
А открой в IE 7 ;)
ИЕ7 как и все винду - в административный отпуск :)
Жаль не все виндоюзеры это понимают
Жээсть..
мой совет не пользоваться этим способом
кстати нафига резать 4 картинки, когда можно взять картинку круга и выводить в цсс нужную её четверть с помощью координат
Добрый день! Я дизайнер и верстальщик и честно говоря не понимаю вот такого способа, так как зная нормально css и используя все его возможности очень быстро можно вывести скругление углов. И круглые они во всех браузерах. Описанный в уроке способ просто один из нормальных существующих способов. Но мы в веб-студии используем его только тогда, когда углы не просто скругленные, а с какими-то наворотами. А круглые углы запросто делаются в css, просто надо правильно все прописать.
Каким образом, если не секрет? border-radius, -moz-border-radius ?
Всем привет!
Сайт классный, Статьи - бомба! Просто мозг разрываюм. Респект всем, кто задействован.
По поводу фона вне уголков: его можно сделать прозрачным используя не *.gif, а *.png файлы. они поддерживают прозрачный фон.
Дело не в прозрачности фона, вы посмотрите на картинки, а потом внимательно на css-код и увидите, что если использовать прозрачность в уголках то получаться не скругленые уголки,а что то вроде этого:
Скрин
да простит меня Женя за палево на его сайте)
Да и *.gif тоже, если готовите графику в фотошопе, при сохранении для Web устройств, включите прозрачность.
Комментировать