Тень вокруг страницы

[EDIsaev]

Прорисовал тень, каким образом её лучше разметить как background из пяти image?

Желательно не под фиксированный размер

пример нашёл, но т.к. у меня полупрозрачное изображение он накладывается и получается ерунда

_http://jsfiddle.net/c4ZtJ/1/

[klierik]

что должно быть в итоге? скрин!

[lexxcode]

что мешает использовать просто тень? http://jsfiddle.net/alexriz/RvQ8K/

[EDIsaev]

что должно быть в итоге? скрин!

что мешает использовать просто тень?

просто тень ограничена в возможностях, хочется для себя разобраться

[red4pony]

просто тень ограничена в возможностях

Ограничена фантазия и способность ее применения. Линк. Захотите поменять размытие/цвет/форму на пару пунктов и Вам придется перерисовывать все Ваши 5 изображений.

[EDIsaev]

Захотите поменять размытие/цвет/форму на пару пунктов и Вам придется перерисовывать все Ваши 5 изображений.

согласен... да именно перерисовывать хочу все 5)

а за статью спасибо, очень интересно, пригодится

Edited May 22, 2013 by EDIsaev

[lexxcode]

да именно перерисовывать хочу все 5)

Погодите, так вас просто интересует олдскульный метод, для общего развития?

[red4pony]

Это возможно поможет Вам(просмотрите всю страницу, там добавочно есть про тени). Ну и естественно здесь

[EDIsaev]

Погодите, так вас просто интересует олдскульный метод, для общего развития?

не то чтобы... просто как только используется opacity на слабых компьютерах(как у заказчика например) браузер начинает ужастно тормозить... при слабом интернете изображения типа 600х600 "для тени" видим как медленно грузится, выглядит ужастно. потом проблемы кроссбраузерности из-за различных обособланных теней.

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

Это возможно поможет Вам

там всё, что связано с тенями не работает в IE

Ну и естественно

"Ширина изображения тени зависит от цели ее использования, например, если планируется устанавливать тень для рисунков шириной не более 600 пикселов, то имеет смысл сделать такой же размер и у тени."

Грузить такой image для простой тени думаю не лучшее решение... потом если надо перерисовать придётся так же переделывать изображения

Edited May 22, 2013 by EDIsaev

[red4pony]

Грузить такой image для простой тени думаю не лучшее решение

Лучшее решение это box-shadow. А по поводу IE, используйте подход прогрессивного улучшения. То есть, браузеры которые не поддерживают какую-то технологию не будут ее отображать и при этом пользователь не будет знать что чего-то не хватает, но оформление не будет намного хуже от этого смотреться. А пользователи с современными браузерами получат дополнительное визуальное преимущество, тем самым Вы будете стимулировать пользователей переходить на новые версии браузеров (к слову, IE 10 поддерживает практически все). И этим Вы поспособствует наступления светлого будущего, когда умрут слова "кроссбраузерность" и "костыли".

P.S. Вас многие будут отговаривать бросить архаизм с изображениями.

[klierik]

в таком случае тебе нужен подход:

CSS:

html, body { height: 100%; }
.layout {
width: 100%;
height: 100%;
}

HTML:

table.layout>(tr.layout__row_top>td.layout__cell_left+td.layout__cell_center+td.layout__cell_right)+(tr.layout__row_middle>td.layout__cell_left+td.layout__cell_center+td.layout__cell_right)+(tr.layout__row_bottom>td.layout__cell_left+td.layout__cell_center+td.layout__cell_right)

теперь у тебя есть сетка 9х9 на основе которой можешь создавать любую тень.

[lexxcode]

не то чтобы... просто как только используется opacity на слабых компьютерах(как у заказчика например) браузер начинает ужастно тормозить... при слабом интернете изображения типа 600х600 "для тени" видим как медленно грузится, выглядит ужастно. потом проблемы кроссбраузерности из-за различных обособланных теней. а "олдскульный метод" он же везде будет работать быстро, без проблемм и листания. верстается только проблеммно

Тут на самом деле не все так однозначно. opacity уже давно не приводит к каким-то ощутимым тормозам, css тени в принципе тоже, ну может за исключением каких-то сверх-сложных ситуаций. В подавляющем большинстве случаев аппарат на котором отображаются страницы, достаточно мощный чтобы все это крутить без проблем. Если же у клиента действительно настолько слабая машина, то вероятнее всего у него и браузер далеко не первой свежести. Тут имеет смысл, если уж настолько критична доступность страниц на устаревших браузерах, то просто сделать деградацию для них, либо пойти путем прогрессивного улучшения. Так ваша страница явно будет гоораздо лучше выглядеть на современных браузерах, а на устаревших будет вид попроще, но при этом вы выиграете, и на трафике, и на скорости работы. А за использование графики для теней, пользователи не скажут спасибо, особенно те кто будут заходить с мобильных устройств.

Так, что я думаю тут нужно очень серьезно об этом задуматься.

Так для общего развития, самого себя, покрутить эти методы с картинками считаю полезным, но использовать их на деле особого смысла нету.

[EDIsaev]

в таком случае тебе нужен подход:

да

но возникает ряд вопросов:

1. как сделать чтобы таблица была как бы в background и не мешала контенту?

2. как задать размеры например стоки с 3 столбцами:

{15px | всё остальное пространство(т.к. тут repeat) | 15px }

Edited May 22, 2013 by EDIsaev

[klierik]

1. контент хранится в td.layout__cell_center

2. непонятен вопрос.

выше представленный мною код это краткая запись (ZenCoding). полная:

<table class="layout">
    <tr class="layout__row_top">
        <td class="layout__cell_left"></td>
        <td class="layout__cell_center"></td>
        <td class="layout__cell_right"></td>
    </tr>
    <tr class="layout__row_middle">
        <td class="layout__cell_left"></td>
        <td class="layout__cell_center"></td>
        <td class="layout__cell_right"></td>
    </tr>
    <tr class="layout__row_bottom">
        <td class="layout__cell_left"></td>
        <td class="layout__cell_center"></td>
        <td class="layout__cell_right"></td>
    </tr>
</table>

Как видно из кода каждый элемент сетки имеет своё имя. Все можно описать отдельно для каждого элемента сетки. Размеры, картинки, repeat -- все возможно.

[EDIsaev]

контент хранится в td.layout__cell_center

если так, то верхняя правая часть тени будет выше контента, так же как и левая нижняя будет левее

а если задать высоту первой строки и столбца 0 (чтобы это выровнить), то части самой рамки не будут видны, т.к. они в таблице

Edited May 22, 2013 by EDIsaev

[klierik]

если требуется положить текст на тень то ичего не мешает контент положить в div (а он сокрее всего и так там будет лежать) и этому же диву задвать отрицательные отступы

.content {
margin: -15px;
}

[EDIsaev]

и этому же диву задвать отрицательные отступы

или я не вижу всю картину или вы меня путаете)

если этому диву в центре дать отрицательный отступ вверх и влево на 15 px, то он на эти 15 px отступит от своей тени

[klierik]

как же он может отступить, если значение отрицательное?

margin: -15px;

[EDIsaev]

Ага, получилось уже почти то, что надо)

а как сделать, чтобы контент был на 100% по высоте?

пока получается только с фиксированным размером

_http://jsfiddle.net/c4ZtJ/3/

ps: хотя ладно, там в зависимости от контента расширяется.

всем огромное спасибо за подсказки

Edited May 27, 2013 by EDIsaev