Как делать такую тень?

[Verder]

прозрачный бордер работает, но все-же лучше от этого воздержаться

Блин, да чем вариант со спанами то плох? Все просто, наглядно, очевидно и быстро. Нафиг городить всякие маргины и.т.д.?

Да я же с тобой солидарен.

Да я запутался уже просто

[Softlink]

Да я запутался уже просто

вот-вот Ребят, mishka, psywalker, резюмируйте кто-нибудь тему, чтобы в итоге проще было уяснить Пожалуйста.

[psywalker]

mishka,

Но как знаем что маргины имеют свойство коллапсироваться и это может быть проблемой, не критичной, но все же.

Не вижу тут проблемы, я ставлю нижний маргин и чем это плохо? Нижний же блок к ниму не прикоснётся?

Verder,

Блин, да чем вариант со спанами то плох? Все просто, наглядно, очевидно и быстро. Нафиг городить всякие маргины и.т.д.?

Не дружище, извини, но у меня другой подход к работе. Я не могу сделать калич, если умею по другому.

Да я запутался уже просто

вот-вот Ребят, mishka, psywalker, резюмируйте кто-нибудь тему, чтобы в итоге проще было уяснить Пожалуйста.

Я своё решение уже говорил, да и Мишка тоже.

[mishka]

Как по мне, так у нас будет одинаковый html код, с тем лишь отличием что у Макса блок с тенью будет на абсолюте, а у меня в общем потоке.

Родительский блок нужен в обеих случаях.

[psywalker]

Как по мне, так у нас будет одинаковый html код, с тем лишь отличием что у Макса блок с тенью будет на абсолюте, а у меня в общем потоке.

У меня на один контейнер(сказано не ради мерения письками) меньше и вариант я считаю красивее и всё же правильнее.

[mishka]

просто я против такого вот маргина внизу, под тень.

Что будет если этот блок будет джсом (jQuery) слайдится? slideUp, slideDown? Тень во время слайда будет обрезаться.

Неплохой холиварчик получился

С чего ты взял что тот подход который я предлагаю - калич, а тот что ты - nice

Это, вроде, к Вердеру относилось

Да я ж, просто, предлагаю почти то же что и Verder

[mishka]

Ну видимо я просто другой человек и не могу принять такой подход.

Что скажешь на мой пост выше?

Я говорю что у подхода с абсолютом 2 минуса (пока только 2 нашел)

1. Колапс маргинов

2. Тень будет пропадать при скрытии открытии блока, например через slideUp(), slideDown().

Ну мля как обычно, Вердер виноват. А фигли, привыкли уже, давайте...

Блин, сделайте меня модератором в Обсуждении, я вообще молчать буду, только банить. Вот.

Не, я серьезно не виноват. Что бы я не сделал, плохое или хорошее, на этом форуме тема вырастает до гигантских размеров.

Вот щас я что плохого сделал? А? Макет выложил людям?

Карма, мля.

+1

[psywalker]

mishka,

1. Колапс маргинов

2. Тень будет пропадать при скрытии открытии блока, например через slideUP(), slideDown().

1. Какой коллапс? Что плохого в нижнем маргине? Покажи мне наглядный пример этого коллапса.

2. А отступы делать твой джиквери не умеет?

Каличи я имел ввиду, большинство подходов Вердера. Т.е. человека, который срал с большой колокольни на вёрстку и ему абсолютно похеру, что она из себя представляет и как сделана.

Ну видимо я просто другой человек и не могу принять такой подход.

Холиварчик, да, ничего

Ну мля как обычно, Вердер виноват. А фигли, привыкли уже, давайте...

Блин, сделайте меня модератором в Обсуждении, я вообще молчать буду, только банить. Вот.

Не, я серьезно не виноват. Что бы я не сделал, плохое или хорошее, на этом форуме тема вырастает до гигантских размеров.

Вот щас я что плохого сделал? А? Макет выложил людям?

Карма, мля.

Да нее, прекрати, молодец что макеты выложил, полезное дело. Я же не виновника в тебе увидел, а в принципе сказал, что тебе похрену на вёрстку. Ну похрену, ну и лана, это твои ж дела, у меня просто другой подход к вёрстке, да и всё.

[mishka]

mishka,

1. Колапс маргинов

2. Тень будет пропадать при скрытии открытии блока, например через slideUP(), slideDown().

1. Какой коллапс? Что плохого в нижнем маргине? Покажи мне наглядный пример этого коллапса.

2. А отступы делать твой джиквери не умеет?

