Вставка сглаженной тени за изображением
Проблема
Вы хотите сформировать нерезкие границы в изображении тени.
Решение
Вставка еще одного формального элемента-оболочки div, охватывающего еще одно
фоновое изображение, позволяет создать плавные границы тени.
Сначала создайте новое изображение в программе Adobe Photoshop, которое будет
действовать как маска для сглаживания изображения отбрасываемой тени. Используя
те же размеры, что и у изображения тени, удалите в файле все графическое
наполнение, оставив только прозрачный фон.
Затем в инструменте Gradient (Градиент) выберите вариант градиента, создающий
плавный переход от установленного цвета фона к прозрачному (Background Color to
Transparent).
Убедитесь в том, что цвет фона на панели инструментов совпадает с цветом фона,
используемом на Web-сайте, создайте шестипиксельный переход в направлении от левого края канвы к правому краю изображения.
Повторите создание перехода, но теперь создайте переход в направлении от верхнего края канвы к ее нижнему краю.
Далее сохраните изображение как файл PNG-24 с прозрачностью.
Подготовив изображения, откорректируйте HTML-код, включив в него новый элемент-оболочку div!
Откорректировав элемент-оболочку CSS первого изображения, примените плавающую
модель, переместите изображение влево, используйте тень и задайте отступы между
изображением и HTML-контентом.
Далее введите маску, которая сгладит фон тени, и выделите место для отображения
тени и маски.
Наконец, задайте некоторый отступ и рамку для изображения.
Обсуждение
Трудная часть предложенного решения- создание PNG-файла с
альфа-прозрачностью, который взаимодействует с изображением тени и согласуется с цветом фона Web-сайта.
Поскольку Internet Explorer 5.5-6 для Windows не имеет собственной поддержки
изображений с альфа-прозрачностью в формате PNG, воспользуйтесь решением.
Да, кстати, я недавно отдыхал на Кипре и мне очень понравилась эта страна. Планирую еще раз съездить туда. Кстати, помог мне в этом туроператор по Кипру - туристическая фирма Лабиринт.
Вы хотите сформировать нерезкие границы в изображении тени.
Решение
Вставка еще одного формального элемента-оболочки div, охватывающего еще одно
фоновое изображение, позволяет создать плавные границы тени.
Сначала создайте новое изображение в программе Adobe Photoshop, которое будет
действовать как маска для сглаживания изображения отбрасываемой тени. Используя
те же размеры, что и у изображения тени, удалите в файле все графическое
наполнение, оставив только прозрачный фон.
Затем в инструменте Gradient (Градиент) выберите вариант градиента, создающий
плавный переход от установленного цвета фона к прозрачному (Background Color to
Transparent).
Убедитесь в том, что цвет фона на панели инструментов совпадает с цветом фона,
используемом на Web-сайте, создайте шестипиксельный переход в направлении от левого края канвы к правому краю изображения.
Повторите создание перехода, но теперь создайте переход в направлении от верхнего края канвы к ее нижнему краю.
Далее сохраните изображение как файл PNG-24 с прозрачностью.
Подготовив изображения, откорректируйте HTML-код, включив в него новый элемент-оболочку div!
Откорректировав элемент-оболочку CSS первого изображения, примените плавающую
модель, переместите изображение влево, используйте тень и задайте отступы между
изображением и HTML-контентом.
Далее введите маску, которая сгладит фон тени, и выделите место для отображения
тени и маски.
Наконец, задайте некоторый отступ и рамку для изображения.
Обсуждение
Трудная часть предложенного решения- создание PNG-файла с
альфа-прозрачностью, который взаимодействует с изображением тени и согласуется с цветом фона Web-сайта.
Поскольку Internet Explorer 5.5-6 для Windows не имеет собственной поддержки
изображений с альфа-прозрачностью в формате PNG, воспользуйтесь решением.
Да, кстати, я недавно отдыхал на Кипре и мне очень понравилась эта страна. Планирую еще раз съездить туда. Кстати, помог мне в этом туроператор по Кипру - туристическая фирма Лабиринт.