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

[mishka]

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

Понятное дело что двумя(для фикса можно один), + возможно подключать третий (центральная тянущаяся тень). Флоатами разруливал бы.

[Softlink]

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

Понятное дело что двумя, + возможно подключать третий (центральная тянущаяся тень). Флоатами разруливал бы.

а я бы абсолютом делал c bottom:X px. Имеет право на жизнь? Ну тут тянущейся явно нет на макете.

[mishka]

а я бы абсолютом делал c bottom:X px. Имеет право на жизнь? Ну тут тянущейся явно нет на макете.

Конечно имеет право на жизнь.

Блок с картинкой может и фикс, но блок комента - резина, о чем сказал Verder.

Если абсолют, то:

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

- как реализовать центральную тень? Большой шириной картинки?

[Softlink]

а я бы абсолютом делал c bottom:X px. Имеет право на жизнь? Ну тут тянущейся явно нет на макете.

Конечно имеет право на жизнь.

Блок с картинкой может и фикс, но блок комента - резина, о чем сказал Verder.

Если абсолют, то:

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

- как реализовать центральную тень? Большой шириной картинки?

1) сделать родительский див, в который затолкать коммент и выставить фиксированный паддинг снизу. А для тени вымерить bottom. По идее все должно сойтись. Паддинг не даст залезть комменту на тень сверху.

2)ну учитывая, что там центральная тень есть только под самой картинкой(а она маленькая), то можно и шириной картинки.

А как флоаты подгонять под размер резинового блока? Уже разобрался.

Edited June 26, 2011 by Softlink

[psywalker]

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

Дружище, а чем же тебя так абсолют не устроил? Чем тебе не нравиться способ с :after , :before? Зачем вообще растягивать поток, когда можно этого не делать?

И ещё мне не понятно, зачем обязательно спаны? Какая разница?

[Verder]

Вот - http://freeway-design.ru/example/shadows/

P.S.

min-width не поставил только.

Edited June 26, 2011 by Verder

[psywalker]

Вот - http://freeway-design.ru/example/shadows/

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

[mishka]

2)ну учитывая, что там центральная тень есть только под самой картинкой(а она маленькая), то можно и шириной картинки.

А как флоаты подгонять под размер резинового блока?

Хорошо, ну а что если тень по центру всеже есть?

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

Дружище, а чем же тебя так абсолют не устроил? Чем тебе не нравиться способ с :after , :before? Зачем вообще растягивать поток, когда можно этого не делать?

И ещё мне не понятно, зачем обязательно спаны? Какая разница?

1. абсолют - да уже видел как это бажило в ие6 (сейчас это уже не особо актуально). Но мне както удобней управлять в такой ситуации флоатами.

2. :after , :before - не кросс (но не долго осталось)

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

Да это нужно знать и понимать, чтобы в случае когда нельзя менять html ты смог что нибудь добавить.

3. Спан, да потому что спан, вот он просто спан тег ни о чем. А чего <i />? Чего не u, b, s?

[psywalker]

1. абсолют - да уже видел как это бажило в ие6 (сейчас это уже не особо актуально). Но мне както удобней управлять в такой ситуации флоатами.

Если всё делать правильно, никаких багов быть не должно, а уже тем более если проблема была только в ИЕ6

2. :after , :before - не кросс (но не долго осталось)

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

Да это нужно знать и понимать, чтобы в случае когда нельзя менять html ты смог что нибудь добавить.

Это оформительская деталь, а значит её смело можно делать через :after , :before, так как в случае проигрыша это никак не повлияет на основной контент. Да, можно конечно же пойти другим путём и сделать всё через реальные контейнеры, но опять же, я бы делал два блока, внутри именно абсолютного блока, так как тогда у меня снизу не будет лишнего блока в потоке, который тем-более ещё и отделён от основного блока с контентом.

3. Спан, да потому что спан, вот он просто спан тег ни о чем. А чего <i />? Чего не u, b?

Вот именно, что Спан - это точно такой же тег, как и <i>, т.е. с точки зрения оформительских вещей абсолютно пофиг, что юзать, хоть <b>, так как это даже менее избыточно, чем <span>. БЭМ тебе об этом скажет

