vadimus9 июл 2009 в 12:20

Скругление углов на чистом CSS с анти-алисингом

5 мин

9.2K

CSS *

+56

Комментарии 44

Mithgol 9 июл 2009 в 12:31

Было бы немалым подспорьем, ежели окромя авторства кода указывать также и лицензию.

А не то, может, смотреть код возможно, а пользоваться им окажется противозаконно.

atomicxp 9 июл 2009 в 14:13

Возможно, но есть и другие лицензии, например, MIT — делай с кодом всё что хочешь, и ни за что не отвечай, или GNU — при использовании обязан раздать его всем. Может так статься, что противозаконно как раз не распространять скопипастенный код везде где только можешь.

blo 9 июл 2009 в 12:34

opacity не поддерживается ИЕ, при чем и 8-й версии тоже.

c ИЕ6 есть
filter: alpha(opacity = 60);

egorinsk 9 июл 2009 в 15:42

Ага, каждый filter — отдельный объект DirectShow (если не путаю), давайте подвесим пользователю систему.

olegchir 9 июл 2009 в 16:17

Ну, игры-то и на трех мильёнах полигонов не виснут.

Чувствует моя печенка, в Second Life каждый второй камушек здания, и уж тем более интерактивная реклама — отдельный объект, сделанный едва ли не на Direct Show. И их там не менее чем стопитьцот.

omfg 9 июл 2009 в 12:39

Спасибо за статью.
Но наши забугорные друзья уже давненько это придумали (нижний пример). Конечно не идентично, но все таки…
Думаю данной технике можно найти и другое применение, но главный ее минус — большое кол-во кода, я лучше обойдусь спрайтами.

Mithgol 9 июл 2009 в 12:48

Здесь кода-то — на килобайт с небольшим.

Эдак больше траффика уйдёт на HTTP-отклики при отдаче спрайтов.

omfg 9 июл 2009 в 12:54

Возможно вы правы, но кода _визуально_ много, причем лишнего и не семантичного.

Mithgol 9 июл 2009 в 15:08

А, в этом смысле. Тогда я согласен.

akamuza 9 июл 2009 в 13:16

А вот на том же сайте давным давно уже висит первый пример www.cssplay.co.uk/boxes/snazzy.html
который в свою очередь был основан на Nifty Corners, что, собственно говоря, там и указано.

reaferon 9 июл 2009 в 12:50

С точки зрения семантики это не есть гуд.

foxweb 9 июл 2009 в 13:13

Во-во. Такая телега ради примитивного украшательства. Проще background задать и мусора меньше, и в одну строчку. А при использовании спрайтов — так ещё экономней. Что гуглу круто, то не всегда круто простым смертным. Собсно, CSS и блочная вёрстка появились ради минимизации, а не изобретения таких велосипедов.

olegchir 9 июл 2009 в 16:24

С точки зрения семантики, весь этот код можно генерить генераторами. И в реальном server-side коде для генерации CSS это будет какая-нибудь css.addElement(new NiftyCorner(name=«startPage.mainPanel.leftCorner», type=NiftyCorner.typeLeftUpper, radius = 6, colorStart = 18, colorFinish=0))

homm 9 июл 2009 в 12:56

Этот вариант весит 77 байт картинкой, байт 200 в css и байт 50 в html. Картинка и css кешируются. Почему вы все его так не любите?

Один из доводов: «У пользователя могут быть отключены картинки.» И именно потому что он их отключил ему нужно их пихать в тройном размере?

homm 9 июл 2009 в 13:11

Я, кстати, намного больше понимаю, в чем смысл варианта без картинок, но с js — можно сделать универсальную вещь, меньше возни при изменении радиуса и цвета. Без js возни только прибавляется.

foxweb 9 июл 2009 в 13:15

Да, вообще несмешной пи*дец.

foxweb 9 июл 2009 в 13:19

Парсер съел:

<b class='e'><b><strong></strong></b><i><strong></strong></i><u></u><s></s><span></span></b>

