Как стать автором
Поиск
Написать публикацию
Обновить

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

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

А не то, может, смотреть код возможно, а пользоваться им окажется противозаконно.
Всего голосов 28: ↑19 и ↓9+10
Возможно, но есть и другие лицензии, например, MIT — делай с кодом всё что хочешь, и ни за что не отвечай, или GNU — при использовании обязан раздать его всем. Может так статься, что противозаконно как раз не распространять скопипастенный код везде где только можешь.
Всего голосов 3: ↑2 и ↓1+1
opacity не поддерживается ИЕ, при чем и 8-й версии тоже.

c ИЕ6 есть
filter: alpha(opacity = 60);
Всего голосов 7: ↑7 и ↓0+7
Ага, каждый filter — отдельный объект DirectShow (если не путаю), давайте подвесим пользователю систему.
Всего голосов 2: ↑1 и ↓10
Ну, игры-то и на трех мильёнах полигонов не виснут.

Чувствует моя печенка, в Second Life каждый второй камушек здания, и уж тем более интерактивная реклама — отдельный объект, сделанный едва ли не на Direct Show. И их там не менее чем стопитьцот.
Всего голосов 1: ↑1 и ↓0+1
Спасибо за статью.
Но наши забугорные друзья уже давненько это придумали (нижний пример). Конечно не идентично, но все таки…
Думаю данной технике можно найти и другое применение, но главный ее минус — большое кол-во кода, я лучше обойдусь спрайтами.
Всего голосов 4: ↑4 и ↓0+4
Здесь кода-то — на килобайт с небольшим.

Эдак больше траффика уйдёт на HTTP-отклики при отдаче спрайтов.
Всего голосов 8: ↑5 и ↓3+2
Возможно вы правы, но кода _визуально_ много, причем лишнего и не семантичного.
Всего голосов 5: ↑5 и ↓0+5
А, в этом смысле. Тогда я согласен.
Всего голосов 3: ↑1 и ↓2-1
А вот на том же сайте давным давно уже висит первый пример www.cssplay.co.uk/boxes/snazzy.html
который в свою очередь был основан на Nifty Corners, что, собственно говоря, там и указано.
Всего голосов 1: ↑1 и ↓0+1
С точки зрения семантики это не есть гуд.
Всего голосов 5: ↑4 и ↓1+3
Во-во. Такая телега ради примитивного украшательства. Проще background задать и мусора меньше, и в одну строчку. А при использовании спрайтов — так ещё экономней. Что гуглу круто, то не всегда круто простым смертным. Собсно, CSS и блочная вёрстка появились ради минимизации, а не изобретения таких велосипедов.
Всего голосов 2: ↑2 и ↓0+2
С точки зрения семантики, весь этот код можно генерить генераторами. И в реальном server-side коде для генерации CSS это будет какая-нибудь css.addElement(new NiftyCorner(name=«startPage.mainPanel.leftCorner», type=NiftyCorner.typeLeftUpper, radius = 6, colorStart = 18, colorFinish=0))
Всего голосов 1: ↑1 и ↓0+1
image
Этот вариант весит 77 байт картинкой, байт 200 в css и байт 50 в html. Картинка и css кешируются. Почему вы все его так не любите?

Один из доводов: «У пользователя могут быть отключены картинки.» И именно потому что он их отключил ему нужно их пихать в тройном размере?
Всего голосов 23: ↑22 и ↓1+21
Я, кстати, намного больше понимаю, в чем смысл варианта без картинок, но с js — можно сделать универсальную вещь, меньше возни при изменении радиуса и цвета. Без js возни только прибавляется.
Всего голосов 3: ↑2 и ↓1+1
Да, вообще несмешной пи*дец.
Всего голосов 3: ↑3 и ↓0+3
Парсер съел: 
<b class='e'><b><strong></strong></b><i><strong></strong></i><u></u><s></s><span></span></b>
Всего голосов 5: ↑5 и ↓0+5
Никто не говорит, что не любит спрайты и PNG для скругления, я у себя на проекте попапы с первого дня сделал с использованием полупрозрачного PNG для тени в дневной схеме и Glow в ночной. Спрайты рулят. А представленный здесь и на моем сайте вариант, как один из многих, который, просто подзабыли слегка.
Комментарий пока не оценивали0
Килобайт CSS это довольно мало, тем более, при правильных хедерах, он легко закешируется браузером.

