vadimus Jul 9 2009 at 16:20

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

5 min

8.9K

CSS*

+57

Comments 44

Mithgol Jul 9 2009 at 16:31

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

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

atomicxp Jul 9 2009 at 18:13

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

blo Jul 9 2009 at 16:34

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

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

egorinsk Jul 9 2009 at 19:42

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

olegchir Jul 9 2009 at 20:17

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

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

omfg Jul 9 2009 at 16:39

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

Mithgol Jul 9 2009 at 16:48

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

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

omfg Jul 9 2009 at 16:54

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

Mithgol Jul 9 2009 at 19:08

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

akamuza Jul 9 2009 at 17:16

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

reaferon Jul 9 2009 at 16:50

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

foxweb Jul 9 2009 at 17:13

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

olegchir Jul 9 2009 at 20:24

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

homm Jul 9 2009 at 16:56

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

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

homm Jul 9 2009 at 17:11

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

foxweb Jul 9 2009 at 17:15

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

foxweb Jul 9 2009 at 17:19

Парсер съел:

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

Shtorkin Jul 9 2009 at 21:45

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

Aco Jul 9 2009 at 17:09

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

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

chetzof Jul 9 2009 at 17:10

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

akamuza Jul 9 2009 at 17:19

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

UFO landed and left these words here

questor Jul 9 2009 at 22:27

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

questor Jul 9 2009 at 22:27

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

selff Jul 9 2009 at 17:29

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

b3atb0x Jul 9 2009 at 17:43

сильно

Bonch Jul 9 2009 at 17:49

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

quark Jul 9 2009 at 18:06

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

barkalov Jul 10 2009 at 15:05

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

not_ice Jul 9 2009 at 18:43

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

sweedbes Jul 9 2009 at 18:53

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

egorinsk Jul 9 2009 at 19:32

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

TecHMeaT Jul 9 2009 at 19:39

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

vadimus Jul 9 2009 at 19:53

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

TecHMeaT Jul 9 2009 at 21:41

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

…

jQuery

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

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

TecHMeaT Jul 9 2009 at 21:46

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