Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 37
И, кстати, всеми нелюбимая студия писала об этом аж в 2005 году :)
Но, вообще-то, всеми нелюбимая студия использовала то, чего мы как раз хотели избежать: ДОПОЛНИТЕЛЬНЫЕ контейнеры.
Мы хотим вот так:
<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>
Дополнительные контейнеры для закругленных концов, присмотритесь внимательнее. А сама суть - тень как картинка.
Судя по минусам, я недостаточно ясно выразил свою мысль. Попробую еще раз :-)
Итак, насколько я понял, смысл этого топика в следующем:
Цель: сделать рамку вокруг картинки;
Плохое решение: поместить картинку во ВНЕШНИЙ Div, фоновое изображение которого будет играть роль рамки;
Хорошее решение (предлагаемое в этом топике): применить фоновое изображение к САМОЙ картинке.
Т.е. суть топика не в том что "тень как фоновое изображение" (это есть в обоих решениях), а в том, что "не плодить ЛИШНИХ блоков".
Так вот, Студия предлагала как раз первое решение (с лишними блоками). Это же решение предлагалось в топике "Эффект тени для картинки с помощью CSS".
А n1mnul в ЭТОМ топике показал, как лишних блоков можно избежать. Поэтому, топик не тупо повторяет решение 2-летней давности, а развивает его.
P.S. Прошу прощения за выделение ЗАГЛАВНЫМИ буквами, у меня пока недостаточно кармы, чтобы выделять курсивом.
Итак, насколько я понял, смысл этого топика в следующем:
Цель: сделать рамку вокруг картинки;
Плохое решение: поместить картинку во ВНЕШНИЙ Div, фоновое изображение которого будет играть роль рамки;
Хорошее решение (предлагаемое в этом топике): применить фоновое изображение к САМОЙ картинке.
Т.е. суть топика не в том что "тень как фоновое изображение" (это есть в обоих решениях), а в том, что "не плодить ЛИШНИХ блоков".
Так вот, Студия предлагала как раз первое решение (с лишними блоками). Это же решение предлагалось в топике "Эффект тени для картинки с помощью CSS".
А n1mnul в ЭТОМ топике показал, как лишних блоков можно избежать. Поэтому, топик не тупо повторяет решение 2-летней давности, а развивает его.
P.S. Прошу прощения за выделение ЗАГЛАВНЫМИ буквами, у меня пока недостаточно кармы, чтобы выделять курсивом.
твоё решение хорошо только в конкретном случае, для универсального оно не подходит.
студийное же решение подразумевает любой случай жизни.
итог: твой вариант индивидуален и требует личного подхода с дополнительной картинкой и минимальными знаниями HTML, вариант студии может быть универсальным и прописан в движке в качестве postprocess(), а человеку можно будет только сказать что нужно сделать, чтобы появился такой бокс.
это не отменяет того, что ты хотел сказать и самой возможности фона у картинки.
спасибо.
))
студийное же решение подразумевает любой случай жизни.
итог: твой вариант индивидуален и требует личного подхода с дополнительной картинкой и минимальными знаниями HTML, вариант студии может быть универсальным и прописан в движке в качестве postprocess(), а человеку можно будет только сказать что нужно сделать, чтобы появился такой бокс.
это не отменяет того, что ты хотел сказать и самой возможности фона у картинки.
спасибо.
))
Это решение не мое (
Alik_Kirillovich n1mnul - автора этого топика.
Я же в своем комментарии хотел показать, что оно, наряду с недостатками, имеет определенные преимущества перед студийным: отсутствие лишних блоков, семантическая верстка и т.д. За что и поплатился :-)
Alik_Kirillovich n1mnulЯ же в своем комментарии хотел показать, что оно, наряду с недостатками, имеет определенные преимущества перед студийным: отсутствие лишних блоков, семантическая верстка и т.д. За что и поплатился :-)
НЛО жжот.
Чтоб пользоваться курсивом - это надо еще заслужить.
Чтоб пользоваться курсивом - это надо еще заслужить.
Прикольная сова =) =)
Я в чём-то не прав ? За что минуса ? :)
Ну дык эт только для картинок фиксированного размера. Если бы оно все это растягивалось под размер картинки да ещё и реализовалось бы в одну строку. Цены б не было. :)
Как же оно работает везде если в IE вроде padding у img игнорируется? Или я что-то путаю?
Для чего тогда необходимо использование данной техники, если приходится для каждой картинки работать в графическом редакторе? Ведь можно и сразу с тенью картинку нарисовать :)
Или я что-то тонкое не уловил? :(
Или я что-то тонкое не уловил? :(
если у вас фотогалерея, скажем, где все загруженные пользователем картинки ресайзятся до какого-то размера, то можно просто нарисовать тень для картинки максимального размера и она будет подходить для всех случаев данной фотогалереи.
а png даже 1024х1024 с альфаканалом будет занимать до 5кб. а еще и закешировать можно
а png даже 1024х1024 с альфаканалом будет занимать до 5кб. а еще и закешировать можно
Точно такой же вопрос возник после прочтения.
Впрочем, немного подумав, а ум приходят подходящие варианты. Например, если есть много изображений одного размера (какой-нибудь каталог товаров или превью в галерее) - чтобы им всем добавить тень, нужно будет нарисовать лишь одно изображние тени в ph, а не переделывать все...
Впрочем, немного подумав, а ум приходят подходящие варианты. Например, если есть много изображений одного размера (какой-нибудь каталог товаров или превью в галерее) - чтобы им всем добавить тень, нужно будет нарисовать лишь одно изображние тени в ph, а не переделывать все...
В большинстве случае, дизайн говорит какого размера должна быть картинка с тенью. Поэтому чаще всего(если не всегда) мы заранее знаем какого размера тень. Да вы можете с помощью того же imagemagick наложить друг на друга две картинки, но стоит ли ? :) Если можно не делать никаких манипуляций с картинками если можно просто наложить их в браузере с помощью css ? И как было замечено чуть ниже, этот пост был напоминалкой, что img тоже есть фон, и не надо пихать дополнительные контейнеры для теней, когда они не нужны. В любом случае, даже если нужно тень сделать тянущейся, то можно избавиться от одного лишнего контейнера, т.к. у нас ещё есть img и его нужно использовать.
Я так понимаю для изображений разного размера и изображение тени нужно другое? И в чем же удобство предложенного вами варианата?
бред =)
Рисовать тень для каждой картинки на сайте? Вы предложили частный случай, а не универсальную технику, как предлагал прошлый автор.
Рисовать тень для каждой картинки на сайте? Вы предложили частный случай, а не универсальную технику, как предлагал прошлый автор.
Уделите внимание жирному тексту в самом начале топика. Повторю здесь : «либо положить картинку в контейнер и задать для контейнера отступ и фоновое изображение.»
У вас так много теней для картинок на сайте ? Приведу пример.
Есть листинг объектов недвижимости, у каждого из них есть thumbnail(эскиз), и у него есть тень. Я этим топиком хотел сказать, напомнить, что не нужно совать картинку в контейнер для того что бы нарисовать для неё тень. В данном случае картинка будет фиксированного размера, следовательно - тень тоже. Я не раз замечал на сайтах, где для того чтобы нарисовать тень к картинке её помещали в контейнер, в то время когда этого оформительного мусора в разметке можно было избежать. Мало того, что это пример, это ещё и основной случай(имхо), если тень от картинок падает где попало, то у этого сайта нет дизайна, его делал программист.
Универсальная техника ? Оно выглядит убого, тень должна падать, вы не можете сказать border-left: 2px solid #000 сказать, чтобы он не доставал до края картинки в 2-3px, что бы "тень" хотябы выглядела тенью.
В-третьих, я не предлагал технику, цель топика гласит : избегайте оформительного мусора
У вас так много теней для картинок на сайте ? Приведу пример.
Есть листинг объектов недвижимости, у каждого из них есть thumbnail(эскиз), и у него есть тень. Я этим топиком хотел сказать, напомнить, что не нужно совать картинку в контейнер для того что бы нарисовать для неё тень. В данном случае картинка будет фиксированного размера, следовательно - тень тоже. Я не раз замечал на сайтах, где для того чтобы нарисовать тень к картинке её помещали в контейнер, в то время когда этого оформительного мусора в разметке можно было избежать. Мало того, что это пример, это ещё и основной случай(имхо), если тень от картинок падает где попало, то у этого сайта нет дизайна, его делал программист.
Универсальная техника ? Оно выглядит убого, тень должна падать, вы не можете сказать border-left: 2px solid #000 сказать, чтобы он не доставал до края картинки в 2-3px, что бы "тень" хотябы выглядела тенью.
В-третьих, я не предлагал технику, цель топика гласит : избегайте оформительного мусора
— Не верю!
The bandwidth or page view limit for this site has been exceeded and the page cannot be viewed at this time. Once the site is below the limit, it will once again begin serving as normal.
В ководстве ЯС используется только для иммитации прозрачности для PNG. Но одно там не понравилось: много кода.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Тень для картинки с помощью CSS. Revamped.