How to become an author
Search
Write a publication
Pull to refresh

Comments 122

Гм, делаю так уже давно (правда, без поддержки IE) и понятия не имела, что это принципиально новый способ…
Total votes 30: ↑23 and ↓7+16
автор просто решил попробовать себя в написании статей
Total votes 10: ↑8 and ↓2+6
твоя статья? тоже НЕПЛОХО написал)
Total votes 6: ↑6 and ↓0+6
Уже второй топик с полным бредом за сегодня. Первый про аську был. Или читать мануалы уже не в моде?
Total votes 12: ↑1 and ↓11-10
Выискивать бред — это нужное умение.
Спасибо за определение топика.
А мне топик помог.
Если ведете список, запишите меня в бредочитатели. Буду очень благодарен.
Total votes 1: ↑1 and ↓0+1
Вот буквально несколько минут назад искал решение скругленных углов. Нашел NiftyCube .

Сейчас попробую ваше решение.
Total votes 1: ↑1 and ↓0+1
Я пробовал нифти, и всякие curvy и тд.
Реально css3Pie просто рулит всех.
Он кроме как уголков еще очень много чего поддерживает, например с помощи его, можно полючать transparent png в 6ом Ие
This comment wasn’t rated yet0
Спасибо огромное за то, что напомнили про CSS3 Pie!
Отсутсвие border-radius в IE для меня некритично не пользуюсь, а вот поддержка нескольких фоновых изображений очень нужна.
Total votes 3: ↑3 and ↓0+3
В IE8 в Standards Mode не работает. А в целом интересно.
Total votes 1: ↑1 and ↓0+1
Отпишитесь ему пожалуйста.
Total votes 1: ↑1 and ↓0+1
ну я писал ещё в декабре :)
даже нашёл кривое решение для одной картинки (работает в 8ом, но если картинок не сколько — обрабатывает только первую)
Total votes 1: ↑1 and ↓0+1
Вы уверены, что после предпоследнего шага оптимизации браузер не будет 2 раза дёргать картинку (делать 2 запроса к серверу)?
Total votes 1: ↑1 and ↓0+1
Не уверен, запроса будет 2, но можно попробовать доработать этот момент с помощью JS и 2й раз брать картинку из кэша.
Total votes 3: ↑3 and ↓0+3
1. Грузить картинку два раза не гут. Умный браузер второй раз качать конечно не будет, но вот в оперативе сколько картинок будет не совсем ясно (к картинкам в IMG есть доступ через JS как к графическому обьекту, к бекграундам нет, то есть это, возможно, различные инстансы).

2. Указывать размеры картинок — это хорошая практика. Иначе у вас сайт будет прыгать, как это было в 90-х. Поэтому смысла во второй картинке нет в принципе.

3. CSS3 Pie и схожие решения работают до тех пор, пока у вас нет сложной вёрстки с кучей навороченного CSS3. В таких условиях всё ломается нафиг, а порой IE умирает. Так что я бы не советовал увлекаться — у вас дев машина мощная, а ребята с нетбуками будут вас ненавидеть.

Вобщем, плохой способ.
Total votes 9: ↑7 and ↓2+5
Вы думаете, что на нетбуках стоит IE6? Даже 7-й?
Total votes 3: ↑2 and ↓1+1
Удивительно, но факт! Многие не верят, что семёра на нетах норм работает, от того там стоит XP + IE6.
Total votes 1: ↑1 and ↓0+1
А я специально отвел под тесты ИЕ старый ноут :)
Total votes 1: ↑1 and ↓0+1
1. Грузить картинку два раза не гут.
Специально для вас попробовал пример в топике — картинка грузится 1 раз :)
Total votes 2: ↑2 and ↓0+2
use the document.execCommand(«BackgroundImageCache», false, true); Люк
Иначе да, она будет грузиться один раз. Но каждый раз
Total votes 2: ↑1 and ↓10
только вот картинку прятать не надо, а то пользователь захочет её сохранить и обломается.
неделю назад как раз задался такой проблемой webcocktail.ru/sandbox/border-radius/
задавал картинкам прозрачность, чтобы через контекстное меню она была доступна.
а ещё, лучше использовать border-radius.htc, с ним особых тормозов не наблюдается даже при большом количестве картинок, если его немного пофиксить
Total votes 3: ↑3 and ↓0+3
А как, кстати, пофиксить? Я как раз сейчас на это наткнулся. Десяток-другой картинок он обрабатывает секунду, то есть по ним как волна пробегает.
Total votes 1: ↑1 and ↓0+1
в стили надо добавить:

