Comments 147
Очень элегантное решение, вот только ие как всегда все портит :(
+14
Портит, но не совсем. Костыли всё-таки есть =)
Думаю в данном случае вполне допустимы.
Думаю в данном случае вполне допустимы.
0
Да ну это не то... Отдельный css под ie и содержимое этого самого css портит всю простоту и красоту решения. А если бы этот нехитрый метод работал везде... Но это уже из разряда мечтаний и молитв к разработчикам ослика =)
+3
жто наступит тогда, когда МС начнет признавать не свои стандарты...
0
С чего вы взяли, что есть стандарты на CSS? Приведите ссылку на них ;)
С чего вы взяли, что в разработке спецификации не было MS CSS? Опять же был бы рад ссылке на беспочвенное утверждение.
В одном предложении 2 существенные ошибки...
С чего вы взяли, что в разработке спецификации не было MS CSS? Опять же был бы рад ссылке на беспочвенное утверждение.
В одном предложении 2 существенные ошибки...
-2
ясное дело, что *стандарта* не существует, но w3c тоже ведь не проходимцы и было бы выгодно всем, если бы *все* веб браузеры поддерживали одну спецификацию...
конечно проще закрыть глаза на проблему и не признавать ее, нежели единожды решить... но куда девать маркетинг? каким еще "магическим" способом заставить пользователей "сидеть" на своей поделке?.. приведите хоть один (не промоушен) сайт, скажем, опера-онли...
не считайте себя умнее тысяч веб-разработчиков и веб-дизайнеров, для которых этот продукт даже не кость в горле...
конечно проще закрыть глаза на проблему и не признавать ее, нежели единожды решить... но куда девать маркетинг? каким еще "магическим" способом заставить пользователей "сидеть" на своей поделке?.. приведите хоть один (не промоушен) сайт, скажем, опера-онли...
не считайте себя умнее тысяч веб-разработчиков и веб-дизайнеров, для которых этот продукт даже не кость в горле...
0
А кто по вашему w3? Марсиане, или кристально честные специалисты или высшая сила? Вы читали цели и задачи w3? Если читали, то глупых вопросов и криков было бы меньше...
С чего вы взяли, что IE поделка? На поделке сидит > 2/3 пользователей. Что за тон в отношении компаний? Вы хоть раз занимались поддержкой продукта имеющего > 10000 копий(я не говорю уже о нескольких десятках миллионов продуктов основаных на движке IE)? Вы представляете сколько будет стоить переделки всех систем использующих движок IE? Мы не в состоянии собрать даже 0.00001% этой суммы. А кричите - долой\бойкот.
Ни кому он ни кость, поскольку, тысячи веб-разработчиков, в отличии, от кричащих, прекрасно знают все 'особенности' IE и способы как решать эти проблемы. MS прекрасно общается с ними. Попробуйте немного почитать их сайт.Не будте смешны в их глазах с криками о бойкоте.
За '-' отдельное спасибо. Это самый самый сильный довод с вашей сторон ;). Попробуйте научиться вести дискуссию, хотя бы уважая собеседников.
С чего вы взяли, что IE поделка? На поделке сидит > 2/3 пользователей. Что за тон в отношении компаний? Вы хоть раз занимались поддержкой продукта имеющего > 10000 копий(я не говорю уже о нескольких десятках миллионов продуктов основаных на движке IE)? Вы представляете сколько будет стоить переделки всех систем использующих движок IE? Мы не в состоянии собрать даже 0.00001% этой суммы. А кричите - долой\бойкот.
Ни кому он ни кость, поскольку, тысячи веб-разработчиков, в отличии, от кричащих, прекрасно знают все 'особенности' IE и способы как решать эти проблемы. MS прекрасно общается с ними. Попробуйте немного почитать их сайт.Не будте смешны в их глазах с криками о бойкоте.
За '-' отдельное спасибо. Это самый самый сильный довод с вашей сторон ;). Попробуйте научиться вести дискуссию, хотя бы уважая собеседников.
0
С чего у вас такая истерика? Похоже, что "кричаший" здесь пока вы один...
> Это ваше право считать нормальным то количество костылей и подпорок, которые заставляют ие показывать так, как этого хочет дизайнер
> На поделке сидит > 2/3 пользователей.
Это вообще никак не характеризует программу... На ВАЗ тоже много народу ездит, но лучше он от этого не становится.
> Вы представляете сколько будет стоить переделки всех систем использующих движок IE?
Не понимаю для чего нужно переделывать все существующие программы, использующие эту поделку. Можно было просто сделать нормальный браузер еще в шестом поколении.
> Что за тон в отношении компаний?
ммм... а каким должен быть тот? и что за тон у меня?
> Не будте смешны в их глазах
Буду стараться, спасибо
> Это ваше право считать нормальным то количество костылей и подпорок, которые заставляют ие показывать так, как этого хочет дизайнер
> На поделке сидит > 2/3 пользователей.
Это вообще никак не характеризует программу... На ВАЗ тоже много народу ездит, но лучше он от этого не становится.
> Вы представляете сколько будет стоить переделки всех систем использующих движок IE?
Не понимаю для чего нужно переделывать все существующие программы, использующие эту поделку. Можно было просто сделать нормальный браузер еще в шестом поколении.
> Что за тон в отношении компаний?
ммм... а каким должен быть тот? и что за тон у меня?
> Не будте смешны в их глазах
Буду стараться, спасибо
0
он (МС) и свои-то иногда не соблюдает...
0
Красоту решения не особо портит если хорошо понять, что написано для ie.
Попробую разобрать по полочкам.
zoom:1; - исправляет баг с лайот для ие, где-то на хабре была статья про это. Это универсальный способ правки многих глюков для ie.
behavior фактически искуственно добавляет требуемые псевдоэлементы для ie. Наша задача: добавить два элемента - перед основным содержимым элемента и после, для этого используем this.innerHTML=Элемент1+this.innerHTML+Элемент2. Но добавить это нужно всего один раз, поэтому используем expression: для элемента искусственно вводим некий атрибут isInserted. Если этот элемент еще неопределен (!this.isInserted=true), то задаем этому атрибуту значение (this.isInserted=(что-то определенное)), если уже определен (!this.isInserted!=true), то ничего не делаем. Как видно Элемент1 и Элемент2 в точности соответствуют псевдоэлементам :before и :after
Попробую разобрать по полочкам.
zoom:1; - исправляет баг с лайот для ие, где-то на хабре была статья про это. Это универсальный способ правки многих глюков для ie.
behavior фактически искуственно добавляет требуемые псевдоэлементы для ie. Наша задача: добавить два элемента - перед основным содержимым элемента и после, для этого используем this.innerHTML=Элемент1+this.innerHTML+Элемент2. Но добавить это нужно всего один раз, поэтому используем expression: для элемента искусственно вводим некий атрибут isInserted. Если этот элемент еще неопределен (!this.isInserted=true), то задаем этому атрибуту значение (this.isInserted=(что-то определенное)), если уже определен (!this.isInserted!=true), то ничего не делаем. Как видно Элемент1 и Элемент2 в точности соответствуют псевдоэлементам :before и :after
+3
Я бы сказал, что в данном случае такое решение не очень интересно, ввиду того, что есть решения, которые все браузеры поддерживают. А про ИЕ - это отдельный разговор. Да и вообще, пора уже как стандарт использовать закругления. Вроде они в CSS3 есть.
0
а можно ссылочку на такое решение? div content /div
0
самое смешное, что когда закругления станут стандартом они перестанут быть модными, и все будут делать что-то другое
0
почему вы так считаете?
0
Утверждение верно только в тех случаях, когда тенденция не несет практической пользы. В данном случае возможно это и не так (Мне попадались результаты исследований, сводившиеся к тому, что текст лучше запоминается читателем в в блоке со скругленными краями или в окружности, нежели в прямоугольнике. Правда авторететность авторов под вопросом. Да и они объяснили это тем, что это сильно контрастирует на фоне личного опыта большинства людей. Так как блоки текста вписаные в прямоугольник гораздо более распространены. )
0
Очень здорово! Прямо сейчас попробую на текущем проекте. Спасибо!
+1
Полный ништяг
-3
Удобно, конечно, но зачем использовать хаки, когда можно их не использовать? Есть способы сверстать то же самое не менее "непробиваемым" образом, но более надёжно. Вот тут — http://www.cssplay.co.uk/boxes/ — обвыбираться можно.
Вот выпустит через пару лет Майкрософт какой-нибудь нормальный браузер, или пользователь юзает браузер, не умеющий ни :after, ни expression в цссках — что будем делать?
Вот выпустит через пару лет Майкрософт какой-нибудь нормальный браузер, или пользователь юзает браузер, не умеющий ни :after, ни expression в цссках — что будем делать?
-6
Вот выпустит через пару лет Майкрософт какой-нибудь нормальный браузер, или пользователь юзает браузер, не умеющий ни :after, ни expression в цссках — что будем делать?
Псевдоэлементы :after и :before — стандартные. И если вдруг случится чудо и Microsoft выпустит «нормальный» браузер, поддерживающий стандарты, то все будет просто хорошо =)
У пользователя с таким браузером просто будет блок одного цвета и все.
Лично я не могу сказать, что вот этот способ превосходит метод, описанный выше. Просто сравните html-код.
+1
Я говорю о том, что если выйдет нормальный браузер от МС, то он будет поддерживать И :after, И экспрешшены. Вы сможете гарантировать в таких условиях работоспособность данного примера?
-3
Лично я да, могу. А вы?)
0
Эти уголки по идее поверх элементов :before и :after лягут, так что будет всё ок.
Можно подключать css-файл для ie не выше 7.0
Можно подключать css-файл для ie не выше 7.0
0
А можно использовать, например, вот такой — http://www.cssplay.co.uk/boxes/snazzy.html — подход, и не заботиться ни о будущих версиях браузеров, ни о браузерах, которые не поддерживают :after, ни об проблемах с яваскриптами, которые у некоторых пользователей убивают эксплорер, а у других начинается мерцание всей страницы.
Этот вариант валиден, работает везде, работает с отключёнными картинками и яваскриптом. Да, он захламляет код по сравнению с обсуждаемым вариантом, но без жертв в нашей профессии никак. Лично мне четыре-пять строк в коде не мешают.
Этот вариант валиден, работает везде, работает с отключёнными картинками и яваскриптом. Да, он захламляет код по сравнению с обсуждаемым вариантом, но без жертв в нашей профессии никак. Лично мне четыре-пять строк в коде не мешают.
-1
если правильно подключать css — через условные комменты, можно в них написать "lte IE7" (ну или с пробелом, не уверен), то 8 и более IE уже не будут этот стиль грузить
0
Да ладно вам спорить, не выйдет никогда нормальный браузер от МС. Если бы им это было надо, давно бы уже сделали.
0
они там один хуже другого… вот этот способ при масштабировании в FF глючит жутко… зажал я ctrl, покрутил колесом мыши вверх, да и закрыл
а то что автор поста предлагает — вполне ничего
а то что автор поста предлагает — вполне ничего
0
Уважаемый, приведите ссылку на "стандарты"...
0
Хорошее решение, но мне все-таки больше нравится jQuery для создания углов. jOuery более универсально, а соответственно проще.
-3
А как же JS, который не у всех работает?
+2
Безотносительно к jQuery и закруглённым уголкам, мне представляется, что такой вопрос уже становится неактуальным. Хотя я и сторонник того, чтобы сайт смотрелся хорошо или хотя бы приемлемо везде, но сейчас, боюсь, уже можно не принимать во внимание пользователей без Javascript'а: при таком распространении Ajax, визуальных JS-эффектов и прочего JS нужен почти для любого сайта.
0
Вопрос весьма актуален.
Многие движки по генерации превьюшек не понимают JS, зато понимают стили и бекграунды.
Уж лучше код будет на 2 Кб больше, но валидно и однозначно отображаться везде.
Многие движки по генерации превьюшек не понимают JS, зато понимают стили и бекграунды.
Уж лучше код будет на 2 Кб больше, но валидно и однозначно отображаться везде.
0
Но в IE без JS он ведь не будет отображаться.
А что такое движок по генерации превьюшек? (Простите, если вопрос глупый ;) )
А что такое движок по генерации превьюшек? (Простите, если вопрос глупый ;) )
0
Если бекграунд реализован через стили и/или таблицы, дивы, то он будет отображаться и без JS.
Генератор превьюшек - это программа, генерирующая уменьшенный вид страницы и отображающая его в виде графического файла. Например, расширения для огненного лиса и Google: http://ackroyd.de/googlepreview/
Генератор превьюшек - это программа, генерирующая уменьшенный вид страницы и отображающая его в виде графического файла. Например, расширения для огненного лиса и Google: http://ackroyd.de/googlepreview/
0
Согласен.
По сравнению с multiple backgrounds (поддерка только в Safari) — это всё костыли, поэтому играем по правилам военного времени.
По сравнению с multiple backgrounds (поддерка только в Safari) — это всё костыли, поэтому играем по правилам военного времени.
+1
Подскажите решение у jQuery, которое так делает?
Если просто wrap, то не интересно.
Если просто wrap, то не интересно.
0
habr сказал что не будет правильно публиковать ссыку тут http://aky.pp.ru/knowledge/plop.php
0
Небольшое дополнение: для лисы также можно использовать -moz-border-radius: Npx;
+1
Можно, но что-то выглядит оно как-то не очень, нет антиальязинга, заметны лесенки из пикселей, давно не смотрел правда, может что-то поменялось?
P.S.:
И в Сафари можно так: -webkit-border-radius: 10px; =)
P.S.:
И в Сафари можно так: -webkit-border-radius: 10px; =)
0
Да нет, ничего не поменялось.
Анти-алиасинга не было и нет, увы :(
Вообще, конечно, странно и обидно, что до сих пор браузеры не научились делать качественные элементарные графические "рюшечки" вроде -moz-border-radius + anti-aliasing.
Анти-алиасинга не было и нет, увы :(
Вообще, конечно, странно и обидно, что до сих пор браузеры не научились делать качественные элементарные графические "рюшечки" вроде -moz-border-radius + anti-aliasing.
0
А реально сделать точно так же, но с перламутровыми пуговицами с рамкой по краям 1px (на gif пусть такая окантовка уже есть)?
0
Nifty cube - более громоздкий, но более работающий вариант.
+1
я вот тоже в первую очередь про него подумал, прочитав из заголовка про скруглённые углы.
0
Не понравился за неумение делать бордюры... А это принципиально :)
0
Позволю себе с вами не согласиться.
0
Полностью поддерживаю. Очень хорошая реализация. Правда в Опере бывают сложности, если фон не белый. Это можно обойти, добавив вложенный div, но всё равно неприятно. Не исключаю, впрочем, что этот недостаток уже устранён — давно не смотрел относительно новых версий.
0
Если б не осёл, то всё было бы прекрасно.
НО:
Для проектов, нацеленных на рядового пользователя это рак. Доля ИЕ - значительно больше половины. Джаваскрипт хаки приводят к мерцанию для hover элементов.
Кроме того решение не универсально, как уже сказал prolis.
НО:
Для проектов, нацеленных на рядового пользователя это рак. Доля ИЕ - значительно больше половины. Джаваскрипт хаки приводят к мерцанию для hover элементов.
Кроме того решение не универсально, как уже сказал prolis.
0
спасибо. Как раз сегодня по работе такакя задача стоит. Вот и испробуем :)
0
Решение конечно отличное!!! Но все смазывает javascript для IE.... К сожалению пользователей ИЕ очень большое количество от 50 до 80%... ИМХО юзать js для оформления страниц зло... тем более что ie рендерит js медленнее всех :(((
Но на проектах где пользователи ИЕ составляют не доминирующий процент я думаю юзать этот метод обязательно!!!
Но на проектах где пользователи ИЕ составляют не доминирующий процент я думаю юзать этот метод обязательно!!!
0
извините за тупой вопрос...
А какого размера в пикселях должны быть эти гифы border_*.gif?
А какого размера в пикселях должны быть эти гифы border_*.gif?
0
У меня были 7 в высоту и 8 в ширину
Но естествено можно использовать и другие, поправив код
Но естествено можно использовать и другие, поправив код
0
у меня такие же эти гифы, но результат в Firefox/2.0.0.7
вот такой:
http://design.loreto.ru/ff.jpg
Пример "экспериментального" html такой:
Example
@import "main.css";
@import "print.css";
@import "fix_ie.css";
Текст
css Ваш на 100%
Почему глюк имеет место быть?
Кстати, в IE все OK!
вот такой:
http://design.loreto.ru/ff.jpg
Пример "экспериментального" html такой:
Example
@import "main.css";
@import "print.css";
@import "fix_ie.css";
Текст
css Ваш на 100%
Почему глюк имеет место быть?
Кстати, в IE все OK!
0
у вас куда-то уехали уголки левые. верхний даже видно, куда
0
у меня такие же эти гифы, но результат в Firefox/2.0.0.7
вот такой:
http://design.loreto.ru/ff.jpg
Пример "экспериментального" html такой:
http://design.loreto.ru/ex.html
css Ваш на 100%
Почему глюк имеет место быть?
Кстати, в IE все OK!
вот такой:
http://design.loreto.ru/ff.jpg
Пример "экспериментального" html такой:
http://design.loreto.ru/ex.html
css Ваш на 100%
Почему глюк имеет место быть?
Кстати, в IE все OK!
0
Пока не исследовал почему, но при strict некоректно работает
Берите этот DOCTYPE:
Берите этот DOCTYPE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+1
спасибо за подсказку, осталось лишь сравнить FF-стили для Strict и Transitional и понять что не так… *пошёл делать*
0
работает!
0
Гм... у меня в ИЕ-6, в Опере и ФФ тоже всё ОК
0
к сожалению фраза «Работает во всех современных броузерах кроме ie» значит что технология не работает.
-2
если дочитать до конца - то можно обнаружить решение и для ie
а то что для ie применяются отдельные правила (которые даже рекомендуют выносить в отдельный файл) - это уже давно норма.
а то что для ie применяются отдельные правила (которые даже рекомендуют выносить в отдельный файл) - это уже давно норма.
0
Я дочитал до конца. Мне больше нравиться CrazyForms потмоу что он кросс платформенный.
0
Возможно, вы имели в виду: кросс-браузерный
0
Спасибо за заметку. Для моего локального проекта как раз самое то, ибо всех своих пользователей перевел на Opera/Firefox, а начальнег пользуется Safari на своем Mac`е. :)
+3
предостерегаю от использования expressions в css на IE: при наличие скриптов, которые работают с dom моделью, будет тормозить. сам на эти грабли накололся.
не уверен, что во всех случаях, правда. у меня был css класс с expression на ie, который был проаплпен на input элементы. при создании input'а через скрипты начинались жуткие тормоза.
не уверен, что во всех случаях, правда. у меня был css класс с expression на ie, который был проаплпен на input элементы. при создании input'а через скрипты начинались жуткие тормоза.
+2
Если бы все так просто...
0
а где можно посмотреть на такое решение в действии?
А то полдня бьюсь - не получается полностью красиво.
А то полдня бьюсь - не получается полностью красиво.
0
К сожалению в сети пока нет. Чтобы не мучались выложу исходный код полностью:
Картинки с уголками имеют ширину 8px а высоту 7px
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style>
body{padding:30px}
.incut{background: #dff7ff;padding: 20px;}
.incut:before{content:url(i/border_tl.gif);background: url(i/border_tr.gif) no-repeat 100% 0;height: 7px;display: block;margin: -20px -20px 13px -20px;}
.incut:after{content:url(i/border_bl.gif);background: url(i/border_br.gif) no-repeat 100% 0;height: 7px;display: block;margin:13px -20px -20px -20px;}
.incut{zoom:1;behavior:expression(!this.isInserted==true ? this.isInserted=(this.innerHTML = '<span style="background: url(i/border_tr.gif) no-repeat 100% 0;height: 7px;display: block;margin: -20px -20px 13px -20px;"><img src="i/border_tl.gif" alt="" /></span>' + this.innerHTML + '<span style="background: url(i/border_br.gif) no-repeat 100% 0;height: 7px;display: block;margin:13px -20px -20px -20px;"><img src="i/border_bl.gif" alt="" /></span>') : '');}
</style>
</head>
<body>
<div class="incut">
Текст
</div>
</body>
</html>
Картинки с уголками имеют ширину 8px а высоту 7px
0
Впервые видел реализацию на http://mozilla.ru. Потом только когда начал и сам юзать понял что под ИЕ не работает нифига :)
0
экспрешены периодически подвешивают IE
0
UFO just landed and posted this here
Каких ещё старых браузерах? Написал же, что пример работает в Firefox 1, Opera 7, даже в Netscape 7.2 работает. Вы знаете ещё какие-то старые браузеры, доля которых больше 0.1%?
В очень старых браузерах пользователи просто не увидят закругленные уголки. Из-за этого сайт ваш поверьте не покинут, они даже знать не будут, что там должны быть уголки.
В очень старых браузерах пользователи просто не увидят закругленные уголки. Из-за этого сайт ваш поверьте не покинут, они даже знать не будут, что там должны быть уголки.
+1
>Куда лучше написать 4 div'а
При редизайне сайта, тоже будете по всему контенту лазить, менять на пять дивов если вдруг дизайнеры сложнее перерисуют? А если сайт большой, корпоративный? Поверьте, подобных сайтов встречал не мало.
При редизайне сайта, тоже будете по всему контенту лазить, менять на пять дивов если вдруг дизайнеры сложнее перерисуют? А если сайт большой, корпоративный? Поверьте, подобных сайтов встречал не мало.
+1
UFO just landed and posted this here
это бы прокатило лет 5 назад. сейчас народ движется к семантике, и оформление через html-код уже не катит… вот например техника Sliding doors, она вполне рабочая без затрат html, но использовать можно только для двух уголков.
+1
Конкретно каждому ответить, к сожалению, не получиться, потому буду писать здесь.
Товарищи, все эти методы закругления уголков у элементов БЕЗ использования картинок — это, конечно, прекрасно, но посмотрите в самом начале темы, как звучит задача проекта.
Если далее. Вот вы говорите, что тема не раскрыта, ибо в ie используется js. А теперь скажите, кто в основном эти люди: пользователи ie? Я сам отвечу. В основном это те, которые даже не подозревают о существовании других браузеров, более удобных, быстрых, функциональных, которые не могут себе представить, что ie, идущему в стандартной комплектации Windows, существует множество альтернатив. Вы думаете, этим людям интересно, как сделаны закругленные уголки у элементов? Они есть. И это главное.
Товарищи, все эти методы закругления уголков у элементов БЕЗ использования картинок — это, конечно, прекрасно, но посмотрите в самом начале темы, как звучит задача проекта.
Если далее. Вот вы говорите, что тема не раскрыта, ибо в ie используется js. А теперь скажите, кто в основном эти люди: пользователи ie? Я сам отвечу. В основном это те, которые даже не подозревают о существовании других браузеров, более удобных, быстрых, функциональных, которые не могут себе представить, что ie, идущему в стандартной комплектации Windows, существует множество альтернатив. Вы думаете, этим людям интересно, как сделаны закругленные уголки у элементов? Они есть. И это главное.
+2
Вот что значит Веб не для людей делают. Ведь видит W3C сколько хаков люди придумывают для этого закруглении. Почему просто нельзя -moz-boreder-round ввести в спецификацию? Ведь правила парсинга и отображения уже есть у геко.
0
по моему, они там есть, потому что это прототип того, что делается сейчас в w3c :)
0
-moz-boreder-round///как видите -moz.. это прикол мозилы, как это ввести в спецификацию??
а в css 3 есть стиль для скругления углов...
http://www.w3.org/TR/css3-background/#th…
а в css 3 есть стиль для скругления углов...
http://www.w3.org/TR/css3-background/#th…
0
после небольшой доработки удалось "завести" в режиме соответствия стандартам в Opera, SeaMonkey, Safari
всё на своих местах, кроме правого верхнего уголочка =/
что-то не придумывается как его опустить)
всё на своих местах, кроме правого верхнего уголочка =/
что-то не придумывается как его опустить)
0
а если вместо врезки используются изображения (фотки, аватарки и т.д.) и хочеЦЦа сделать у этих изображений то, что написано в заголовке темы (скруглить края) - то скорее всего не получиЦЦа... :( а жаль... способ был хорош... но с оговорками не написанными в теме
p/s/ изображение (фотку, аватарку и т.д.) хотелось бы видеть именно как img src="... , а не ложить его бекграундом...
p/s/ изображение (фотку, аватарку и т.д.) хотелось бы видеть именно как img src="... , а не ложить его бекграундом...
0
+ еще баги в FF :(
1. при увеличении шрифта - левые уголки смещаются вниз
2. при фиксированной высоте блока и малом количестве его содержимого(ну вот надо было так) - уголки соотв. становятся после контекста и вниз их ну никак не загнать...
по второй "неприятности" еще можно сказать что этот способ не для этого... - согласен
но вот первая "неприятность" сводит на нет очень даже неплохой способ избавиться от пары-тройки дивов(и прочих левых)...
1. при увеличении шрифта - левые уголки смещаются вниз
2. при фиксированной высоте блока и малом количестве его содержимого(ну вот надо было так) - уголки соотв. становятся после контекста и вниз их ну никак не загнать...
по второй "неприятности" еще можно сказать что этот способ не для этого... - согласен
но вот первая "неприятность" сводит на нет очень даже неплохой способ избавиться от пары-тройки дивов(и прочих левых)...
0
>>1. при увеличении шрифта - левые уголки смещаются вниз
Да ничего не смещается. Я наверное что-то делал не так =)
>>2. при фиксированной высоте блока и малом количестве его содержимого(ну вот надо было так) - уголки соотв. становятся после контекста и вниз их ну никак не загнать...
Ну а кто вам мешает разобраться чуть-чуть в коде и переписать пример под фиксированную высоту блока?
Да ничего не смещается. Я наверное что-то делал не так =)
>>2. при фиксированной высоте блока и малом количестве его содержимого(ну вот надо было так) - уголки соотв. становятся после контекста и вниз их ну никак не загнать...
Ну а кто вам мешает разобраться чуть-чуть в коде и переписать пример под фиксированную высоту блока?
0
да вроде разобрался... :), тока вот при XHTML 1.0 Strict ну ваще не получаецца :( под FF...
0
У самого пока руки не дошли посмотреть. Но выше devgru написал такое решение проблемы:
>>для :before и :after прописать "line-height: 0.1;".
>>для :before и :after прописать "line-height: 0.1;".
0
*украдено с сайта mozilla.ru*
0
кстати, там реализация чуть интереснее.
1) задний фон — картинка, убирающаяся к правому краю и создающая тень справа
2) нижний-правый угол — картинка огромной ширины (2000x8), содержащая не только нижний-правый угол, но и весь низ с тенью
вечером, если интересно, могу выложить вырезанный блок из мозиллы. насколько помню, он никуда не ездит ни в одном браузере.
1) задний фон — картинка, убирающаяся к правому краю и создающая тень справа
2) нижний-правый угол — картинка огромной ширины (2000x8), содержащая не только нижний-правый угол, но и весь низ с тенью
вечером, если интересно, могу выложить вырезанный блок из мозиллы. насколько помню, он никуда не ездит ни в одном браузере.
0
ёёё, там как раз и стоит font-size: 1px;
p.s. приятно, однакоЖ..., самому дойти до этого :))))
p.s. приятно, однакоЖ..., самому дойти до этого :))))
+1
ну так я ж тоже не просто так пишу... потому как надо как раз мне такое сча...
про "line-height: 0.1;" и сам хотел написать тока во опередили меня :)
тока я бы написал line-height: 0 - это надо для Оперы, а для FF уже решил еще одной строкой... font-size: 0;, если без нее то получается то что писал выще - уголки едут вниз (ну уже понятно из-за чего)...
про "line-height: 0.1;" и сам хотел написать тока во опередили меня :)
тока я бы написал line-height: 0 - это надо для Оперы, а для FF уже решил еще одной строкой... font-size: 0;, если без нее то получается то что писал выще - уголки едут вниз (ну уже понятно из-за чего)...
0
>>Ну а кто вам мешает...
мешает спецификация:
12.1 Псевдоэлементы :before и :after
Агенты пользователей должны игнорировать следующие свойства с псевдоэлементами :before и :after: 'position', 'float', свойства списков и свойства таблиц.
если можно еще "как-то" это сделать - очень было бы интересно, потому как пригодилось бы...
мешает спецификация:
12.1 Псевдоэлементы :before и :after
Агенты пользователей должны игнорировать следующие свойства с псевдоэлементами :before и :after: 'position', 'float', свойства списков и свойства таблиц.
если можно еще "как-то" это сделать - очень было бы интересно, потому как пригодилось бы...
0
Не думаю, что автору удастся открыть что-либо новое в CSS верстке(рад если ошибаюсь) :).
Все уже открыто и исследовано до него. Да и странный топик. Вроде как велосипед изобретён уже давно.
Больше как 3 года все нормально катаются. Жаль, что кто-то не в курсе. Есть полно валидных решений на чистом CSS.
А использовать JS и кучу вещи, которые IE не поддерживает - увольте, читайте книжки(блоги).
1)Не понятно кто и как рейтингу :). * n1313 8 октября 2007 15:31 дал корректную ссылку, где начинающие могут немного посмотреть на работы профессионалов, и кто это оценил?
2) Кто мне приведёт ссылку на СТАНДАРТ в CSS? Ставлю ящик пива. Есть спецификация(подчеркнуто), которая написана несколько туманно и некоторые вещи отданы на откуп пользовательским агентам(броузерам), так что на IE местами нечего пинать. Сравните время его выхода со временем последней редакции спецификации CSS 2
Все уже открыто и исследовано до него. Да и странный топик. Вроде как велосипед изобретён уже давно.
Больше как 3 года все нормально катаются. Жаль, что кто-то не в курсе. Есть полно валидных решений на чистом CSS.
А использовать JS и кучу вещи, которые IE не поддерживает - увольте, читайте книжки(блоги).
1)Не понятно кто и как рейтингу :). * n1313 8 октября 2007 15:31 дал корректную ссылку, где начинающие могут немного посмотреть на работы профессионалов, и кто это оценил?
2) Кто мне приведёт ссылку на СТАНДАРТ в CSS? Ставлю ящик пива. Есть спецификация(подчеркнуто), которая написана несколько туманно и некоторые вещи отданы на откуп пользовательским агентам(броузерам), так что на IE местами нечего пинать. Сравните время его выхода со временем последней редакции спецификации CSS 2
0
... могут немного посмотреть на работы профессионалов
а чем этот метод не профессионален???
по мне так лучше в коде видеть запись вида
<div class="box">
текст
</div>
чем как у "бескартиночных" профессионалов с cssplay
<div class="box">
<b class="top"><b class="b1"/><b class="b2"/><b class="b3"/><b class="b4"/></b>
<div class="boxcontent">
текст
</div>
<b class="bottom"><b class="b4b"/><b class="b3b"/><b class="b2b"/><b class="b1b"/></b>
</div>
или с теми же картинками как минимум еще с пару блоками внутри (к примеру, без учета конкретного дизайна)
<div class="box">
<div class="top"><div></div></div>
текст
<div class="bottom"><div></div></div>
</div>
да, есть у "нас" 6-ка, всмысле ИЕ :)... ниче с этим не поделаешь...
0
При маленьких уголках добавьте font-size: 1px - поможет
0
А ещё можно таким способом рамки создавать:
http://illandril.net/jQuery/transparentCorners/cornerTests.html
Проверял в разных броузерах-> (IE6&7/Opera/FF) - работает!
http://illandril.net/jQuery/transparentCorners/cornerTests.html
Проверял в разных броузерах-> (IE6&7/Opera/FF) - работает!
0
More. Я убил на это дофига времени.
Есть замечательная ошибка в IE, "operation aborted". Возникает когда пытаемся изменить DOM-дерево до загрузки всей страницы. Может возникнуть при использовании данного метода.
Вариант лечения:
.incut{zoom:1;behavior:expression(!this.isInserted==true && iDOMLoaded ? this.isInserted=(this.innerHTML = '<span style="background: url(i/border_tr.gif) no-repeat 100% 0;height: 7px;display: block;margin: -20px -20px 13px -20px;"><img src="i/border_tl.gif" alt="" /></span>' + this.innerHTML + '<span style="background: url(i/border_br.gif) no-repeat 100% 0;height: 7px;display: block;margin:13px -20px -20px -20px;"><img src="i/border_bl.gif" alt="" /></span>') : '');}
И перед </body>:
Есть замечательная ошибка в IE, "operation aborted". Возникает когда пытаемся изменить DOM-дерево до загрузки всей страницы. Может возникнуть при использовании данного метода.
Вариант лечения:
.incut{zoom:1;behavior:expression(!this.isInserted==true && iDOMLoaded ? this.isInserted=(this.innerHTML = '<span style="background: url(i/border_tr.gif) no-repeat 100% 0;height: 7px;display: block;margin: -20px -20px 13px -20px;"><img src="i/border_tl.gif" alt="" /></span>' + this.innerHTML + '<span style="background: url(i/border_br.gif) no-repeat 100% 0;height: 7px;display: block;margin:13px -20px -20px -20px;"><img src="i/border_bl.gif" alt="" /></span>') : '');}
И перед </body>:
<script type="text/javascript">iDOMLoaded = 1;</script>
0
можно немного по другому, хотя кому как нравится.
вобщем вот мой вариант для ИЕ
функция insertAdjacentHTML вместо прямого обращения к innerHTML, соотв с параметром 'afterBegin' вставляет после начала тэга (перед контентом - аналог :before) и 'beforeEnd' (аналог :after) - вставляет до закрытия тэга...
вместо проверки !this.isInserted==true используется runtimeStyle.ххх что заставляет ИЕ не пересчитывать expression при каждом движении мыши...
подробней описано тут http://lusever.ru/proceedings/thin_css/index.html
.incut {
zoom:expression(
runtimeStyle.zoom = 1,
insertAdjacentHTML('afterBegin','...ххх...'),
insertAdjacentHTML('beforeEnd', '...ххх...')
)
}
вобщем вот мой вариант для ИЕ
функция insertAdjacentHTML вместо прямого обращения к innerHTML, соотв с параметром 'afterBegin' вставляет после начала тэга (перед контентом - аналог :before) и 'beforeEnd' (аналог :after) - вставляет до закрытия тэга...
вместо проверки !this.isInserted==true используется runtimeStyle.ххх что заставляет ИЕ не пересчитывать expression при каждом движении мыши...
подробней описано тут http://lusever.ru/proceedings/thin_css/index.html
.incut {
zoom:expression(
runtimeStyle.zoom = 1,
insertAdjacentHTML('afterBegin','...ххх...'),
insertAdjacentHTML('beforeEnd', '...ххх...')
)
}
+3
я как, слабо владеющий javascript хочу спросить поподробнее...
вот, например вместо ...ххх... нужно писать сам код, который хочу вставить? к примеру
для 'afterBegin'
вот, например вместо ...ххх... нужно писать сам код, который хочу вставить? к примеру
<span style="background: url(i/border_tr.gif) no-repeat 100% 0;height: 7px;display: block;margin: -20px -20px 13px -20px;"><img src="i/border_tl.gif" alt="" /></span>
для 'afterBegin'
0
Отлично. Спасибо ;-)
0
великолепно.
отец.
большое спасибо за экспрэшены для after и before
совершенно немогу понять людяй кричащих что expression плохо, зато несемантические элементы и примитивизм в css - это хорошо.
а чтоб экспрэшены не подвешиали их, как верно заметили, нужно оптимизировать и вызывать лишь один раз.
отец.
большое спасибо за экспрэшены для after и before
совершенно немогу понять людяй кричащих что expression плохо, зато несемантические элементы и примитивизм в css - это хорошо.
а чтоб экспрэшены не подвешиали их, как верно заметили, нужно оптимизировать и вызывать лишь один раз.
0
А кто-нибудь навешивал эти уголки на картику?
Никак не получается вывести их наверх, если картинка задается тегом img, а не бекграундом, то она всегда поверх блоков :before и :after, какое бы позиционирование и z-index им не задавай…
Никак не получается вывести их наверх, если картинка задается тегом img, а не бекграундом, то она всегда поверх блоков :before и :after, какое бы позиционирование и z-index им не задавай…
0
Картинка — это replaced element, т.е. заменяемый элемент. Ими являются, если я не путаю, еще и поля форм. После применения всех правил к этим элементам весь блок заменяется на другое содержимое. Соответственно, для картинок и элементов форм бессмысленно применять :before и :after — они сработают только когда картинка не сможет загрузиться.
+1
Спасибо за инфу. Я псевдоэлементы навешивал на содержащий блок, но картинка все равно поверх них.
0
Уж извините за рекламу, но я эту верстку сейчас делаю, и там как раз нужная вам проблема — wikimart.ru
В правом блоке картинки окружены рамочкой с закруглением — посмотрите.
В правом блоке картинки окружены рамочкой с закруглением — посмотрите.
+1
Спасибо, получилось. Все дело оказалось в отрицательном z-index для картинки, без него никак.
0
Хм… у меня вообще z-index'ы не использовались в этом месте — всё само правильно встало… Может дело в том, что у меня картинка, обрамляющий блок и рамка объявлены блочными…
Но я рад, что у вас получилось)
Но я рад, что у вас получилось)
0
Пробовал, правда не на картинку, а на див с картинкой
довольно геморно это…
довольно геморно это…
0
Так и я на див… У вас пример не завалялся?
0
Ну например, здесь:
www.gymn1sam.ru/
В правой колонке картинка на главной
и в контенте есть
Там проблема в том, что float нужен
www.gymn1sam.ru/
В правой колонке картинка на главной
и в контенте есть
Там проблема в том, что float нужен
+1
Идеальний пост Назад в прошлое
, в предверии 2017-го.
+1
Вы пишете, что способ устарел.
А каким современным способом можно решить поставленную задачу?
Как сделать закругления у блока div?
А каким современным способом можно решить поставленную задачу?
Как сделать закругления у блока div?
0
Sign up to leave a comment.
Делаем закругленные уголки с помощью псевдоэлементов: before и: after