Комментарии на: Универсальный способ декорирования блоков

От: Лев

Лев — Wed, 05 May 2010 10:28:06 +0000

Лично мне нравятся вот эти примеры - нет картинок - к сожалению, есть жаба

ruzee borders - http://lev19888.narod.ru/10.html
http://lev19888.narod.ru/11.html

От: Андрей

Андрей — Tue, 20 Apr 2010 22:52:57 +0000

Сергей, очень понравился ваш пример, начал с ним разбираться и в процессе заметил, что при масштабировании в нижнем правом углу появляется зазор.

От: GreLI

GreLI — Mon, 19 Apr 2010 11:28:03 +0000

Роман, смотрите мой пример. Как решение случая с шириной, зависящей от содержимого, он подходит и для строчных блоков.

От: dsh-creative.ya.ru/

dsh-creative.ya.ru/ — Thu, 25 Feb 2010 13:49:44 +0000

Не слишком универсальный способ, если нужно декорировать блок по высоте неограниченного размера

От: Роман

Роман — Mon, 01 Feb 2010 08:45:52 +0000

Поддерживаю вопрос Ивана, на счет декорированного “инлайн” элемента в IE6
Блоковый элемент вообще не очень универсальный. Т.к. инлайн-элемент можно легко переделать в блок, а вот блок в инлайн уже не так просто.

Уже неделю потихоньку ковыряюсь с этой конструкцией, но пока не нашел окончательного универсального решения для IE6. Вся сложность заключается как раз в растягивании элементов по вертикали.

vii, reverse и Олег Коровин решают эту проблему перегоняя IE6 в backCompat mode с помощью вставки
Получается почти идеальное решение. И можно даже смирится и писать всё учитывая особенности quircksmode, хотя в некоторых случаях это может быть не приемлимо.

Так же, можно сделать эту конструкцию в css1Comp режиме, но она работает только если декорированный объект находится в статичном блоке. Если блок имеет %% размер, то при изменении размера окна декорации умирают.
При это так же необходимо подключать фон только через фильтр… правда еще не до конца разобрался с этим.

В принципе, это все относится к блокам с полу-прозрачным фоном, т.к. если декоративные элементы без прозрачности - это решается растягиванием элементов по вертикали до “заоблачных” размеров.

От: Иван

Иван — Fri, 29 Jan 2010 19:13:57 +0000

Сергей, а можно пример работающего декорированного инлайн-блока в IE6?

От: Артур

Артур — Tue, 26 Jan 2010 11:34:36 +0000

Сергей, огромное спасибо!
Буду учиться, учиться и еще раз учиться!

От: MyFreeWeb

MyFreeWeb — Mon, 11 Jan 2010 17:30:30 +0000

#mycoolblock {
border-radius: 1em;
box-shadow: rgba(10,10,10,0.5) 5px 5px 5px; }
И все!
Зачем делать красивости в IE6? Самое правильное решение: в старых браузерах все показывается без теней и уголков. И надпись “чтобы было красиво и быстро, установи Google Chrome”.
Полная поддержка IE6 (с красивостями) тормозит развитие нормальных браузеров.

От: Иван

Иван — Wed, 06 Jan 2010 21:02:26 +0000

Сергей, спасибо за труд! Добавлю, что для корректной работы в FF2- нужно добавить .d-shadow какой-нибудь z-index.

boronchiev: насколько я понимаю, это из-за того, что у .d-shadow-wrap внутренняя высота больше внешней из-за распирающих верхних блоков, и прокрутка срабатывает внутри него. Если у .d-sh-tl и .d-sh-tr заменить height: 1500px; на bottom: 0; или height: 100%; padding-bottom: 28px;, это исправит ситуацию для всех, кроме IE6. Для него кроме expression ничего пока не придумал.

От: boronchiev

boronchiev — Mon, 04 Jan 2010 16:30:27 +0000

Добрый вечер!
Столкнулся с непонятным мне поведением браузеров, разбирая пример. При переходе к якорю, находящемуся внутри декорированного блока, текст подскакивает вверх и обрезается блоком .d-shadow-wrap без учета его полей. Такое поведение наблюдается во всех браузерах (тестировал только под Windows), кроме Opera.
На основе Вашего примера сделал тест http://boronchiev.ru/cor/
Если убрать элементы, которые декорируют верхние углы, поведение становится ожидаемым мною. Пока не смог найти объяснение. Буду рад, если Вы подскажите, в каком направлении думать.