cssing Архив » Круглые уголки, интересные варианты

Круглые уголки, интересные варианты

XHTML/CSS, Полезности

Пару подсмотренных интересных способов и вариант, который обычно использую я.

Обычный вариант

На всякий случай расскажу о банальном, и основном способе вёрстки круглых краёв у блоков. Это всего лишь несколько обёрнутых один в другой дивов. Вот так:

1. <!– BEGIN блок с круглыми краями –>
2. <div class="content">
3. <div class="in1">
4. <div class="in2">
5. <div class="in3">
6. наконец контент!
7. </div>
8. </div>
9. </div>
10. </div>
11. <!– END блок с круглыми краями –>

Для уголков соответственно берутся картинки вроде этой:

Закругленный уголок, обычно нужно 4 штуки, для каждого из углов

Расставляются уголки вот так:

1. .content{background:url(../img/top-left.png) no-repeat top left}
2. .in1{background:url(../img/top-right.png) no-repeat top right}
3. .in2{background:url(../img/bottom-left.png) no-repeat bottom left}
4. .in3{background:url(../img/bottom-right.png) no-repeat bottom right}

Вариант на wordpress.org, css only

1. .block{
2. -moz-border-radius: 3px;
3. -khtml-border-radius: 3px;
4. -webkit-border-radius: 3px;
5. border-radius:3px;
6. }

Это сработает везде кроме IE (и Opera всё собирается), а это сейчас уже, вобщем, немало. Потому для не очень важных мест, или для сайтов с известной статистикой, это можно делать уже сейчас.

Также идеально подходит для ресурсов, которые хотят выказать своё идеологическое “Фе” неполноценным, по их мнению, броузерам.

Вариант на beta.ya.ru

Всем верстальщикам знаком неприятный момент при загрузке круглых уголков. Они грузятся по очереди, и иногда это выглядит довольно неопрятно. Решить эту проблему можно, если поместить все уголки в одну картинку, и затем просто смещением позиции фона, расставить их.
Но возникает вопрос — «Как это сделать, черт возьми?».

В Яндексе эту проблему решили. На главной можно пронаблюдать кнопочку «Присоединиться». (тем кто залогинен, нужно выйти, на секунду)

При увеличении шрифта, кнопочка будет расти. Более того! Фоном для нее может служить любой рисунок или градиент(имеется ввиду подложка, которая сейчас белая)

Вот какой применяется HTML:

1. <a href=”#” class=”b-button b-button-orange”>
2. <i class=”t”><i></i></i>
3. <i class=”r”><i></i></i>
4. <i class=”b”><i></i></i>
5. <i class=”l”><i></i></i>
6. <i class=”rt”><i></i></i>
7. <i class=”rb”><i></i></i>
8. <i class=”lb”><i></i></i>
9. <i class=”lt”><i></i></i>
10. <b>Присоединиться!</b>
11. </a>

Выглядит страшновато, но на самом деле все очень просто, и с помощью всего двух таких вот необычных картинок:

Все круглые края, а также верх и низ кнопки

Левый и правый края кнопки. Картинка на самом деле 32×1 пиксель, но я её растянул, чтобы было видно.

Настоящие математики думаю оценят красоту задачи: “парой картинок реализовать круглые края”.

Вуаля, нам удалось реализовать круглые края, еще и с отличающейся от цвета фона границей.

Полный код я приводить не буду, скажу лишь, что всё замешано на 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), дайте знать пожалуйста, я в долгу не остаюсь.

XHTML/CSS, Полезности