v\:roundrect {BEHAVIOR: url(#default#VML)}
v\:fill {BEHAVIOR: url(#default#VML)}

а из самого файла border-radius.htc удалить строки

var css = el.document.createStyleSheet();
css.addRule(«v\\:roundrect», «behavior: url(#default#VML)»);
css.addRule(«v\\:fill», «behavior: url(#default#VML)»);

Это исправление, кстати, я подсмотрел тут, на хабре. Просто не нашёл ссылку. Пользуясь случаем хочу сказать «спасибо» тому человеку, который предложил такое решение.
Total votes 6: ↑6 and ↓0+6
к сожалению, выяснил что в IE возникает ошибка, если у скруглённого с помощью border-radius.htc блока в стилях указано {display:none}
Хотя это не ваша вина, с оригинальным border-radius.htc та же беда.
This comment wasn’t rated yet0
Как мне кажется правильнее будет все-же картинку оставить картинкой а не запихивать ее в div (простой контент менеджер в wysiwyg редакторе при добавлении фото не будет париться с дивами и лезть в код), а уже сверху нее накладывать уголки и прочие спецэффекты средствами js+css.
Понятно, что фон в этом случае нужен однотонный.
Опять же если юзер захочет сохранить картинку у него в случае с div это не получится + не напечатает на принтере (фон как правило не печатается).
Total votes 2: ↑2 and ↓0+2
Glook предложил хороший вариант для того чтобы оставить пользователю возможность сохранить картинку. Вместо visibiliti: hidden можно использовать opacity: 0.
Про wysiwyg могу сказать следующее, я лишь показал общую концепцию метода, выносить ли что-то в JS каждый решает самостоятельно, это зависит уже от конкретной задачи.
Total votes 3: ↑3 and ↓0+3
Настоящее скругление углов картинок на клиенте
…
В результате мы получили что хотели, элемент остается инлайновым как обычная картинка

Чую подвох — настоящее ли скругление мне предлагают ;) И вот еще:

Есть очень мощная библиотека CSS3 Pie которая реализует на VML многие CSS3 свойства для IE6-8, включая border-radius, она невероятно проста и весит всего 28кб.

Вопрос: есть ли смысл загружать 28 Кб js, который может быть и отключен, когда мне надо на одной из страниц сайта скруглить 3 картинки общим весом 12Кб?
Total votes 7: ↑7 and ↓0+7
Вопрос вечный, как и ответ на него. Любой универсальный фреймворк медленнее и тяжелее хардкодного решения, спору нет. Об этом говорил еще Виталий Харисов на докладе о своем css-framework'e в Яндексе но все разработчики рано или поздно приходят этому, потому что ваша страница с 3 картинками не последняя в вашей практике их будет очень много, а будут еще и другие проекты где картинок будет больше и фон под ними будет разным.
Total votes 4: ↑4 and ↓0+4
Надо идти от задачи. Если правда много скругленных уголков и без них не обойтись, то да, нужны какие-то решения и вот этот фреймворк может подойти. Но для трех картинок это правда не нужно.

Кстати, не обязательно применять какое-то хардкорное решение. Я к тому что дизайнер — тоже человек и если ему объяснить чего пользователю будет стоить вот это нагромождение уголков, только ради нагромождения уголков он согласится отказаться от скруглений в эксплорере. Точно говорю.
Total votes 4: ↑4 and ↓0+4
Можно обойтись border-radius.htc от Ремиза Рахнаса (Remiz Rahnas) и Ника Фетчака (Nick Fetchak). Он весит только 4,8 килобайта в несжатом виде. Но не без подвохов: во-первых, родительский контейнер требует position: relative и может требовать z-index: 0 при некоторых, не выясненных мной обстоятельствах; во-вторых, этот метод отрабатывает медленно, так что при десятке скругляемых блоков видим непредусмотренную анимацию. Подозреваю, что и CSS3 Pie имеет подобные недостатки.
Total votes 1: ↑1 and ↓0+1
А можно и не обходиться ;)
Total votes 2: ↑1 and ↓10
border-radius.htc не работает вообще при ресайзе страницы. PIE меняет ширину почти на лету и делает это корректно. И в целом это все достаточно быстро работает, т.к. VML в ИЕ отрисовывается с достаточно пристойной скростью. Ресай старницы допилили в iecss3.htc (доработанная версия border-radius.htc), но в ней все равно подглючивает орисовка при смене ширины страницы. И самое главное, в ней этот htc неприемлим, кода мы работаем с анимациями (да даже просто без анимации, если требуется скрыть закругленный элемент)
PIE это (вроде как) единственный ИЕ костыль, который корректно работает с jquery animate, slide и прочими нужными вещами.
Total votes 2: ↑2 and ↓0+2
Вот как раз при ресайзе никаких проблем не вижу.

И самое главное, в ней этот htc неприемлим


«В ней» — это в ком? Боюсь, я утерял нить.

jQuery у нас в проекте, увы, не применяется, а с переключением display у закруглённого элемента — да, были проблемы.
This comment wasn’t rated yet0
Свойство border-radius поддерживается оперой, начиная с версии 10.5.
Total votes 1: ↑1 and ↓0+1
Конечно же это должно работать во всех браузерах
Total votes 1: ↑0 and ↓1-1
Внимание! Да, PIE — это благо, однако у меня в ИЕ7 бывают глюки, когда закругляется только первый элемент класса, который мы пропустили через behavior. Так же случается так, что не закругляются элементы, которые находятся в закругленном родителе.

Кстати, в вашем примере для правого блока используются ксс свойства
background none repeat scroll 0 0 #555555;
opacity:0.7;

Чтоб это работало в ИЕ6-8, нужно написать:
-background:rgba(red,green, blue, 0.7);
-pie-background:rgba(red,green, blue, 0.7);
(где rgb — это rgb-цвет вашего 16ричного #555, лень лезть за ним в фотошоп…)

И тогда прозрачность заработает и в ИЕ.
Total votes 1: ↑1 and ↓0+1
можно выписать одельный фильтер для 6го, все остальные поддерживают opacity. не надо и для этого грузить интерфейс еще одним запросом к csspie
This comment wasn’t rated yet0
Только ИЕ9 поддерживает opacity. Кроме того, (насколько я помню), фильтр прозрачности так же как и opacity делает прозрачным весь блок (а значит и текст в нем), а не только фон. А нам нужен именно прозрачный фон.
This comment wasn’t rated yet0
да насчёт opacity я ошибся, почемуто показалось что всё в мире хорошо и ie7 умный.
но на самом деле, можно прописать вот такие фильтры, они как раз делают то что надо, прозрачность фона а не контента:
-ms-filter: «progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000)»; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000); /* IE6 & 7 */
а для всех остальных, opacity.
на самом деле, я думаю что тоже самое делает и Pie, поэтому снимаю свою претензию.
This comment wasn’t rated yet0
PIE перед скругляемым элементом генерирует пачку неизвестных браузеру элементов (внутри которых кладутся VML элементы), что на практике частенько карежит верстку (к примеру между скругляемым и предыдущим элементами переастаем работать margin).
Total votes 2: ↑2 and ↓0+2
если скругленному блоку добавить float, то margin снова заработает.
Total votes 1: ↑1 and ↓0+1
А float к блоку c display: teble-cell; и шириной, зависящей от колонок справа и слева?
Total votes 1: ↑1 and ↓0+1
В документации же сказано, что PIE не работает с табличными элементами, так что какое может быть table-cell? Ждите такую новую версию PIE, в которой придумают, как с этим быть. Если придумают.
Total votes 2: ↑1 and ↓10
• and table structure elements

сказано. Но я говорю не о табличных элементах, а о
Total votes 1: ↑1 and ↓0+1
съел все парсер…

• table and table structure elements

сказано. Но я говорю не о табличных элементах, а о div
Total votes 1: ↑1 and ↓0+1
Ну ё мае. Если я пропишу спану display:block он становится блочным элементом. Тег это лиш условность, набор дефолтных свойств, которые мы можем переопределить. Так же точно display: teble-cell делает ваш любой элемент табличным.
This comment wasn’t rated yet0
Правил, описывающих содержимое блока с display: table; нет, а таблицы есть. Да и поведение не совсем уж и одинаковое у таблицы и у CSS-таблицы.

Если Вы мне не верите, поставьте в примере с главной страницы PIE блоку #target display: table; или display: table-cell;
Все будет работать.

А вот если Вы навесите id target на реальную ячейку таблицы, т.е. td, то ничего работать не будет.

Так что извините, но элемент td и блок с display: table-cell — есть разные вещи.
This comment wasn’t rated yet0
при использовании тэга td браузер сам вставит недостающие табличные тэги — вот и вся разница
This comment wasn’t rated yet0
Раз больше никакой разницы нет, объясните это:
Если Вы мне не верите, поставьте в примере с главной страницы PIE блоку #target display: table; или display: table-cell;
Все будет работать.

А вот если Вы навесите id target на реальную ячейку таблицы, т.е. td, то ничего работать не будет.
This comment wasn’t rated yet0
table-cell не работает пока нет должного окружения (table, table-row)
This comment wasn’t rated yet0
Интересно, а почему тогда, если блокам entry-content, в котором находится данный текст, и msg-meta, в котором расположен ник, прописать display: table-cell, они встанут в рядок и будут одинаковой высоты. Очень как-то похоже на табличное поведение, да еще и на работающее.
This comment wasn’t rated yet0
а их родители какие?
Total votes 1: ↑0 and ↓1-1
Откройте FireBug, к примеру, да посмотрите.
This comment wasn’t rated yet0
если блокам entry-content, в котором находится данный текст


На блок с коментом.
This comment wasn’t rated yet0
Вы выдите этот текст? Это коментарий. Он лежит в блоке .entry-content, рядом с ним есть блок .msg-meta, в котором лежит ник.
This comment wasn’t rated yet0
раньше фокс не применял table-cell без соответствующих предков.

а ие вообще table-cell не воспринимает
Total votes 1: ↑0 and ↓1-1
ИЕ8 вполне CSS-таблицы понимает.
This comment wasn’t rated yet0
но у микрософта всё не как у людей ;-)
Total votes 1: ↑0 and ↓1-1
В любом случае уже выходит адаптация верстки под PIE.
Total votes 1: ↑1 and ↓0+1
Ну идеального решения пока что нету…
А PIE значительно сокращает верстку скругленных блоков.
Total votes 1: ↑1 and ↓0+1
Это зависит от стиля верстки.
Total votes 1: ↑1 and ↓0+1
UFO just landed and posted this here
Разработчики Вебкита, похоже дочитали, Оперы и Фаерфокса, нет.
Total votes 2: ↑1 and ↓10
Фоновые картинки грузятся позднее обычных, это огромный недостаток решения.
Total votes 1: ↑1 and ↓0+1
Ты имеешь ввиду, что оно отображаются только после полной загрузки, или то что они действительно в очереди запросов помещаются в конец?
Total votes 1: ↑0 and ↓1-1
Насколько я помню (где-то читал), фоновые изображения помещаются многими браузерами в конец очереди, чтобы пользователь быстрее увидел всё важно, ведь в фон, обычно, помещают не самые важные вещи.
Total votes 2: ↑2 and ↓0+2
эээ, многие сайты, например фф, начинает отрисовывать именно с фона.
Total votes 2: ↑2 and ↓0+2
Некоторые картинки в ИЕ6 после первой загрузки имеют не верный размер. Видимо, зависит от того, успела ли картинка подгрузиться до применения фикса, или нет.
Total votes 1: ↑0 and ↓1-1
К сожалению у меня этот баг не воспроизводится, в любом случае можно и нужно прописывать режим совместимости с IE7 в html. Я этого опрометчиво не сделал в примере.
Total votes 3: ↑3 and ↓0+3
Кому это нужно, ничего подобного. В ие7 точно так же.
Total votes 2: ↑1 and ↓10
Ну как это кому? Тому кто не хочет по мимо IE6-7 писать еще и отдельные костыли под специфичные баги IE8, которые поверьте есть.
Total votes 2: ↑2 and ↓0+2
есть сомнения, если принцип как у border-radius.htc
В случае AJAX при перерисовке контента с закруглениями, эти закругления остаются на странице ) и жопа…
Total votes 2: ↑2 and ↓0+2
пробовали AJAX ом перезагружать кругляхи в IE?
Total votes 2: ↑2 and ↓0+2
Что такого неадекватного в моем комментарии, что даже карму сливают? :\ Нельзя высказывать благодарность автору, если для меня нашлась новая интересная информация?
Total votes 2: ↑1 and ↓10
А вы напишите, как их всех на хую вертеть любите, вам и поднимут. Хабр, он такой.
Total votes 3: ↑1 and ↓2-1
можно, только не публично
Total votes 2: ↑2 and ↓0+2
а мне не понравились минусующие ) тема хабра-сисек не закрыта )) Эй, товарищи-минуса — у вас есть отличный повод добавить красного в этот коммент! Вперед епт. Автору поста респект, однако!
Total votes 2: ↑0 and ↓2-2
Эй, вопрос-говно, кинул невтемачную ссылкенцию, получил краснухи. Все на мази. Чики-пуки, трали-вали. Покедава.
Total votes 2: ↑0 and ↓2-2
Ну вот если бы невтемачную ) продолжаем господа.
Total votes 2: ↑2 and ↓0+2
Ага, тема про скругление уголков у картинки. Сайт в тему — на нем же есть картинки!
Total votes 2: ↑0 and ↓2-2
Дело в том, что свойства ксс которые можно получить на том сайте также применимы к картинкам, применяются через класс. Сайт помогает наглядно представить нужный радиус, задать для каждого из углов отдельный и увидеть как это будет выглядеть.

