Круглые уголки, интересные варианты
23 Jun, 2008Пару подсмотренных интересных способов и вариант, который обычно использую я.
Обычный вариант
На всякий случай расскажу о банальном, и основном способе вёрстки круглых краёв у блоков. Это всего лишь несколько обёрнутых один в другой дивов. Вот так:- <!-- BEGIN блок с круглыми краями -->
- <div class="content">
- <div class="in1">
- <div class="in2">
- <div class="in3">
- наконец контент!
- </div>
- </div>
- </div>
- </div>
- <!-- END блок с круглыми краями -->
Закругленный уголок, обычно нужно 4 штуки, для каждого из углов
Расставляются уголки вот так:
- .content{background:url(../img/top-left.png) no-repeat top left}
- .in1{background:url(../img/top-right.png) no-repeat top right}
- .in2{background:url(../img/bottom-left.png) no-repeat bottom left}
- .in3{background:url(../img/bottom-right.png) no-repeat bottom right}
Вариант на wordpress.org, css only
- .block{
- -moz-border-radius: 3px;
- -khtml-border-radius: 3px;
- -webkit-border-radius: 3px;
- border-radius:3px;
- }
Также идеально подходит для ресурсов, которые хотят выказать своё идеологическое "Фе" неполноценным, по их мнению, броузерам.
Вариант на beta.ya.ru
Всем верстальщикам знаком неприятный момент при загрузке круглых уголков. Они грузятся по очереди, и иногда это выглядит довольно неопрятно. Решить эту проблему можно, если поместить все уголки в одну картинку, и затем просто смещением позиции фона, расставить их. Но возникает вопрос — «Как это сделать, черт возьми?».В Яндексе эту проблему решили. На главной можно пронаблюдать кнопочку «Присоединиться». (тем кто залогинен, нужно выйти, на секунду)
При увеличении шрифта, кнопочка будет расти. Более того! Фоном для нее может служить любой рисунок или градиент(имеется ввиду подложка, которая сейчас белая)
- <a href="#" class="b-button b-button-orange">
- <i class="t"><i></i></i>
- <i class="r"><i></i></i>
- <i class="b"><i></i></i>
- <i class="l"><i></i></i>
- <i class="rt"><i></i></i>
- <i class="rb"><i></i></i>
- <i class="lb"><i></i></i>
- <i class="lt"><i></i></i>
- <b>Присоединиться!</b>
- </a>
Все круглые края, а также верх и низ кнопки
Левый и правый края кнопки. Картинка на самом деле 32x1 пиксель, но я её растянул, чтобы было видно.
Вуаля, нам удалось реализовать круглые края, еще и с отличающейся от цвета фона границей.
Полный код я приводить не буду, скажу лишь, что всё замешано на position:absolute и background-position. Кому интересно, весь CSS-код находится в начале этого файла.
Остается только преклониться перед мастерством, и я бы сказал, изворотливостью профессионалов работающих в Яндекс (Крыму привет!). =)
Вобщем-то этот пост я затеял, чтобы поделиться Яндекс и "вордпресс" вариантами. Надеюсь и у вас в загашнике что-то есть.
Cсылки
Проблема, мягко говоря, изучена вдоль и поперёк. Несколько полезно-интересных ссылок.- Три примера из поста, вживую
- Закругленные уголки с помощью VML (IE) и border-radius(для всех остальных), работает в IE,Safari,Firfox
- Круглые уголки, все методы, классифицированные по способам реализации
- Roundedcornr.com ресурс для генерации картинок круглых уголков
- Curvy Corners генерируются джаваскриптом
- Spiffy Corners без джаваскрипта, без картинок, эмуляция с помощью нескольких дополнительных дивов
- Nifty corners, тоже самое что Spiffy, только с джаваскриптом
- Несколько интересных вариантов от Stu Nicholls (Спасибо Tutta)
ЗЫ: никогда никого не просил о помощи в этом блоге, но если Вы учитесь(учились, работаете) на физфаке МГУ и у вас добрая душа (или вы просто хотите улучшить карму, как это делает Earl), дайте знать пожалуйста, я в долгу не остаюсь.
79 комментариев к “Круглые уголки, интересные варианты”