Комментарии 37
Но, вообще-то, всеми нелюбимая студия использовала то, чего мы как раз хотели избежать: ДОПОЛНИТЕЛЬНЫЕ контейнеры.
Мы хотим вот так:
<div class="reducer">
Любой контент с рамкой
</div>
А у них вот так:
<div id="example">
<div class="blur"><div class="t"><div class="r">
<div class="b"><div class="l"><div class="c">
<div class="reducer">
Любой контент с рамкой
</div>
</div></div></div>
</div></div></div>
</div>
Мы хотим вот так:
<div class="reducer">
Любой контент с рамкой
</div>
А у них вот так:
<div id="example">
<div class="blur"><div class="t"><div class="r">
<div class="b"><div class="l"><div class="c">
<div class="reducer">
Любой контент с рамкой
</div>
</div></div></div>
</div></div></div>
</div>
+1
Дополнительные контейнеры для закругленных концов, присмотритесь внимательнее. А сама суть - тень как картинка.
0
Судя по минусам, я недостаточно ясно выразил свою мысль. Попробую еще раз :-)
Итак, насколько я понял, смысл этого топика в следующем:
Цель: сделать рамку вокруг картинки;
Плохое решение: поместить картинку во ВНЕШНИЙ Div, фоновое изображение которого будет играть роль рамки;
Хорошее решение (предлагаемое в этом топике): применить фоновое изображение к САМОЙ картинке.
Т.е. суть топика не в том что "тень как фоновое изображение" (это есть в обоих решениях), а в том, что "не плодить ЛИШНИХ блоков".
Так вот, Студия предлагала как раз первое решение (с лишними блоками). Это же решение предлагалось в топике "Эффект тени для картинки с помощью CSS".
А n1mnul в ЭТОМ топике показал, как лишних блоков можно избежать. Поэтому, топик не тупо повторяет решение 2-летней давности, а развивает его.
P.S. Прошу прощения за выделение ЗАГЛАВНЫМИ буквами, у меня пока недостаточно кармы, чтобы выделять курсивом.
Итак, насколько я понял, смысл этого топика в следующем:
Цель: сделать рамку вокруг картинки;
Плохое решение: поместить картинку во ВНЕШНИЙ Div, фоновое изображение которого будет играть роль рамки;
Хорошее решение (предлагаемое в этом топике): применить фоновое изображение к САМОЙ картинке.
Т.е. суть топика не в том что "тень как фоновое изображение" (это есть в обоих решениях), а в том, что "не плодить ЛИШНИХ блоков".
Так вот, Студия предлагала как раз первое решение (с лишними блоками). Это же решение предлагалось в топике "Эффект тени для картинки с помощью CSS".
А n1mnul в ЭТОМ топике показал, как лишних блоков можно избежать. Поэтому, топик не тупо повторяет решение 2-летней давности, а развивает его.
P.S. Прошу прощения за выделение ЗАГЛАВНЫМИ буквами, у меня пока недостаточно кармы, чтобы выделять курсивом.
+1
твоё решение хорошо только в конкретном случае, для универсального оно не подходит.
студийное же решение подразумевает любой случай жизни.
итог: твой вариант индивидуален и требует личного подхода с дополнительной картинкой и минимальными знаниями HTML, вариант студии может быть универсальным и прописан в движке в качестве postprocess(), а человеку можно будет только сказать что нужно сделать, чтобы появился такой бокс.
это не отменяет того, что ты хотел сказать и самой возможности фона у картинки.
спасибо.
))
студийное же решение подразумевает любой случай жизни.
итог: твой вариант индивидуален и требует личного подхода с дополнительной картинкой и минимальными знаниями HTML, вариант студии может быть универсальным и прописан в движке в качестве postprocess(), а человеку можно будет только сказать что нужно сделать, чтобы появился такой бокс.
это не отменяет того, что ты хотел сказать и самой возможности фона у картинки.
спасибо.
))
0
Это решение не мое ( Alik_Kirillovich ), а n1mnul - автора этого топика.
Я же в своем комментарии хотел показать, что оно, наряду с недостатками, имеет определенные преимущества перед студийным: отсутствие лишних блоков, семантическая верстка и т.д. За что и поплатился :-)
Я же в своем комментарии хотел показать, что оно, наряду с недостатками, имеет определенные преимущества перед студийным: отсутствие лишних блоков, семантическая верстка и т.д. За что и поплатился :-)
0
НЛО жжот.
Чтоб пользоваться курсивом - это надо еще заслужить.
Чтоб пользоваться курсивом - это надо еще заслужить.
-1
Прикольная сова =) =)
0
Я в чём-то не прав ? За что минуса ? :)
+1
Вас "минуса" заставили сменить резкий тон высказывания на английскую речь :) ?
0
Ну дык эт только для картинок фиксированного размера. Если бы оно все это растягивалось под размер картинки да ещё и реализовалось бы в одну строку. Цены б не было. :)
+1
Как же оно работает везде если в IE вроде padding у img игнорируется? Или я что-то путаю?
0
Для чего тогда необходимо использование данной техники, если приходится для каждой картинки работать в графическом редакторе? Ведь можно и сразу с тенью картинку нарисовать :)
Или я что-то тонкое не уловил? :(
Или я что-то тонкое не уловил? :(
+1
если у вас фотогалерея, скажем, где все загруженные пользователем картинки ресайзятся до какого-то размера, то можно просто нарисовать тень для картинки максимального размера и она будет подходить для всех случаев данной фотогалереи.
а png даже 1024х1024 с альфаканалом будет занимать до 5кб. а еще и закешировать можно
а png даже 1024х1024 с альфаканалом будет занимать до 5кб. а еще и закешировать можно
0
Точно такой же вопрос возник после прочтения.
Впрочем, немного подумав, а ум приходят подходящие варианты. Например, если есть много изображений одного размера (какой-нибудь каталог товаров или превью в галерее) - чтобы им всем добавить тень, нужно будет нарисовать лишь одно изображние тени в ph, а не переделывать все...
Впрочем, немного подумав, а ум приходят подходящие варианты. Например, если есть много изображений одного размера (какой-нибудь каталог товаров или превью в галерее) - чтобы им всем добавить тень, нужно будет нарисовать лишь одно изображние тени в ph, а не переделывать все...
+1
НЛО прилетело и опубликовало эту надпись здесь
В большинстве случае, дизайн говорит какого размера должна быть картинка с тенью. Поэтому чаще всего(если не всегда) мы заранее знаем какого размера тень. Да вы можете с помощью того же imagemagick наложить друг на друга две картинки, но стоит ли ? :) Если можно не делать никаких манипуляций с картинками если можно просто наложить их в браузере с помощью css ? И как было замечено чуть ниже, этот пост был напоминалкой, что img тоже есть фон, и не надо пихать дополнительные контейнеры для теней, когда они не нужны. В любом случае, даже если нужно тень сделать тянущейся, то можно избавиться от одного лишнего контейнера, т.к. у нас ещё есть img и его нужно использовать.
0
Я так понимаю для изображений разного размера и изображение тени нужно другое? И в чем же удобство предложенного вами варианата?
+1
бред =)
Рисовать тень для каждой картинки на сайте? Вы предложили частный случай, а не универсальную технику, как предлагал прошлый автор.
Рисовать тень для каждой картинки на сайте? Вы предложили частный случай, а не универсальную технику, как предлагал прошлый автор.
0
Уделите внимание жирному тексту в самом начале топика. Повторю здесь : «либо положить картинку в контейнер и задать для контейнера отступ и фоновое изображение.»
У вас так много теней для картинок на сайте ? Приведу пример.
Есть листинг объектов недвижимости, у каждого из них есть thumbnail(эскиз), и у него есть тень. Я этим топиком хотел сказать, напомнить, что не нужно совать картинку в контейнер для того что бы нарисовать для неё тень. В данном случае картинка будет фиксированного размера, следовательно - тень тоже. Я не раз замечал на сайтах, где для того чтобы нарисовать тень к картинке её помещали в контейнер, в то время когда этого оформительного мусора в разметке можно было избежать. Мало того, что это пример, это ещё и основной случай(имхо), если тень от картинок падает где попало, то у этого сайта нет дизайна, его делал программист.
Универсальная техника ? Оно выглядит убого, тень должна падать, вы не можете сказать border-left: 2px solid #000 сказать, чтобы он не доставал до края картинки в 2-3px, что бы "тень" хотябы выглядела тенью.
В-третьих, я не предлагал технику, цель топика гласит : избегайте оформительного мусора
У вас так много теней для картинок на сайте ? Приведу пример.
Есть листинг объектов недвижимости, у каждого из них есть thumbnail(эскиз), и у него есть тень. Я этим топиком хотел сказать, напомнить, что не нужно совать картинку в контейнер для того что бы нарисовать для неё тень. В данном случае картинка будет фиксированного размера, следовательно - тень тоже. Я не раз замечал на сайтах, где для того чтобы нарисовать тень к картинке её помещали в контейнер, в то время когда этого оформительного мусора в разметке можно было избежать. Мало того, что это пример, это ещё и основной случай(имхо), если тень от картинок падает где попало, то у этого сайта нет дизайна, его делал программист.
Универсальная техника ? Оно выглядит убого, тень должна падать, вы не можете сказать border-left: 2px solid #000 сказать, чтобы он не доставал до края картинки в 2-3px, что бы "тень" хотябы выглядела тенью.
В-третьих, я не предлагал технику, цель топика гласит : избегайте оформительного мусора
0
В ководстве ЯС используется только для иммитации прозрачности для PNG. Но одно там не понравилось: много кода.
0
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Тень для картинки с помощью CSS. Revamped.