Учись читать не только топики, но и комменты )
Total votes 2: ↑2 and ↓0+2
Сайт помогает наглядно представить нужный радиус
О май гад. Реквестирую сайты width.com и height.com, позволяющие наглядно представить длину и ширину.
Total votes 1: ↑0 and ↓1-1
а не проще ли просто картинку назначить фоном у элемента к которому и применять скругление?
Total votes 5: ↑2 and ↓3-1
Нет, это очень сложно. Но еще сложнее прочитать топик, к которому пишешь комментарий.
спойлер: там и так фоном.
Total votes 3: ↑2 and ↓1+1
у каждой картинки рядом с путём должны быть заданы размеры. если путь задаётся в css, то и размеры в css. если в html, то и размеры в html. надо объяснять почему?

исключение — data-uri

также картинкам нужно указывать альтернативное текстовое содержимое
Total votes 2: ↑2 and ↓0+2
Полностью согласен, если бы все программисты и wysiwyg'и в html задавали бы размеры у картинок это было бы шикарно.
Total votes 3: ↑3 and ↓0+3
UFO just landed and posted this here
это приводит к неприятным скачкам по мере загрузки изображения
This comment wasn’t rated yet0
UFO just landed and posted this here
куда уж страшнее?
This comment wasn’t rated yet0
UFO just landed and posted this here
страшное — это взрывающийся компутер, а всё остальное — неприятности разной степени тяжести
This comment wasn’t rated yet0
Если для IE все равно придется дополниительно подключать скрипты, то проще пользоваться библиотечкой rocon от С. Чикуенка сразу, без хитростей в разметке.
Total votes 2: ↑2 and ↓0+2
Как хорошо, что политика относительно скругления углов у меня в компании такова, что все юзеры, кто способен увидеть — видят эти уголки, остальные смотрят на прямоугольные и ничего не теряют при этом.
Total votes 2: ↑2 and ↓0+2
Увы пока что настоящее кроссбраузерное скругление для фотографий на неоднородном фоне можно сделать только «набрав» уголки div-ами или иными удобными элементами:

