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

[Softlink]

Всем привет!

В этой теме Verder выложил макет.

Но вопрос не совсем в нем.

Меня порой вводят в ступор такие вот детали в разных макетах:

Как лучше всего верстать такую тень? Все дело в том, что она не распределена под всем блоком, а только на углах. На картинке выделил оранжевым эллипсом.

[psywalker]

Всем привет!

В этой теме Verder выложил макет.

Но вопрос не совсем в нем.

Меня порой вводят в ступор такие вот детали в разных макетах:

Как лучше всего верстать такую тень? Все дело в том, что она не распределена под всем блоком, а только на углах. На картинке выделил оранжевым эллипсом.

Такие вещи можно делать с помощью абсолютной подложки.

[Softlink]

Всем привет!

В этой теме Verder выложил макет.

Но вопрос не совсем в нем.

Меня порой вводят в ступор такие вот детали в разных макетах:

Как лучше всего верстать такую тень? Все дело в том, что она не распределена под всем блоком, а только на углах. На картинке выделил оранжевым эллипсом.

Такие вещи можно делать с помощью абсолютной подложки.

давай покопаемся здесь

Т.е. надо сделать картинку с угловыми тенями и подложить ее под блок? Правильно понял?

Или двумя абсолютами с box-shadow или картинками?

Edited June 26, 2011 by Softlink

[Verder]

Выложил .PSD

[psywalker]

Всем привет!

В этой теме Verder выложил макет.

Но вопрос не совсем в нем.

Меня порой вводят в ступор такие вот детали в разных макетах:

Как лучше всего верстать такую тень? Все дело в том, что она не распределена под всем блоком, а только на углах. На картинке выделил оранжевым эллипсом.

Такие вещи можно делать с помощью абсолютной подложки.

давай покопаемся здесь

Т.е. надо сделать картинку с угловыми тенями и подложить ее под блок? Правильно понял?

Или двумя абсолютами с box-shadow или картинками?

Как будет удобно

p.s. не обязательно подсовывать, можно и сверху положить, главное, чтобы прижато было к низу!

[Softlink]

Как будет удобно

ответ не в зачет

Если блок резиновый, каким макаром ты будешь тянуть абсолют? А в этом примере блок как раз резиновый.

[Verder]

Как будет удобно

ответ не в зачет

Если блок резиновый, каким макаром ты будешь тянуть абсолют? А в этом примере блок как раз резиновый.

Не на правах аксиомы, но я бы сделал два спана display-block с явной шириной и высотой под основным блоком и прижал их влево и вправо. И в них бэкграундом тень

Это как один из вариантов решающий проблему "тянучести"

Edited June 26, 2011 by Verder

[Softlink]

Как будет удобно

ответ не в зачет

Если блок резиновый, каким макаром ты будешь тянуть абсолют? А в этом примере блок как раз резиновый.

Не на правах аксиомы, но я бы сделал два спана display-block с явной шириной и высотой под основным блоком и прижал их влево и вправо. И в них бэкграундом тень

Это как один из вариантов решающий проблему "тянучести"

такой вариант подойдет вполне, я бы наверняка тоже так сделал. Но лучший ли он?

[psywalker]

Как будет удобно

ответ не в зачет

Если блок резиновый, каким макаром ты будешь тянуть абсолют? А в этом примере блок как раз резиновый.

Не понял, зачем тут тянуть абсолют? Если там тень фикс ширины?

[Softlink]

Как будет удобно

ответ не в зачет

Если блок резиновый, каким макаром ты будешь тянуть абсолют? А в этом примере блок как раз резиновый.

Не понял, зачем тут тянуть абсолют? Если там тень фикс ширины?

тень-то фикс, а блок нет и одна картинка в этом случае не поможет. Т.е. делать так, как Verder предложил?

Edited June 26, 2011 by Softlink

[psywalker]

Как будет удобно

ответ не в зачет

Если блок резиновый, каким макаром ты будешь тянуть абсолют? А в этом примере блок как раз резиновый.

Не понял, зачем тут тянуть абсолют? Если там тень фикс ширины?

тень-то фикс, а блок нет и одна картинка в этом случае не поможет. Т.е. делать так, как Verder предложил?

А при чём тут ОДНА картинка? Я говорил про два дива абсолюта. Как Вердер говорит, я бы не делал.

[Softlink]

А при чём тут ОДНА картинка? Я говорил про два дива абсолюта. Как Вердер говорит, я бы не делал.

Ну расскажи пожалуйста вкратце твой маневр. Как бы ты сваял такое?

[psywalker]

Как будет удобно

ответ не в зачет

Если блок резиновый, каким макаром ты будешь тянуть абсолют? А в этом примере блок как раз резиновый.

Не на правах аксиомы, но я бы сделал два спана display-block с явной шириной и высотой под основным блоком и прижал их влево и вправо. И в них бэкграундом тень

Это как один из вариантов решающий проблему "тянучести"

И чем ты собрался прижимать инлайн-блоки?

[Softlink]

Как будет удобно

ответ не в зачет

Если блок резиновый, каким макаром ты будешь тянуть абсолют? А в этом примере блок как раз резиновый.

Не на правах аксиомы, но я бы сделал два спана display-block с явной шириной и высотой под основным блоком и прижал их влево и вправо. И в них бэкграундом тень

Это как один из вариантов решающий проблему "тянучести"

И чем ты собрался прижимать инлайн-блоки?

тут нет инлайнов. Здесь просто блоки.

[psywalker]

А при чём тут ОДНА картинка? Я говорил про два дива абсолюта. Как Вердер говорит, я бы не делал.

Ну расскажи пожалуйста вкратце твой маневр. Как бы ты сваял такое?

