Журналы пользователя

Связаться

Евгений Гадибиров Управляющий партнер в -МОНЕТА- Бесплатный член сообщества с 31 мая. 2006 г.  (последний раз был в системе 28 авг. 2008 г.)   Информация о пользователе    Интервью    Журналы Евгений Гадибиров имеет бизнес-контактов: 85 Рейтинг пользователя: 5 (1709 баллов) Добавить в круг общения

Журналы пользователя:

Работа  |  Мата Хари против Штирлица  |  Эмоциональный дизайн: японский Kansei инжиниринг [6]  |  Банк идей  |  Sell Me  |  А знаете ли Вы, что...  |  Хроники пикирующего бомбардировщика  |  Моя совeсть чиста, я ею не пользуюсь (c)  |  интернетные штучки  |  Вебэкономист.ru - бизнес журнал  |  Как Все Глупо  |  DesignCollector - сайт месяца  |  cssing  |  АИН: Аналитика  |  Владимир Яшников  |  DesignCollector - Журнал для дизайнеров  |  AJAX Planet  |  E-commerce.com.ua - всеукраинский центр электронной коммерции  |  тенденции  |  Жизнь как она есть  |  Міжнародний фонд "Відродження"  |  венчурный бизнес  |  Баблог  |  Webmascon Daily  |  LifeHack.ru  |  ДК им. Шри Япутры  |  Досуг  |  Философия Денег  |  Блог Андрія Пелещишина - інформаційні технології, наука, життя  |  blog.mazoo.net  |  Воскресные байты  |  Powered by Mambo 4.5.2  |  Alexey Mas  |  kapousta's live blog  |  журнал "Деньги"  |  Вебпланета - все новости  |  Comments for toodoo  |  Менеджмент @ БЛОГ  |  Хабрахабр: главная страница  |  moneta  |  BIW - online-журнал бизнеса в интернете - Интернет-бизнес и интернет-коммерция
 

Подписаться

Круглые уголки, интересные варианты из журнала пользователя cssing
(Разместил RSS 23 июн. 2008 г)

Оригинал статьи

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

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

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

6. наконец контент!

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

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

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

1. .content{background:url(../img/top-left.png) no-repeat top left}
2. …
3. .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:

10. Присоединиться!

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

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

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

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

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

Полный код я приводить не буду, скажу лишь, что всё замешано на position:absolute и background-position. Кому интересно, весь CSS-код находится в начале этого файла.
Остается только преклониться перед мастерством, и я бы сказал, изворотливостью профессионалов работающих в Яндекс (Крыму привет!). =)

Вобщем-то этот пост я затеял, чтобы поделиться Яндекс и “вордпресс” вариантами. Надеюсь и у вас в загашнике что-то есть.

Cсылки

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

• Три примера из поста, вживую
• Закругленные уголки с помощью VML (IE) и border-radius(для всех остальных), работает в IE,Safari,Firfox
• Круглые уголки, все методы, классифицированные по способам реализации
• Roundedcornr.com ресурс для генерации картинок круглых уголков
• Curvy Corners генерируются джаваскриптом
• Spiffy Corners без джаваскрипта, без картинок, эмуляция с помощью нескольких дополнительных дивов
• Nifty corners, тоже самое что Spiffy, только с джаваскриптом

Рад буду услышать Ваш оригинальный способ для круглых уголков! Я думал, что применял всё что известно, но оказалось что о двух рассказанных сегодня в посте, я всерьез не задумывался никогда.

ЗЫ: никогда никого не просил о помощи в этом блоге, но если Вы учитесь(учились, работаете) на физфаке МГУ и у вас добрая душа (или вы просто хотите улучшить карму, как это делает Earl), дайте знать пожалуйста, я в долгу не остаюсь.