УрокСпособы закругления уголков. 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-продвижения)
  • фон вне уголков нельзя сделать прозрачным

Вот и всё, а пользоваться этим методом или нет - решать вам! Я же ещё предложу несколько способов.

Комментарии

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

Спасибо за урок)
маааленькй вопрос: чем в css div.class отличается от простого .class ? более валиден?

25.08.2010 10:41
Аватар пользователя Spleshka
Spleshka написал:

Для css разницы нет, но div.class считается более "кошерным" и валидным. И ещё, я где-то читал, что div.class работает немного быстрее чем просто .class, так как тратится меньше времени на поиск этого класса

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

соответсвенно #id будет div#id?

25.08.2010 17:23
Аватар пользователя Spleshka
Spleshka написал:

ага)) а вообще поставь лучше себе плагин firebug, если у тебя firefox. Там всё отлично понятно что и где надо писать. Если не разберёшься - пиши, я сделаю урок в картинках)

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

firebug стоит. Просто мозилой не люблю пользоваться. Хотя ща вышла 4-я бета версия, может и ниче так будет))

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

я мозилой пользуюсь исключительно из-за фаербага. Нереально классная и мощная штука, без неё как без рук. Особенно когда начинал - если б не она, то вообще не разобрался бы

25.08.2010 20:29
Аватар пользователя Денис
Денис написал:

ага, файербаг как-то удобнее и понятнее его аналога в Опере - "проинспектировать элемент".

А вот по поводу уголков - у меня сайт со стилями в цсс. Последние оперы уже понимают круглые углы. Вот мои цсс:

.block {
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

Не помню как ИЕ это все понимает.

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

А открой в IE 7 ;)

18.02.2011 19:49
Аватар пользователя Денис
Денис написал:

ИЕ7 как и все винду - в административный отпуск :)

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

Жаль не все виндоюзеры это понимают

11.03.2011 22:16
Аватар пользователя Петя
Петя написал:

Жээсть..
мой совет не пользоваться этим способом
кстати нафига резать 4 картинки, когда можно взять картинку круга и выводить в цсс нужную её четверть с помощью координат

30.07.2011 19:21
Аватар пользователя Тайный поклонник
Тайный поклонник написал:

Добрый день! Я дизайнер и верстальщик и честно говоря не понимаю вот такого способа, так как зная нормально css и используя все его возможности очень быстро можно вывести скругление углов. И круглые они во всех браузерах. Описанный в уроке способ просто один из нормальных существующих способов. Но мы в веб-студии используем его только тогда, когда углы не просто скругленные, а с какими-то наворотами. А круглые углы запросто делаются в css, просто надо правильно все прописать.

24.08.2011 08:57
Аватар пользователя Spleshka
Spleshka написал:

Каким образом, если не секрет? border-radius, -moz-border-radius ?

24.08.2011 15:44
Аватар пользователя Тайный поклонник
Тайный поклонник написал:

Всем привет!
Сайт классный, Статьи - бомба! Просто мозг разрываюм. Респект всем, кто задействован.
По поводу фона вне уголков: его можно сделать прозрачным используя не *.gif, а *.png файлы. они поддерживают прозрачный фон.

15.09.2011 11:48
Аватар пользователя powerscin
powerscin написал:

Дело не в прозрачности фона, вы посмотрите на картинки, а потом внимательно на css-код и увидите, что если использовать прозрачность в уголках то получаться не скругленые уголки,а что то вроде этого:
screenСкрин
да простит меня Женя за палево на его сайте)

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

Да и *.gif тоже, если готовите графику в фотошопе, при сохранении для Web устройств, включите прозрачность.

15.09.2011 11:54

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