1. Я же сказал - не критично, но всеже. Флотнул блок и уже считай что внизу нету маргина, так как он не будет коллапсится с верхним маргином нижеследующего блока. Не флотнул - вот и учитывай что там внизу маргин есть.

Еще раз скажу - это не критично, но может запутать другого человека.

2. какие отступы? блок меняет высоту, во время смены высоты overflow: hidden обязателен, куда тень подевается при overflow: hidden? И виной тут не jQuery (так не любимый тобой), а вообще общий подход к такому слайду.

[psywalker]

mishka,

1. Колапс маргинов

2. Тень будет пропадать при скрытии открытии блока, например через slideUP(), slideDown().

1. Какой коллапс? Что плохого в нижнем маргине? Покажи мне наглядный пример этого коллапса.

2. А отступы делать твой джиквери не умеет?

1. Я же сказал - не критично, но всеже. Флотнул блок и уже считай что внизу нету маргина, так как он не будет коллапсится с верхним маргином нижеследующего блока. Не флотнул - вот и учитывай что там внизу маргин есть.

Еще раз скажу - что не критично, но может запутать другого человека.

2. какие отступы? блок меняет высоту, во время смены высоты overflow: hidden обязателен, куда тень подевается при overflow: hidden? И виной тут не jQuery (так не любимый тобой), а вообще общий подход к такому слайду.

2. На крайняк я бы сделал, либо бордер нижний прозрачный или общий контейнер с паддингом нижним.

[mishka]

2. На крайняк я бы сделал, либо бордер нижний прозрачный или общий контейнер с паддингом нижним.

Я же говорил что лучше от бордера воздержаться. И бордер не выход, так как он тоже обрежет при overflow: hidden

[sigma77]

Да блин хватит вам про верстку, тут уже в другом русле беседа пошла

Прикольно psywalker - 11 111, Verder - 1 000

[Softlink]

в общем, нашел я всем развлечение в этот спокойный воскресный вечер.

Решил сделать так - http://jsfiddle.net/Sm8tb/. Для меня это более понятно и кажется верно. И в центр можно большую тень затолкать при необходимости.

[psywalker]

2. На крайняк я бы сделал, либо бордер нижний прозрачный или общий контейнер с паддингом нижним.

Я же говорил что лучше от бордера воздержаться. И бордер не выход, так как он тоже обрежет при overflow: hidden

Тогда если уж будет этот крайний случай, то я сделаю общий контейнер.

И ещё всё таки я не понял про маргины, в чём подвох? Вроде ок всё? http://jsfiddle.net/Sm8tb/1/

Да блин хватит вам про верстку, тут уже в другом русле беседа пошла

Прикольно psywalker - 11 111, Verder - 1 000

Да, кстати

в общем, нашел я всем развлечение в этот спокойный воскресный вечер.

Решил сделать так - http://jsfiddle.net/Sm8tb/. Для меня это более понятно и кажется верно. И в центр можно большую тень затолкать при необходимости.

Отлично, но тогда параграф надо бы ещё в див обернуть. Чтобы было два контейнера отдельных. В одном контент, в дургом тень.

[mishka]

Тогда если уж будет этот крайний случай, то я сделаю общий контейнер.

Вот, я же говорю что код html одинаковый будет, чтобы не путать потом других, там есть блок там нету.

[psywalker]

Тогда если уж будет этот крайний случай, то я сделаю общий контейнер.

Вот, я же говорю что код html одинаковый будет, чтобы не путать потом других, там есть блок там нету.

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

[Softlink]

Отлично, но тогда параграф надо бы ещё в див обернуть. Чтобы было два контейнера отдельных. В одном контент, в дургом тень.

а смысл в нем? Чтобы манипулировать ими проще было?

Холиварчик, да, ничего

да, это я могу. За неделю уже вторая тема такая у меня выходит

[psywalker]

Отлично, но тогда параграф надо бы ещё в див обернуть. Чтобы было два контейнера отдельных. В одном контент, в дургом тень.

а смысл в нем? Чтобы манипулировать ими проще было?

Да. И вообще нужно всегда отделять логические блоки друг от друга.

Тогда если уж будет этот крайний случай, то я сделаю общий контейнер.

Вот, я же говорю что код html одинаковый будет, чтобы не путать потом других, там есть блок там нету.

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

А за какое время ты сверстаешь этот макет, Psywalker? Час, два? Просто интересно.P.S.Хм... а в группу "Эксперт" после скольки сообщений входят? Или это за заслуги перед отечеством?

Сверстаю за дня два. У меня же другой подход, ты разве забыл?

