Не для кого уже не секрет, что некоторые из браузеров поддерживают новую версию CSS, в котором реализовано множество иногда так не хватающих фич, которые приходится реализовывать через JS либо, какими-то другими не “айс” методами.
В этом и последующих постах я бы хотел перечислить несколько значимых нововведений в CSS3 которые будут отличным дополнением к веб-дизайну, и наверняка упростят жизнь верстальщика.
Данный пост посвящен параметру Border Radius.
Я думаю это самая наиважнейшая фича, которая так не хватала и которую я так ждал. Она реализует закругление уголков блочных элементов. Раньше приходилось прибегать к картинкам, либо громоздким CSS реализациям, сейчас же, все это сводиться к трем строчкам:
-webkit-border-radius: 20px;
border-radius: 20px;
Так же можно задавать радиус и для отдельных сторон елемента:
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-rightright-radius: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-rightright-radius: 10px;
Поддерживается в браузерах Firefox, Safari 3 и Chrome.
Реализован такой подход к примеру в твиттере и WordPress админке, как мне известно начиная со второй версии.
Попробуйте зайти с Opera и Firefox. Заметите разницу 
Кстати, если div который идет ниже будет с закругленными углами, считайте себя счастливым обладателем браузера закругление поддерживающего.
Инфа по теме:
в
Писец у браузеров нет общего стандарта. Пляшут все под свою дудку. Уж договорились бы как и что интерпретировать то. Надеюсь в скором будущем они будут думать о людях, а не о своих принципах.
в
Валентин, CCS3 планируется подготовить к выходу не раньше 2010 года. К тому времени я думаю его будут поддерживать все браузеры.
Хотя оно разрабатывается модульно, и все же некоторые уже готовы к работе
в
IE все равно всех затормозит.
В CSS3 довольно много интересных возможностей (border-corner-image:, box-shadow: или border-image: и т.д.). Только действоительно проблема в том (как уже было сказано) когда же они наконец договорятся!
в
Большое спасибо за полезную информацию. Давно хотела сделать на своем сайте закругленные углы, пробовала разные способы, но получалось как-то некрасиво. Попробую теперь сделать так, надеюсь, получится.
в
По-хорошему, уже давно существует консорциум W3C. Хороший способ развивать общие стандарты.
В дальнейшем Microsoft выделилась, сказав, что им пофиг на стандарты, они будут продолжать свою политику, что вкупе с монополизмом винды и IE в ней сыграло решающую роль в потере значимости стандартов W3C. Решение тут, либо формировать новый форум, либо как-то вынуждать всех использовать одни стандарты. Ну и, мне еще кажется, что Mozilla c Chrome сделают свою роль. Благодаря открытости, новым идеям они смогут выбить себе рынок, и сформировать новый клуб стандартов.
в
Спасибо за статью!Хорошее разнообразие для сайта\блога, не прибегая к дизайно, что стоит у большинства по умолчанию!А когда можна регулировать на свой лад!Хочу и себе сделать закругленные.
А насчет браузеров, что у них нету общего стандарта…как писалось выше, так это скорей всего из-за конкуренции.Так как опираясь на это Opera вырезает то, что есть в IE, или ограничивает какие нибудь похожие функции, и наоборот! Может все намного проще…и суть заключается в тормознутосте браузера ИЕ или периодических задвигов у Опера
Видимо нам обычным юзером это никогда не понять!:))
в
Если честно, мне не очень нравится подобное – закругленные концы у сайтов, мне нравятся прежние – острые углы, это, на мой взгляд, более обычно.
в
[quote comment="2117"]Если честно, мне не очень нравится подобное – закругленные концы у сайтов, мне нравятся прежние – острые углы, это, на мой взгляд, более обычно.[/quote]
ага, и надоело всем уже. а эта фича с закруглением откуда пошла ? Не от Эпла случаем ?
в
Да уж… не хватало нам мороки с разными глюками и косяками у разных версий IE – так ещё и «альтернативщики» начали дурью маяться.
в
люблю стандарты, но не могу отказаться от украшений так сказать, хотя если браузеры выдавать плохо будут – это перевешивает, но на вооружение возьму, спасибо за статью.
в
Спасибо за информацию.
Наконец-то надоело уже фотошоп мучать для скругления углов. Осталось дождаться когда моя любимая Опера научиться это делать.
в
[quote comment="2122"]Да уж… не хватало нам мороки с разными глюками и косяками у разных версий IE – так ещё и «альтернативщики» начали дурью маяться.[/quote]
Стоит уважать ИЕ , всё же больше половины пользователей на нём сидят, и верстать сайт нужно в первую очередь под него.
в
Остается только ждать выхода….
в
Почему то в Опере не хочет.
в
Благодарю, так действительно удобнее делать, меньше ресурсов жрет. Хотя в разных браузерах по разному отображается.
в
Все пипец грамотные пишут (глюки IE глюки IE ) примеры в студию,глюки есть у всех,у IE возможно более заметно, потому что это массовый браузер,которым пользуется подавляющее число пользователей.
в
[quote comment="2152"]Благодарю, так действительно удобнее делать, меньше ресурсов жрет. Хотя в разных браузерах по разному отображается.[/quote]
[quote comment="2139"]Почему то в Опере не хочет.[/quote]
Ну а как вы думали ? Это ж камень преткновения вёрстки…а самая большая сволочь – ИЕ6 ((((
в
ИЕ6 тормозит – это по сегодняшним меркам, а вы вспомнте когда он появился. Вместе с XP, а это было когда, еще в 2000 или 2001 году. А теперь вспомните другие браузеры в это время.
в
Согласен с werden’ом. Тормозит жутко.
в
[quote comment="2135"]
Стоит уважать ИЕ , всё же больше половины пользователей на нём сидят, и верстать сайт нужно в первую очередь под него.[/quote]
ДА не сказал бы, он на втором месте уже после Мозилы
в
Отличный пример и интересная реализация… Надеемся, что скоро все браузеры будуть нормально работать с этим форматом… Тем более, что он более чем востребован!
в
как только подобную фишку начнет поддерживать опера, можно будет использовать border-radius массово
в
Появилась новая версия Оперы. Может он поддерживает? Надо качнуть и попробовать.
в
Решила помочь и отправила пост про закругленные уголки (прикольно) в свои социальные закладки. надеюсь поднимется популярность этой публикации и Вашего сайта. Успехов Вам!
в
Хороший урок получился, давно искал похожее – а тут все в одном месте. Самое интересное, что раньше думал что все это делается ТОЛЬКО с помощью картинок.
в
Штука конечно хорошая но лично мне не нравятся закругленные уголки, я предпочитаю прямые. Действительно что браузеры развиваются не одновременно. Создавая сайт приходится его проверять на кроссбраузерность в разных версиях браузеров. Одно из этой статьи радует, то что количество кода с годами уменьшается.
в
[quote comment="2084"]Валентин, CCS3 планируется подготовить к выходу не раньше 2010 года. К тому времени я думаю его будут поддерживать все браузеры.[/quote]
Да к тому времени уже будут новые нововведения…. так и придётся нам ждать ждать ждать…. и идти на 100 шагов позади…. кошмар какой то!!!!