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

[psywalker]

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

Дружище, а скажи плиз, как по твоему правильно делать такие тени?

mishka

Да нее Медведь, ты чегооо, прекрати, я даже и не думал дуться и т.д. Спор только чисто ради опыта, я из него уроки извлекаю, ты ж меня знаешь

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

Насчёт этой (уже надоедливой тени) отдаю предпочтение абсолюту, так как отталкиваюсь от следующих мыслей:

1. Тени в нашем случае, это не главная часть сайта и не её основное содежимое, поэтому даже в случае с её отсутствием проблем с контентом быть не должно.

2. Тень не заслуживает места в потоке, не такая уж великая вещь, + это оформительская деталь, так что как я уже говорил, в идеале вообще можно сделать её через :after (как показал SelenIT) и забыть.

3. Блок с абсолютом я могу оттянуть точно на 10пк вниз, зная, что при любом раскладе он всегда будет там.

И это только некоторые пункты.

Повторюсь, что спор ради знаний, а не ради спора!

[Softlink]

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

а мне этот вариант понравился тоже. Правда, не до конца понял, как здесь все работает.

[buddah]

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

а мне этот вариант понравился тоже. Правда, не до конца понял, как здесь все работает.

И я, и я, и я того же мнения.

[psywalker]

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

а мне этот вариант понравился тоже. Правда, не до конца понял, как здесь все работает.

Да там всё просто, -120px 4px 10px 5px #888;

1. -120px - смещает тень на -120пк, т.е. влево,

2. 4пк - это смещение по оси y, т.е. вниз в нашем случае.

3. 10пк - это размытие тени

4. 5пк - а вот это её растягивание чтоли во все стороны сразу (нужно у SelenIT уточнить.)

5. #888 - Ну и цвет.

[Softlink]

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

а мне этот вариант понравился тоже. Правда, не до конца понял, как здесь все работает.

Да там всё просто, -120px 4px 10px 5px #888;

1. -120px - смещает тень на -120пк, т.е. влево,

2. 4пк - это смещение по оси y, т.е. вниз в нашем случае.

3. 10пк - это размытие тени

4. 5пк - а вот это её растягивание чтоли во все стороны сразу (нужно у SelenIT уточнить.)

5. #888 - Ну и цвет.

как она образовалась в двух местах с пробелом в середине?

я так понял, все дело в этом пункте:

box-shadow: 0 20px 10px 10px #fff, 120px 4px 10px 5px #888, -120px 4px 10px 5px #888;

первые четыре цифры делают тень белую, которая как раз находится в центре, вторые 4 привязывают ее к правому краю, а последние 4 к левому, так?

Получается, если мы задаем отступы в пикселях, то эта тень не резиновая?

[psywalker]

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

а мне этот вариант понравился тоже. Правда, не до конца понял, как здесь все работает.

Да там всё просто, -120px 4px 10px 5px #888;

1. -120px - смещает тень на -120пк, т.е. влево,

2. 4пк - это смещение по оси y, т.е. вниз в нашем случае.

3. 10пк - это размытие тени

4. 5пк - а вот это её растягивание чтоли во все стороны сразу (нужно у SelenIT уточнить.)

5. #888 - Ну и цвет.

как она образовалась в двух местах с пробелом в середине?

1. 130px 4px 10px 5px #888, - вот эта тень отгоняется вправао

2. -120px 4px 10px 5px #888; - вот эта влево

3. 10px 20px 10px 10px #fff, - а вот эта всегда по среедние и какбы наложена на них, заметь, цвет белый!

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

а мне этот вариант понравился тоже. Правда, не до конца понял, как здесь все работает.

Да там всё просто, -120px 4px 10px 5px #888;

1. -120px - смещает тень на -120пк, т.е. влево,

2. 4пк - это смещение по оси y, т.е. вниз в нашем случае.

3. 10пк - это размытие тени

4. 5пк - а вот это её растягивание чтоли во все стороны сразу (нужно у SelenIT уточнить.)

5. #888 - Ну и цвет.

как она образовалась в двух местах с пробелом в середине?

я так понял, все дело в этом пункте:

box-shadow: 0 20px 10px 10px #fff, 120px 4px 10px 5px #888, -120px 4px 10px 5px #888;

первые четыре цифры делают тень белую, которая как раз находится в центре, вторые 4 привязывают ее к правому краю, а последние 4 к левому, так?

Получается, если мы задаем отступы в пикселях, то эта тень не резиновая?

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

[Softlink]

1. 130px 4px 10px 5px #888, - вот эта тень отгоняется вправао

2. -120px 4px 10px 5px #888; - вот эта влево

3. 10px 20px 10px 10px #fff, - а вот эта всегда по среедние и какбы наложена на них, заметь, цвет белый!

так это я уже сам предположил тоже. А отчего пляшут эти 120px??

От левого верхнего края, как обычно)

Я так понял, здесь тень полностью выпадает из потока, но как тогда она растягивается по ширине дива?