так можно учесть даже антиалиасинг (на иллюстрации цветом показано opacity, каждое значение подписано цифрой, желтый цвет — отступы, все что обрамлено черной границей — отдельный элемент с бэгом). естественно получается куча элементов, фон каждого нужно вычислять и сдвигать чтобы все совпало.
Total votes 3: ↑1 and ↓2-1
> она невероятно проста и весит всего 28кб
а с включённым gzip она будет весить ещё меньше, где-то 9.5 кб.
Total votes 2: ↑2 and ↓0+2
Невелика цена для костыля, способного поддержать CSS3 в IE6, IE7 и IE8.
Total votes 3: ↑2 and ↓1+1
А с какой целью у вас в примере
behavior: url(css/PIE.htc);
подключается в общем css файле, если это ie only? Можно же в ie.css вынести
Total votes 1: ↑1 and ↓0+1
Можно, для наглядности примера я все свойства показал в одном месте.
Total votes 2: ↑2 and ↓0+2
а она и так не загружается нигде кроме ie.
This comment wasn’t rated yet0
целую строчку сэкономишь х)))
This comment wasn’t rated yet0
Это известный баг, самый элегантный способ, по моему скромному мнению, вот:

$('img.r_corners').wrap(function() {
return '/>';
}).css('opacity', 0);


ну и соответственно для картинки класс r_corners, для обертки image_replacment

Придумал не сам, давно где-то видел в сети, да вот только где не найду вот так с нахрапу — стыд и срам.

This comment wasn’t rated yet0
css3PIE это решение для ie, a опера поддерживает border-radius с 10.5
This comment wasn’t rated yet0
Sign up to leave a comment.

Articles

Show the best of all time

Your account

Sections

Information

Services

Support
© 2006–2024, Habr