Comments 44
Было бы немалым подспорьем, ежели окромя авторства кода указывать также и лицензию.
А не то, может, смотреть код возможно, а пользоваться им окажется противозаконно.
А не то, может, смотреть код возможно, а пользоваться им окажется противозаконно.
+10
opacity не поддерживается ИЕ, при чем и 8-й версии тоже.
c ИЕ6 есть
filter: alpha(opacity = 60);
+7
Ага, каждый filter — отдельный объект DirectShow (если не путаю), давайте подвесим пользователю систему.
0
Спасибо за статью.
Но наши забугорные друзья уже давненько это придумали (нижний пример). Конечно не идентично, но все таки…
Думаю данной технике можно найти и другое применение, но главный ее минус — большое кол-во кода, я лучше обойдусь спрайтами.
Но наши забугорные друзья уже давненько это придумали (нижний пример). Конечно не идентично, но все таки…
Думаю данной технике можно найти и другое применение, но главный ее минус — большое кол-во кода, я лучше обойдусь спрайтами.
+4
Здесь кода-то — на килобайт с небольшим.
Эдак больше траффика уйдёт на HTTP-отклики при отдаче спрайтов.
Эдак больше траффика уйдёт на HTTP-отклики при отдаче спрайтов.
+2
А вот на том же сайте давным давно уже висит первый пример www.cssplay.co.uk/boxes/snazzy.html
который в свою очередь был основан на Nifty Corners, что, собственно говоря, там и указано.
который в свою очередь был основан на Nifty Corners, что, собственно говоря, там и указано.
+1
С точки зрения семантики это не есть гуд.
+3
Во-во. Такая телега ради примитивного украшательства. Проще background задать и мусора меньше, и в одну строчку. А при использовании спрайтов — так ещё экономней. Что гуглу круто, то не всегда круто простым смертным. Собсно, CSS и блочная вёрстка появились ради минимизации, а не изобретения таких велосипедов.
+2
Этот вариант весит 77 байт картинкой, байт 200 в css и байт 50 в html. Картинка и css кешируются. Почему вы все его так не любите?
Один из доводов: «У пользователя могут быть отключены картинки.» И именно потому что он их отключил ему нужно их пихать в тройном размере?
+21
Я, кстати, намного больше понимаю, в чем смысл варианта без картинок, но с js — можно сделать универсальную вещь, меньше возни при изменении радиуса и цвета. Без js возни только прибавляется.
+1
Да, вообще несмешной пи*дец.
+3
Никто не говорит, что не любит спрайты и PNG для скругления, я у себя на проекте попапы с первого дня сделал с использованием полупрозрачного PNG для тени в дневной схеме и Glow в ночной. Спрайты рулят. А представленный здесь и на моем сайте вариант, как один из многих, который, просто подзабыли слегка.
0
Килобайт CSS это довольно мало, тем более, при правильных хедерах, он легко закешируется браузером.
С бордером толщиной >1px, думаю, могут появится проблемы.
С бордером толщиной >1px, думаю, могут появится проблемы.
0
Кому нужно быстро и без лесенок (чистый css) — пользуйтесь этим www.spiffycorners.com/. Естественно в жертву идёт семантика кода. Раньше пользовался им, сейчас JS использую.
+3
UFO just landed and posted this here
Присоединяюсь. border-radius указывает «здесь должна быть рамка», а не попиксельно рисует окружности, каждую точку выпиливая ассемблером.
Давно пора уже от этих костылей (спрайтом или как у топикстартера) избавляться. Сказал — радиус, значит — радиус. Дальше браузер сам должен отрисовать.
Давно пора уже от этих костылей (спрайтом или как у топикстартера) избавляться. Сказал — радиус, значит — радиус. Дальше браузер сам должен отрисовать.
0
эту тему год назад обсосали и в избранное положили
38 статей о создании закругленных углов на сайтах
38 статей о создании закругленных углов на сайтах
+5
сильно
-2
Я делаю подобное при помощи JS.
Скрипт находит все блоки, которые хотят быть с закругленными углами и создает в них несколько дивов и устанавливает класс. Готово.
Метод использует 7 дивов, но 1 картинку. Две картинки — если нужно чтоб блок отбрасывал glow по всем направлениям.
Скрипт находит все блоки, которые хотят быть с закругленными углами и создает в них несколько дивов и устанавливает класс. Готово.
Метод использует 7 дивов, но 1 картинку. Две картинки — если нужно чтоб блок отбрасывал glow по всем направлениям.
+2
Абзац. На тупое прописывание цвета для каждого пиксела даже лицензию натянули. Ну что за бред?
+13
пора реализовать средствами цсс скругленные уголки с субпиксельным сглаживанием )
+1
Статья полезная, технику можно использовать в частных случаях, а вот в рабочем сайте кода слишком много получается. Как говорилось выше, увы семантика теряется.
+1
вы такими дурными способами приносите больше вреда, чем пользы. Я подозреваю, увелимчение дерева DOM (каждый узел которого является довольно-таки сложным и тяжелым объектом, к тому же связанным с другими) требует больше ресурсов, чем добавление фоновой картинки.
+2
У меня это сделано и без картинок, и без скриптов, и додумался я сам.
Хотя вру, скрипт есть, но для других целей — весь код уголков не присутствует в HTML, а вставляется в DOM с помощью jQuery, т.к. блоков с уголками много, точнее они все такие.
Хотя вру, скрипт есть, но для других целей — весь код уголков не присутствует в HTML, а вставляется в DOM с помощью jQuery, т.к. блоков с уголками много, точнее они все такие.
+1
Не очень понятно, можно пример?
0
Показать не могу, т.к. не уверен что одобрит заказчик. Покажу код:
HTML
…
jQuery
$(".container").before("");
CSS думаю нет смысла приводить.
Надеюсь хабра не порежет
HTML
…
jQuery
$(".container").before("");
CSS думаю нет смысла приводить.
Надеюсь хабра не порежет
0
Порезала :(
Если очень интересно — могу показать в индивидуальном порядке.
Можно было бы и для всех показать, но не так давно меня лихо заминусовали непонять за что ))
Если очень интересно — могу показать в индивидуальном порядке.
Можно было бы и для всех показать, но не так давно меня лихо заминусовали непонять за что ))
0
Свой метод TecHMeaT опубликовал в отдельном посте.
0
Хороший способ! Спасибо!
Сразу попытался на основе этого сделать скруглённый «бордюр»… Безрезультатно(. Может у кого есть наработки?
Сразу попытался на основе этого сделать скруглённый «бордюр»… Безрезультатно(. Может у кого есть наработки?
+1
dimox.name/smooth_rounded_corners_no_images/
+2
Максимально конченый способ. Кому доставляет ковыряться в 500 000 тегах? Мне нисколечко.
0
Рисовали бы браузеры только круглые углы, тогда все бы пытались сделать квадратные. (!)
+2
У вас в заголовке написано «антиалисинг», поправить бы?
0
UFO just landed and posted this here
Sign up to leave a comment.
Скругление углов на чистом CSS с анти-алисингом