Насчёт "Эксперта". В эту группу попадают только адекватные и не всехпосылающие люди

да, это я могу. За неделю уже вторая тема такая у меня выходит

Молодец!

[Softlink]

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

Verder накосячил? Или к чему такой ход? Только задачу усложняет.

[Verder]

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

Verder накосячил? Или к чему такой ход? Только задачу усложняет.

Ну поставь как нужно, чтобы не вылезала. Может я случайно сдвинул слой.

Edited June 26, 2011 by Verder

[Shift-Web]

Можно кинуть пустой элемент под картинку с определёнными размерами, а дальше box-shadow c вектором на изображение и, возможно, z-index;

Для иксовой вёрстки будет что то вроде:

<img src="#" alt="" />
<i></i>

i {
 width: [размер картинки];
 height: 30px;
 display: block;
 box-shadow: #444 0px -30px 60px 1px; /* позиционирование тени: left top blur shadowed-area */
}

Чтобы не делать лишних элементов, тень можно бросить от любого соседнего элемента с примерно такими же размерами.

Вариант для пятака. Образно ...

<figure>
  <figcaption>A view of the pulpit rock in Norway</figcaption>
  <img src="img_pulpit.jpg" width="304" height="228" />
</figure>

figcaption {
 width: [размер картинки];
 height: 30px;
 display: block;
 top: 40px;                          /* shift it down */
 z-index: 3;                         /* drop to floor layer */
 position: relative;
 box-shadow: #444 0px 50px 60px 1px; /* shadow positioning: left top blur shadowed-area */
}

img {
 position: relative;
 z-index: 5;
}

С размерами и позицией тени я на глаз прописал. Нужно будет подгонять.

Edited June 26, 2011 by Shift-Web

[psywalker]

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

Медведь, доводы, которые ты приводил, это высосанные из пальца аргументы.

1. С маргинами проблем не будет, создай их пожалуйста, чтобы я убедился, что ты прав.

2. С твоим слайдером я тоже совершенно не вижу проблемы. Я не знаю джиквери, НО на чистом ЖС я делал слайдеры и всегда мог, если надо, поставить лишние пиксели при закрытии, чтобы overflow; их не съедал. Ну неужели такую простую вещь нельзя сделать на джиквери? Я просто не верю в это, либо ты плохо знаешь джиквери.

Я за абсолют, потому что во-первых мне НЕ нужно создавать лишний контейнер, я просто брошу блок с тенью в блок с контентом, отпозиционирую его и забуду о нём. Мне не нужно париться о том, что мой блок с тенью может случайно сдвинуться на несколько пк, при малом контенте и мало того, мой блог с тенями всегда будет в одном логическом контейнере, который не будет разделён на две или больше частей. Это очень важно, например когда тот-же программер может тупо взять блок целиком, не парясь о том, что тень лежит где-то в другом блоке. Кстати, с моим подходом общая сумма блоков меньше, что в принципе ерунда, но всё таки тоже какой-то маленький плюс.

Так что пока вы не переубедите меня в обратном, я буду спорить!

[SelenIT]

Жалко, что вот каким-то таким макаром задача "в лоб" не решается. Неудобно, что нельзя задать тени размытие в процентах, да еще по одной оси... или всё-таки как-то можно?

[mishka]

Макс, да прекрати ты дуться.

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

Что ты там как делал на чистом мне всеравно, я не бьюсь головой в стену пытаясь доказать что лучше, чистый или джквери, так как это все джс, пофиг какой фреймворк юзать (или не юзать), главное правильно и оптимально по времени решить задачу.

<div class="box">
    <div class="frame">
        <p>Lorem ipsum dolor sit amet consectetuer lacus Nullam Nulla urna elit. Sed habitasse nisl platea.</p>
    </div>
    <span class="box-shadow">
        <span class="l"></span>
        <span class="r"></span>
        <span class="c"></span>
    </span>
</div>

Такой же код html будет и у тебя.

[Shift-Web]

Жалко, что вот каким-то таким макаром задача "в лоб" не решается. Неудобно, что нельзя задать тени размытие в процентах, да еще по одной оси... или всё-таки как-то можно?

Наверняка есть решение и этому. Я сам только недавно начал всякие фичи пробовать. Думаю можно использовать transform и border-radius, но это уже не IE. Тени же подчиняются логике присущей предку, поэтому его можно "кукожить" как угодно. Для размытия 2 последние цифры и можно opacity добавить.

box-shadow: 0 20px 10px 10px #fff

Edited June 27, 2011 by Shift-Web