Да я ж говорю, два тега <i></i> в контенте, их делаем абсолютами, им размеры теней и раскидываем по углам нижним. Всё!

[Verder]

А при чём тут ОДНА картинка? Я говорил про два дива абсолюта. Как Вердер говорит, я бы не делал.

Это просто один из вариантов и довольно простой. А в принципе что два абсолюта твоих, что два спана - не сильно отличаются. Я за спаны просто потому что они будут в логическом потоке, попорядку.

[psywalker]

Как будет удобно

ответ не в зачет

Если блок резиновый, каким макаром ты будешь тянуть абсолют? А в этом примере блок как раз резиновый.

Не на правах аксиомы, но я бы сделал два спана display-block с явной шириной и высотой под основным блоком и прижал их влево и вправо. И в них бэкграундом тень

Это как один из вариантов решающий проблему "тянучести"

И чем ты собрался прижимать инлайн-блоки?

тут нет инлайнов. Здесь просто блоки.

float; автоматом делает строчные элементы блочными.

А при чём тут ОДНА картинка? Я говорил про два дива абсолюта. Как Вердер говорит, я бы не делал.

Это просто один из вариантов и довольно простой. А в принципе что два абсолюта твоих, что два спана - не сильно отличаются. Я за спаны просто потому что они будут в логическом потоке, попорядку.

Нет, ты не прав. Отличие как раз таки есть и большое. Это две разные вещи, одни будут болтаться в потоке, а другие никак не будут влиять на него. Это важно.

[Softlink]

А при чём тут ОДНА картинка? Я говорил про два дива абсолюта. Как Вердер говорит, я бы не делал.

Ну расскажи пожалуйста вкратце твой маневр. Как бы ты сваял такое?

Да я ж говорю, два тега <i></i> в контенте, их делаем абсолютами, им размеры теней и раскидываем по углам нижним. Всё!

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

[Verder]

Нет, ты не прав. Отличие как раз таки есть и большое. Это две разные вещи, одни будут болтаться в потоке, а другие никак не будут влиять на него. Это важно.

Ну хз. Просто для меня логичней (тем более резина), когда блоки именно в потоке. А абсолют тут (к тому же в мусорном <i>) чужеродный элемент.

[psywalker]

А при чём тут ОДНА картинка? Я говорил про два дива абсолюта. Как Вердер говорит, я бы не делал.

Ну расскажи пожалуйста вкратце твой маневр. Как бы ты сваял такое?

Да я ж говорю, два тега <i></i> в контенте, их делаем абсолютами, им размеры теней и раскидываем по углам нижним. Всё!

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

Запомни, что все тенюшки, хренюшки и прочая оформительская лабуда вообще не должна по идее влиять на поток по возможности. Т.е. в идеале такую тень нужно вообще делать через :after :before, а для ИЕ6-7 экспрешаны. А структуру вообще не засорять.

Нет, ты не прав. Отличие как раз таки есть и большое. Это две разные вещи, одни будут болтаться в потоке, а другие никак не будут влиять на него. Это важно.

Ну хз. Просто для меня логичней (тем более резина), когда блоки именно в потоке. А абсолют тут (к тому же в мусорном <i>) чужеродный элемент.

Обоснуй, чем отличается <div> от <i> в контексте оформления? И если можно, ссылку на раздел спеки об этом.

[Verder]

Запомни, что все тенюшки, хренюшки и прочая оформительская лабуда вообще не должна по идее влиять на поток по возможности. Т.е. в идеале такую тень нужно вообще делать через :after :before, а для ИЕ6-7 экспрешаны. А структуру вообще не засорять.

Спорить не буду (особенно про :after :before), но у каждого своя логика. Для меня лично верстка логичней, когда не используется абсолютное позиционирование.

Обоснуй, чем отличается <div> от <i> в контексте оформления? И если можно, ссылку на раздел спеки об этом.

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

Edited June 26, 2011 by Verder

[psywalker]

Запомни, что все тенюшки, хренюшки и прочая оформительская лабуда вообще не должна по идее влиять на поток по возможности. Т.е. в идеале такую тень нужно вообще делать через :after :before, а для ИЕ6-7 экспрешаны. А структуру вообще не засорять.

Спорить не буду (особенно про :after :before), но у каждого своя логика. Для меня лично верстка логичней, когда не используется абсолютное позиционирование.

Потому что ты очень плохо знаком с ним, и делаешь так, как тебе удобно. Я тебя понимаю.

Да никак они на оформление не влияют.

Да, при чём абсолютно пофиг, для этих целей вполне подошёл бы и тег <хрень></хрень>, просто <i> короче.

[Verder]

Запомни, что все тенюшки, хренюшки и прочая оформительская лабуда вообще не должна по идее влиять на поток по возможности. Т.е. в идеале такую тень нужно вообще делать через :after :before, а для ИЕ6-7 экспрешаны. А структуру вообще не засорять.

Спорить не буду (особенно про :after :before), но у каждого своя логика. Для меня лично верстка логичней, когда не используется абсолютное позиционирование.

Потому что ты очень плохо знаком с ним, и делаешь так, как тебе удобно. Я тебя понимаю.

Да никак они на оформление не влияют.

Да, при чём абсолютно пофиг, для этих целей вполне подошёл бы и тег <хрень></хрень>, просто <i> короче.

Наверное.

И именно поэтому я тут так написал, во втором пункте - http://forum.htmlbook.ru/index.php?showtopic=27554

[mishka]

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

[Softlink]

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

вооо, как я написал раньше, я тоже бы спаном решал этот вопрос. А как позиционировали бы эту тень? И кстати, двумя спанами? Один слева, а другой справа?