2)ну учитывая, что там центральная тень есть только под самой картинкой(а она маленькая), то можно и шириной картинки.

А как флоаты подгонять под размер резинового блока?

Хорошо, ну а что если тень по центру всеже есть?

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

[mishka]

Я за единство подхода.

Чтобы в обоих случаях код был подобным.

Как ты говоришь делать?

2 блока на абсолюте? Или блок на абсолюте, а в нем внутри еще два блока?

По поводу <i />, чего тогда не <p />? Ведь "с точки зрения оформительских вещей" пофиг что юзать.

[psywalker]

По поводу <i />, чего тогда не <p />? Ведь "с точки зрения оформительских вещей" пофиг что юзать.

Нет проблем, можно и параграф. Я ж говорю, пофиг. Спан - это дань моде, не больше. Но модно - не значит лучше.

Как ты говоришь делать?

2 блока на абсолюте? Или блок на абсолюте, а в нем внутри еще два блока?

Именно. Я не хочу отделять основной блок от блока с тенью.

[Softlink]

2)ну учитывая, что там центральная тень есть только под самой картинкой(а она маленькая), то можно и шириной картинки.

А как флоаты подгонять под размер резинового блока?

Хорошо, ну а что если тень по центру всеже есть?

сделать тогда в общем абсолюте и растолкать элементы внутри его. Хотя выйдет тот же самый флот. В общем похожи методы.

Вот - http://freeway-design.ru/example/shadows/

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

да, вот здесь поддержку mishka. Нафиг городить огород из экспрешанов и :after и т.д. Есть же простая и рабочая схема.

Edited June 26, 2011 by Softlink

[psywalker]

Softlink

сделать тогда в общем абсолюте и растолкать элементы внутри его. Хотя выйдет тот же самый флот. В общем похожи методы.

Нет, я уже объяснял, что это совершенно ДВА РАЗНЫХ случая, неужели ты не отличаешь абсолют от стейтика?

да вот здесь поддержку mishka нафиг городить огород из экспрешанов и :after и т.д. Есть же простая и рабочая схема.

И тут ты тоже не понял, делать всякого рода оформиительские вещи через :after - это правильно и очень удобно, + это позволяет создавать псевдоэлементы, благодаря которым твоя структура не будет забиваться ненужными вещами. Повторяю, акцент тут идёт именно на вещь, которая никак не влияет на контент!

[mishka]

Вот наконец то я понял о чем Макс

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

[psywalker]

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

Да, вот смотри, например вот тут http://freeway-design.ru/example/shadows/ два разных блока, один для тени, другой с контентом. Вот это плохо. Я предлагаю засунуть блок с тенью в блок с контентом (верхний). Блок с конетом релатив, а блок с тенями абсолют и тупо его вниз ушатать координатами.

Это если уж делать способ наверняка, без модных фич типа :after

[mishka]

Часто, так чтобы "не забивать код лишним", верстальщик не ставит классы. А че? если он всунул спан внутрь чего-то, спан только один, вот он и сделал:

.box span { ... }

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

А всего этого можно было бы избежать, не будь верстала фанатом минимализма, и прописал бы стили через класс.

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

Такое отступление от темы, но это про такой вот минимализм.

Да всунь ты туда пару дивов/спанов еще в начале разработки чем потом мучаться с теми after и brfore и експрешном. И облегчи дальнейшую поддержку проекта.

[Softlink]

Объясните мне пожалуйста, я, видимо, до сих пор не понял о чем речь. Статик от абсолюта я отличаю.

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

Пока писал сообщение, Макс уже рассказал. Я понял, спасибо

Edited June 26, 2011 by Softlink

[mishka]

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

Да, вот смотри, например вот тут http://freeway-design.ru/example/shadows/ два разных блока, один для тени, другой с контентом. Вот это плохо. Я предлагаю засунуть блок с тенью в блок с контентом (верхний). Блок с конетом релатив, а блок с тенями абсолют и тупо его вниз ушатать координатами.

Это если уж делать способ наверняка, без модных фич типа :after

Слу, я еще раз говорю - общий контейнер нужно делать и при абсолюте, и при статике (как я говорил). Так чего ты привел пример на свое усмотрение и говоришь что это плохо, так как они отдельно?