Ну а почему тень НЕ должна растягиваться? А как она по твоему тупо 1пк ставиться?

[psywalker]

1. 130px 4px 10px 5px #888, - вот эта тень отгоняется вправао

2. -120px 4px 10px 5px #888; - вот эта влево

3. 10px 20px 10px 10px #fff, - а вот эта всегда по среедние и какбы наложена на них, заметь, цвет белый!

так это я уже сам предположил тоже. А отчего пляшут эти 120px??

От левого верхнего края, как обычно)

Я так понял, здесь тень полностью выпадает из потока, но как тогда она растягивается по ширине дива?

Ну а почему тень НЕ должна растягиваться? А как она по твоему тупо 1пк ставиться?

Блин, по инерции твой пост исправил, чёрт, не ту кнопку нажал))

[Softlink]

Блин, по инерции твой пост исправил, чёрт, не ту кнопку нажал))

я уже понял

Я с шириной вроде бы разобрался. Она тянется, потому как есть вот эта штука div:after. Т.е. все стили привязываются именно к этому диву, верно?

[psywalker]

Блин, по инерции твой пост исправил, чёрт, не ту кнопку нажал))

я уже понял

Я с шириной вроде бы разобрался. Она тянется, потому как есть вот эта штука div:after. Т.е. все стили привязываются именно к этому диву, верно?

Ну конечно же, это же псевдоэлемент

[Softlink]

Блин, по инерции твой пост исправил, чёрт, не ту кнопку нажал))

я уже понял

Я с шириной вроде бы разобрался. Она тянется, потому как есть вот эта штука div:after. Т.е. все стили привязываются именно к этому диву, верно?

Ну конечно же, это же псевдоэлемент

осталось понять эти 120 и -120px. Как это от сверху? Если ты говоришь, что один прижимает ее влево, а другой вправо

Соответственно они пляшут от какой-то горизонтальной оси, или как это еще назвать.

[psywalker]

Блин, по инерции твой пост исправил, чёрт, не ту кнопку нажал))

я уже понял

Я с шириной вроде бы разобрался. Она тянется, потому как есть вот эта штука div:after. Т.е. все стили привязываются именно к этому диву, верно?

Ну конечно же, это же псевдоэлемент

осталось понять эти 120 и -120px. Как это от сверху? Если ты говоришь, что один прижимает ее влево, а другой вправо

Соответственно они пляшут от какой-то горизонтальной оси, или как это еще назвать.

Смотри, у нас есть псевдоэлемент. Допустим он 500пк в ширину и 20пк в высоту. Вот пляшем от него. У него слева вверху есть точка 0(слева), 0(сверху), как у всех, логично? И вот наша тень пляшет от этой точки, т.е. если ты её сдвигаешь на -120пк, значит она будет сдвинута влевую сторону, т.е. влево от нашей точки (0,0).

Ну что, доТумкал?

[Softlink]

Ну что, доТумкал?

то ли лыжи не едут, то ли я..

Я вот почитал сейчас про box-shadow, потом поэкспериментировал на примере.

В книжке написано:

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

теперь смотрим в код:

box-shadow: 0 20px 10px 10px #fff, 120px 4px 10px 5px #888, -120px 4px 10px 5px #888;

первая идет белая тень, которая никуда не смещена, но она в центре! А вот затем идет правая и левая, которые смещены на 120 пикселей. Получается, что смещение здесь не от точки с координатами (0,0), т.е не от левого верхнего угла. А от центра блока.

[psywalker]

Ну что, доТумкал?

то ли лыжи не едут, то ли я..

Я вот почитал сейчас про box-shadow, потом поэкспериментировал на примере.

В книжке написано:

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

теперь смотрим в код:

box-shadow: 0 20px 10px 10px #fff, 120px 4px 10px 5px #888, -120px 4px 10px 5px #888;

первая идет белая тень, которая никуда не смещена, но она в центре! А вот затем идет правая и левая, которые смещены на 120 пикселей. Получается, что смещение здесь не от точки с координатами (0,0), т.е не от левого верхнего угла. А от центра блока.

Нет, смещение именно от точки 0, 0. Ты сделай мини-пример, поиграйся.

[mishka]

Можно кинуть пустой элемент под картинку с определёнными размерами, а дальше 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;
}

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

Это тут не подойдет, так как тень изогнута. Никакой позицией не подгонишь.

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

Да, жаль. Видел трансформации параллелограммом, трапецией, но эллипсом - не видел.

Макс, не ужели только я твои посты так вот иногда воспринимаю?

Так ты и не привел структуру html.

[Softlink]

я разобрался!

Отменил z-index и все стало на свои места. Там есть блок высотой 7px, ему применяем сначала белую тень, со смещением вниз, затем применяем по очереди "левую" и "правую" тени путем наложения теней. Но т.к. они изначально будут только вокруг блока согласно размытию, мы их смещаем по бокам, задав по 120px в противоположные стороны по оси X.

Хвала разуму!

p.s. Спасибо, Макс, не оставил в беде - помог разобраться С тобой в разведку можно

