Думаю многие из вас сталкивались с задачей создания двойной/нестандартной рамки для изображений на сайте. Частично я описал технику создания таких рамок здесь. Но я не упомянул (а если честно, то и сам тогда не подумал об этом) в той статье один интересный нюанс.
С помощью этой техники, можно создавать эффект тени для картинки, буквально в пару строк. Что нужно сделать?
Для начала напомню, что для создания двойной/нестандартной рамки для изображений нужно задать отступ шириной в 1px для картинки и прописать для нее либо border с параметрами цвета и толщины, либо положить картинку в контейнер и задать для контейнера отступ и фоновое изображение.
В данном случае все проще. Нужно задать padding и border для картинки всего лишь с двух сторон, вместо четырех и фон. Например вот так:
Вот пример:
Не уверен что на картинке с белым фоном это выглядит так как надо, но все же :)
С неменьшим успехом можно проделывать подобное, задавая фоновое изображение и играя с его позиционированием.
Естественно, что можно и нужно эксперементировать чтобы добиться нужного эффекта, но суть ясна.
P.S. В Quircks Mode в Интернет Эксплорере 6 не будет работать padding для img, но если вы все же работаете в Quircks Mode, то это ваши проблемы :)
С помощью этой техники, можно создавать эффект тени для картинки, буквально в пару строк. Что нужно сделать?
Для начала напомню, что для создания двойной/нестандартной рамки для изображений нужно задать отступ шириной в 1px для картинки и прописать для нее либо border с параметрами цвета и толщины, либо положить картинку в контейнер и задать для контейнера отступ и фоновое изображение.
В данном случае все проще. Нужно задать padding и border для картинки всего лишь с двух сторон, вместо четырех и фон. Например вот так:
.shadow{ border-bottom:2px solid #eee; border-right:2px solid #eee; padding-bottom:2px; padding-right:2px; background:#ccc; }
Вот пример:
Не уверен что на картинке с белым фоном это выглядит так как надо, но все же :)
С неменьшим успехом можно проделывать подобное, задавая фоновое изображение и играя с его позиционированием.
Естественно, что можно и нужно эксперементировать чтобы добиться нужного эффекта, но суть ясна.
P.S. В Quircks Mode в Интернет Эксплорере 6 не будет работать padding для img, но если вы все же работаете в Quircks Mode, то это ваши проблемы :)