С бордером толщиной >1px, думаю, могут появится проблемы.
Всего голосов 2: ↑1 и ↓10
Кому нужно быстро и без лесенок (чистый css) — пользуйтесь этим www.spiffycorners.com/. Естественно в жертву идёт семантика кода. Раньше пользовался им, сейчас JS использую.
Всего голосов 3: ↑3 и ↓0+3
Кстати, я тоже за JS.
А у кого этот самый JS отключен, тот явно понимает, чем «рискует» и сознательно на это идёт.
Всего голосов 5: ↑5 и ↓0+5
НЛО прилетело и опубликовало эту надпись здесь
Присоединяюсь. border-radius указывает «здесь должна быть рамка», а не попиксельно рисует окружности, каждую точку выпиливая ассемблером.
Давно пора уже от этих костылей (спрайтом или как у топикстартера) избавляться. Сказал — радиус, значит — радиус. Дальше браузер сам должен отрисовать.
Комментарий пока не оценивали0
«скруглённая рамка», слово съелось.
Комментарий пока не оценивали0
Я делаю подобное при помощи JS.
Скрипт находит все блоки, которые хотят быть с закругленными углами и создает в них несколько дивов и устанавливает класс. Готово.
Метод использует 7 дивов, но 1 картинку. Две картинки — если нужно чтоб блок отбрасывал glow по всем направлениям.
Всего голосов 2: ↑2 и ↓0+2
Абзац. На тупое прописывание цвета для каждого пиксела даже лицензию натянули. Ну что за бред?
Всего голосов 13: ↑13 и ↓0+13
пора реализовать средствами цсс скругленные уголки с субпиксельным сглаживанием )
Всего голосов 1: ↑1 и ↓0+1
Статья полезная, технику можно использовать в частных случаях, а вот в рабочем сайте кода слишком много получается. Как говорилось выше, увы семантика теряется.
Всего голосов 1: ↑1 и ↓0+1
вы такими дурными способами приносите больше вреда, чем пользы. Я подозреваю, увелимчение дерева DOM (каждый узел которого является довольно-таки сложным и тяжелым объектом, к тому же связанным с другими) требует больше ресурсов, чем добавление фоновой картинки.
Всего голосов 2: ↑2 и ↓0+2
У меня это сделано и без картинок, и без скриптов, и додумался я сам.
Хотя вру, скрипт есть, но для других целей — весь код уголков не присутствует в HTML, а вставляется в DOM с помощью jQuery, т.к. блоков с уголками много, точнее они все такие.
Всего голосов 1: ↑1 и ↓0+1
Не очень понятно, можно пример?
Комментарий пока не оценивали0
Показать не могу, т.к. не уверен что одобрит заказчик. Покажу код:
HTML

…

jQuery

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

CSS думаю нет смысла приводить.
Надеюсь хабра не порежет
Комментарий пока не оценивали0
Порезала :(
Если очень интересно — могу показать в индивидуальном порядке.
Можно было бы и для всех показать, но не так давно меня лихо заминусовали непонять за что ))
Комментарий пока не оценивали0
Хороший способ! Спасибо!
Сразу попытался на основе этого сделать скруглённый «бордюр»… Безрезультатно(. Может у кого есть наработки?
Всего голосов 1: ↑1 и ↓0+1
dimox.name/smooth_rounded_corners_no_images/
Всего голосов 2: ↑2 и ↓0+2
Максимально конченый способ. Кому доставляет ковыряться в 500 000 тегах? Мне нисколечко.
Комментарий пока не оценивали0
Рисовали бы браузеры только круглые углы, тогда все бы пытались сделать квадратные. (!)
Всего голосов 2: ↑2 и ↓0+2
Это верно подмечено, сделают сейчас полную поддержку закруглённых углов и люди потребуют поддержку многогранников, звёзд и тд
Всего голосов 1: ↑1 и ↓0+1
У вас в заголовке написано «антиалисинг», поправить бы?
Комментарий пока не оценивали0
НЛО прилетело и опубликовало эту надпись здесь
Зарегистрируйтесь на Хабре, чтобы оставить комментарий

Публикации

Показать лучшие за всё время
Изменить настройки темы

Истории

Ваш аккаунт

Разделы

Информация

Услуги

Техническая поддержка
© 2006–2024, Habr