Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 51
Кстати в webkit есть свойство box-reflect для создания эффекта отражения. Пример использования:
Довольно удобно использовать при написании расширений под Chrome.
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));Довольно удобно использовать при написании расширений под Chrome.
Спасибо, в мемориз!
Ох как же меня радует, когда не нужно использовать сторонние библиотеки (jquery corner). А все просто и легко.
Спасибо больше, замечательная статья.
PS: В IE как всегда есть проблемы: плавная трансформация не работает, объект мгновенно принимает другую форму при наведении мышки, но и это уже прогресс.
PS: В IE как всегда есть проблемы: плавная трансформация не работает, объект мгновенно принимает другую форму при наведении мышки, но и это уже прогресс.
>> Чтобы все свойства работали корректно и во всех браузерах, необходимо использовать изображение в качества фона.
Еще можно для img прописать display:block — тогда скругления и тень тоже работают.
Еще можно для img прописать display:block — тогда скругления и тень тоже работают.
Firefox не хочет делать углы скругленными...
Видимо на момент написания статьи это и было справедливо, но в Firefox 6.0.2 всё отображается правильно.
Эти примеры работают во всех браузерах (Chrome, Firefox и Safari), с поддержкой свойств border-radius, box-shadow и псевдоэлементами :before и :after. В остальных браузерах мы просто увидим картинки, без каких либо эффектов.
А как же Opera? В ней всё тоже работает.
Вот как раз эти красоты можно использовать для оформления всяких мелочей. Люди с нормальными браузерами их увидят, рабы IE — увидят просто картинки, но смысл не потеряется.
Мелочь — это, например, картинка в тексте какой-нибудь внутренней страницы. Она нормально выглядит и со скругленными краями, и без, но сегодня скругленные края это модно в определенных кругах. Верстать уголки вручную в этом случае бред, подтягивать какие-нибудь скрипты для старых ослов, которые этого осла ещё и тормознут — а зачем? Мягкая регрессия в старых версиях — это наилучший вариант обратной совместимости.
они есть пока есть такие как ты — кто их поддерживает.
Я работаю в проекте которым пользуется с десяток миллионов пользователей:
ie6 — no
ie7-8 — уголки не скруглены, градиентов нет.
ie6 — no
ie7-8 — уголки не скруглены, градиентов нет.
Полностью поддерживаю. Часто клиента вобще не волнует браузер, он и сам не проверяет ничего, главное чтоб QAи сказали что проблем нет.
Тут основной нюанс в том, что разница во времени реализации тех или иных фич для IE6 и для всех остальных нередко может быть в десятки раз. Если у заказчика бюджет не резиновый — он чаще всего от IE6 в итоге отказывается.
Не вижу ничего смешного. У каждого есть выбор. У верстальщика поддерживать корявый IE или нет. А у заказчика выбор верстальщиков которые поддерживают IE или нет, а так-же выбор нужны ли ему такие консервативные и недалекие пользователи юзающие древние браузеры.
И если разработчик говорит что он этого поддерживать не будет это не значит что он не профессионал, это значит то что он этого поддерживать не будет и все. Он не обязан поддерживать IE(если он конечно на это не подписался).
И если разработчик говорит что он этого поддерживать не будет это не значит что он не профессионал, это значит то что он этого поддерживать не будет и все. Он не обязан поддерживать IE(если он конечно на это не подписался).
Если ты специалист — будь добр, сделай то, что от тебя требуют в наилучшем виде, чтобы качественно решить поставленную задачу.Я им не слуга и не робот и могу выбирать за что мне браться а за что не браться. Если фигурирует поддержка IE то я принципиально не берусь пусть костыли пишут те кто это любит или кто ради денег сделает что угодно. К счастью, в последнее время для «поддержки IE» порой достаточно уведомить юзера что у него браузер устарел и показать ссылки для скачивания нового — и заказчикам этого достаточно.
То-же самое но короче — у всех есть выбор как у заказчиков так и у верстальщиков: кататься на велосипедах с костылями под мышками, либо не оглядываться назад и идти вперед и осваивать\продвигать новые технологии.
Идея про обновление браузера конечно супер, но я уверен, что большая часть потенциальных клиентов отсеится на этом этапе, а как следствие и прибыль.
Поддержание устаревших браузеров стоит дороже, как в разработке, так и в сопровождении. А теперь еще раз поговорим про прибыль. Стоит ли овчина выделенки?
Все зависит от предполагаемой аудитории. Конечно, если у вас ресурс типа Хабра, то вероятность встретить тут пользователя IE6/7 близка к нулю. А если вы делаете Одноклассники, то мне вас жаль, но большинство клиентов будет приходить именно с IE
Ну и сколько вы предлагаете поддерживать IE6? Это же порочный круг. Пока его будут поддерживать, его нужно будет поддерживать. Не похоже ли это на дармовой хлеб верстальщиков? Т.е. пока проблема существует, суперпрофессионалы имеющие опыт в общении с IE6 будут нужны. Вот они и цепляются…
И ничего страшного в том, чтобы с прискорбием сообщить посетителю на IE6, что пора обновляться. Если посетителю интересен сайт, он обновится, а если нет, то и смысла его удерживать нет.
Даже ВКонтакте с его куда большей аудиторией более не поддерживает IE6/IE7. Какие уж тут Одноклассники…
Аудитория Вконтакте в основном прогрессивная школота, а у Одноклассников люди, для которых интернет — это синяя буквочка «е»
А вобще я ведь не спорю. Я бы вобще запретил все браузеры которые не умеют обновляться самостоятельно в фоне и на стандарты не обращают внимания. Порой под оперу верстать куда сложнее чем под ие
Загонять изображение в background-image — та ещё идейка. С одной стороны это предохраняет изображения от воровства тупыми секретаршами, которым тупой босс дал команду «воруй». Но с другой — ваши картинки, например, не попадут в поиск по картинкам, так же их по-дефолту не будет видно при печати страницы. Кроме того, background изображения сложно ресайзить.
Все это конечно няшно, но в массы это войдет как минимум верез год-два, проще сейчас сделать через imagemagic. Это при условии что вы заботитесь о своих посетителях, некоторые из которых еще сидят на ие 6.
Актуальная тема. Сегодня как раз использовал именно это решение для закругления.
Попросили добавить этот коммент:
===
$(function (){
var avaTar = $(«img»);
$(window).load(function() {
avaTar.wrap(function(){
return '<span class=«img_rounted» style=«position:relative; display:inline-block; background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;» />';
});
avaTar.css(«opacity»,«0»);
});
});
Cмысл в том, что опера почему то не всегда исполняет приведённый там скрипт, погуглил немного — это её баг, особо не разбирался. но решение именно в $(window).load(function()
может конечно можно ещё оптимизировать это дело, но мне было лень — не настолько я силён в js.
===
===
$(function (){
var avaTar = $(«img»);
$(window).load(function() {
avaTar.wrap(function(){
return '<span class=«img_rounted» style=«position:relative; display:inline-block; background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;» />';
});
avaTar.css(«opacity»,«0»);
});
});
Cмысл в том, что опера почему то не всегда исполняет приведённый там скрипт, погуглил немного — это её баг, особо не разбирался. но решение именно в $(window).load(function()
может конечно можно ещё оптимизировать это дело, но мне было лень — не настолько я силён в js.
===
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Оформление изображений на CSS3