Edited June 27, 2011 by Softlink

[psywalker]

mishka

Макс, не ужели только я твои посты так вот иногда воспринимаю?

Так ты и не привел структуру html.

Без проблем, исходя из этих мыслей...

Насчёт этой (уже надоедливой тени) отдаю предпочтение абсолюту, так как отталкиваюсь от следующих мыслей:

1. Тени в нашем случае, это не главная часть сайта и не её основное содежимое, поэтому даже в случае с её отсутствием проблем с контентом быть не должно.

2. Тень не заслуживает места в потоке, не такая уж великая вещь, + это оформительская деталь, так что как я уже говорил, в идеале вообще можно сделать её через :after (как показал SelenIT) и забыть.

3. Блок с абсолютом я могу оттянуть точно на 10пк вниз, зная, что при любом раскладе он всегда будет там.

И это только некоторые пункты.

... я легко могут сделать так и буду прав. http://jsfiddle.net/E6aqB/5/

Для ИЕ6-7 в данной ситуации я безпроблемно могу использовать экспрешаны(которые кстати я повешу именно на блок с тенью!), тут они оправданы, я считаю.

Чем мой вариант плох?

p.s. Спасибо, Макс, не оставил в беде - помог разобраться С тобой в разведку можно

Погоди, это ещё не конец, с Мишкой мы ещё не поставили точку.

[Softlink]

Погоди, это ещё не конец, с Мишкой мы ещё не поставили точку.

это вы уже сами тут разбирайтесь Правда я не знаю, чего вы еще не решили.

Для меня, как и писал, ближе вариант с флоатами. Твоя реализация тоже неплоха.

А пример SelenIT был полезен, тем, что я разобрался, как делать такие хитрые конструкции.

[psywalker]

Погоди, это ещё не конец, с Мишкой мы ещё не поставили точку.

это вы уже сами тут разбирайтесь Правда я не знаю, чего вы еще не решили.

Для меня, как и писал, ближе вариант с флоатами.

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

[Softlink]

Погоди, это ещё не конец, с Мишкой мы ещё не поставили точку.

это вы уже сами тут разбирайтесь Правда я не знаю, чего вы еще не решили.

Для меня, как и писал, ближе вариант с флоатами.

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

так нет же. Я и твой пример с абсолютами понял. Но мне кажется, что пусть лучше эти тени будут в потоке. Кому и чему они мешают? По-моему это просто домыслы. А по кол-ву кода, как ты говоришь, смотреть не стоит. Да и оно почти одинаковое.

А вот пример с box-shadow как раз я сразу не понял. И скрипя-сопя все-таки разобрался.

[psywalker]

так нет же. Я и твой пример с абсолютами понял. Но мне кажется, что пусть лучше эти тени будут в потоке. Кому и чему они мешают? По-моему это просто домыслы.

Насчёт этой (уже надоедливой тени) отдаю предпочтение абсолюту, так как отталкиваюсь от следующих мыслей:

1. Тени в нашем случае, это не главная часть сайта и не её основное содежимое, поэтому даже в случае с её отсутствием проблем с контентом быть не должно.

2. Тень не заслуживает места в потоке, не такая уж великая вещь, + это оформительская деталь, так что как я уже говорил, в идеале вообще можно сделать её через :after (как показал SelenIT) и забыть.

3. Блок с абсолютом я могу оттянуть точно на 10пк вниз, зная, что при любом раскладе он всегда будет там.

И это только некоторые пункты.

А по кол-ву кода, как ты говоришь, смотреть не стоит. Да и оно почти одинаковое.

А тут дело не в кол-ве кода, а в его качестве, удобочитаемости, и незасорения основной структуры лишними блоками (повторяю, что речь идёт о обычной тени, которая не влияет на основное содежимое!)

[Softlink]

А тут дело не в кол-ве кода, а в его качестве, удобочитаемости, и незасорения основной структуры лишними блоками (повторяю, что речь идёт о обычной тени, которая не влияет на основное содежимое!)

да и пофиг! Ну где это такое написано, что тени надо выключать из потока? Как круглые уголки делать несколькими дивами это нормально, а тень - это уже перебор, да? По-моему ты сам себе в голову втемяшил такое и все. И код нормально читается в обоих случаях.

[psywalker]

А тут дело не в кол-ве кода, а в его качестве, удобочитаемости, и незасорения основной структуры лишними блоками (повторяю, что речь идёт о обычной тени, которая не влияет на основное содежимое!)

да и пофиг! Ну где это такое написано, что тени надо выключать из потока? Как круглые уголки делать несколькими дивами это нормально, а тень - это уже перебор, да? По-моему ты сам себе в голову втемяшил такое и все. И код нормально читается в обоих случаях.

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

[Softlink]

ок. Пусть это будет твое ИМХО Потому как никого ты не переубедил в этом вопросе

[psywalker]

ок. Пусть это будет твое ИМХО Потому как никого ты не переубедил в этом вопросе

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