Shtorkin 9 июл 2009 в 17:45

Никто не говорит, что не любит спрайты и PNG для скругления, я у себя на проекте попапы с первого дня сделал с использованием полупрозрачного PNG для тени в дневной схеме и Glow в ночной. Спрайты рулят. А представленный здесь и на моем сайте вариант, как один из многих, который, просто подзабыли слегка.

Aco 9 июл 2009 в 13:09

Килобайт CSS это довольно мало, тем более, при правильных хедерах, он легко закешируется браузером.

С бордером толщиной >1px, думаю, могут появится проблемы.

chetzof 9 июл 2009 в 13:10

Кому нужно быстро и без лесенок (чистый css) — пользуйтесь этим www.spiffycorners.com/. Естественно в жертву идёт семантика кода. Раньше пользовался им, сейчас JS использую.

akamuza 9 июл 2009 в 13:19

Кстати, я тоже за JS.
А у кого этот самый JS отключен, тот явно понимает, чем «рискует» и сознательно на это идёт.

НЛО прилетело и опубликовало эту надпись здесь

questor 9 июл 2009 в 18:27

Присоединяюсь. border-radius указывает «здесь должна быть рамка», а не попиксельно рисует окружности, каждую точку выпиливая ассемблером.
Давно пора уже от этих костылей (спрайтом или как у топикстартера) избавляться. Сказал — радиус, значит — радиус. Дальше браузер сам должен отрисовать.

questor 9 июл 2009 в 18:27

«скруглённая рамка», слово съелось.

selff 9 июл 2009 в 13:29

эту тему год назад обсосали и в избранное положили
38 статей о создании закругленных углов на сайтах

b3atb0x 9 июл 2009 в 13:43

сильно

Bonch 9 июл 2009 в 13:49

Я делаю подобное при помощи JS.
Скрипт находит все блоки, которые хотят быть с закругленными углами и создает в них несколько дивов и устанавливает класс. Готово.
Метод использует 7 дивов, но 1 картинку. Две картинки — если нужно чтоб блок отбрасывал glow по всем направлениям.

quark 9 июл 2009 в 14:06

Абзац. На тупое прописывание цвета для каждого пиксела даже лицензию натянули. Ну что за бред?

barkalov 10 июл 2009 в 11:05

мицголу «Было бы немалым подспорьем, ежели окромя авторства кода указывать также и лицензию...»

not_ice 9 июл 2009 в 14:43

пора реализовать средствами цсс скругленные уголки с субпиксельным сглаживанием )

sweedbes 9 июл 2009 в 14:53

Статья полезная, технику можно использовать в частных случаях, а вот в рабочем сайте кода слишком много получается. Как говорилось выше, увы семантика теряется.

egorinsk 9 июл 2009 в 15:32

вы такими дурными способами приносите больше вреда, чем пользы. Я подозреваю, увелимчение дерева DOM (каждый узел которого является довольно-таки сложным и тяжелым объектом, к тому же связанным с другими) требует больше ресурсов, чем добавление фоновой картинки.

TecHMeaT 9 июл 2009 в 15:39

У меня это сделано и без картинок, и без скриптов, и додумался я сам.
Хотя вру, скрипт есть, но для других целей — весь код уголков не присутствует в HTML, а вставляется в DOM с помощью jQuery, т.к. блоков с уголками много, точнее они все такие.

vadimus 9 июл 2009 в 15:53

Не очень понятно, можно пример?

TecHMeaT 9 июл 2009 в 17:41

Показать не могу, т.к. не уверен что одобрит заказчик. Покажу код:
HTML

…

jQuery

$(".container").before("");

CSS думаю нет смысла приводить.
Надеюсь хабра не порежет

TecHMeaT 9 июл 2009 в 17:46

Порезала :(
Если очень интересно — могу показать в индивидуальном порядке.
Можно было бы и для всех показать, но не так давно меня лихо заминусовали непонять за что ))