Да внеси в общий блок - и будет тебе вместе.

Скажешь что у меня на один блок больше?

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

Понятно что в случае с картинкой можно и белым бордером обойтись.

[psywalker]

Часто, так чтобы "не забивать код лишним", верстальщик не ставит классы. А че? если он всунул спан внутрь чего-то, спан только один, вот он и сделал:

.box span { ... }

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

А всего этого можно было бы избежать, не будь верстала фанатом минимализма, и прописал бы стили через класс.

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

Такое отступление от темы, но это про такой вот минимализм.

Да, нет Медведь, всё верно говоришь, я с тобой полностью согласен. Классами никогда не брезгую, и минимализмом тоже уже переболел. Щас стараюсь всё с умом делать.

Да всунь ты туда пару дивов/спанов еще в начале разработки чем потом мучаться с теми after и brfore и експрешном. И облегчи дальнейшую поддержку проекта.

Да, тоже согласен.

[Verder]

Именно. Я не хочу отделять основной блок от блока с тенью.

Я не буду спрашивать - "Зачем?", так как это обсуждение (проблема выеденного яйца не стоит) может растянуться надолго.

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

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

[psywalker]

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

Да, вот смотри, например вот тут http://freeway-design.ru/example/shadows/ два разных блока, один для тени, другой с контентом. Вот это плохо. Я предлагаю засунуть блок с тенью в блок с контентом (верхний). Блок с конетом релатив, а блок с тенями абсолют и тупо его вниз ушатать координатами.

Это если уж делать способ наверняка, без модных фич типа :after

Слу, я еще раз говорю - общий контейнер нужно делать и при абсолюте, и при статике (как я говорил).

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

Именно. Я не хочу отделять основной блок от блока с тенью.

Я не буду спрашивать - "Зачем?", так как это обсуждение (проблема выеденного яйца не стоит) может растянуться надолго.

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

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

Ну тогда раз так рассуждать, то и много чего в CSS лишнее и вообще не стоит использовать. Нафиг нада, если Вася программист потом не поймёт.

Кстати по секрету хочу сказать, что float ещё загадочнее бывает, чем абсолюты

[Verder]

Ну тогда раз так рассуждать, то и много чего в CSS лишнее и вообще не стоит использовать. Нафиг нада, если Вася программист потом не поймёт.

Да дело не в том поймет он или нет.

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

А когда идет сплошной поток и верстается по 7-10 макетов в неделю, стараешься сделать все проще, очевидней, быстрей. Так что косяки должны правиться максимально быстро и без затруднений.

В случае же с абсолютным позиционированием все не так очевидно. И затык из-за этого может привести к срыву сдачи заказа.

Вот я о чем.

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

[mishka]

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

Смотри:

у тебя серенький БГ сайта.

Блок с каментом - беленький с тенюшкой.

Тв всунул внутрь блок с тенью и повесил вниз на абсолют ( bottom: -5px ) тень вылезла из родителя. но она налезет на ниже следующий блок.

Выход: блоку с каментами поставить нижний маргин ( паддинг не катит так как он продлит и белый БГ ). Но как знаем что маргины имеют свойство коллапсироваться и это может быть проблемой, не критичной, но все же.

значит добавляем родителя с нижним паддингом и без БГ.

Пока писал подумал про нижний прозрачный бордер, ща проверю

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

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

[Verder]

Слу, я еще раз говорю - общий контейнер нужно делать и при абсолюте, и при статике (как я говорил).

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

Смотри:

у тебя серенький БГ сайта.

Блок с каментом - беленький с тенюшкой.

Тв всунул внутрь блок с тенью и повесил вниз на абсолют ( bottom: -5px ) тень вылезла из родителя. но она налезет на ниже следующий блок.

Выход: блоку с каментами поставить нижний маргин ( паддинг не катит так как он продлит и белый БГ ). Но как знаем что маргины имеют свойство коллапсироваться и это может быть проблемой, не критичной, но все же.

значит добавляем родителя с нижним паддингом и без БГ.

Пока писал подумал про нижний прозрачный бордер, ща проверю

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

[mishka]

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

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

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