Текст с падающими тенями: CSS или графика?
У меня есть внутреннее веб-приложение с изображением вверху страницы, которое в настоящее время содержит текст на английском языке с тенями. Теперь мне нужно предоставить локализованные версии этой страницы для разных языков. Мои основные варианты:
- Иметь различную графику для каждого поддерживаемого языка, содержащую локализованный текст.
- Используйте CSS для размещения локализованного текста поверх простого изображения с сложная техника CSS, чтобы получить тени в большинстве современных браузеров.
Есть ли другие варианты? Это для образовательной среды, я не могу управлять браузером, используемым студентами.
Я пробовал как удалить тени с рисунка, так и переместить текст в заголовок HTML, но ни то, ни другое не было привлекательным. Люди говорили, что это выглядело как дешевая подделка текущей страницы, что задело мою гордость.
Ответы 4
Лично я большой поклонник методов CSS для создания подобных визуальных эффектов. Большим преимуществом является то, что вы перекладываете обработку эффекта на клиентскую сторону, экономя полосу пропускания и время создания контента (настраиваемые текстовые изображения для каждой локали - это большой заказ!) И ускоряете загрузку страницы для пользователя.
Единственная причина, по которой этого следует избегать, заключается в том, что вы ОБЯЗАТЕЛЬНО ДОЛЖНЫ иметь тени в очень старых (IE5) браузерах, практически не поддерживающих CSS.
Обновлено: просто подумал о чем-то - я в нескольких таких случаях, когда мне нужен определенный шрифт или какой-то точный текстовый эффект, я использовал PHP для рендеринга текста с эффектами в изображение и кеширования его на стороне сервера. Таким образом вы избегаете процесса создания контента и получаете более широкую поддержку браузера в обмен на пропускную способность и время ЦП сервера. Это ваш выбор, если компромисс приемлем.
Создавайте изображения по запросу на стороне сервера для каждого языка, в комплекте с тенями. Кэшируйте их по мере необходимости.
Если вы можете использовать Image Magick, вы можете обратитесь к этому руководству для генерации текста + теней ...
Сохранение изображений с текстом может быть проблемой - я бы избегал этого даже без локализации.
Прежде чем перейти к вашим вариантам, я бы попробовал два варианта:
- Ищете бесплатную программу, которая генерирует изображения с падающими тенями, которые вы можете использовать в своей программе всякий раз, когда она обнаруживает, что для заголовка доступен новый текст
- Использование теневого изображения, которое может повторяться как фоновое изображение под текстом
Если это не сработает, я бы попробовал CSS, но протестировал его в максимально возможном количестве браузеров, прежде чем использовать его.
Что ж, Safari поддерживает проприетарное свойство CSS для теней, но оно не будет работать в других браузерах. CSS3 также будет иметь тени (на самом деле только один для блоков, но, возможно, его можно использовать и для текста, например, когда у блока прозрачный фон).
Но, видя, что в большинстве браузеров пока нет даже 100% поддержки CSS2, я думаю, вам нужно выбрать один из двух вариантов. Конечно, есть не такой сложный CSS-трюк, чтобы получить тень:
Но выглядят они не так красиво, как настоящая тень, так как не размываются. Кроме того, вам нужно, чтобы текст был дважды в HTML, чтобы они работали.
Что ж, Opera всегда опережает время, добавляя подобные вещи. Но угадайте, сколько времени пройдет, пока Internet Explorer поддержит только половину CSS3 ;-)
Последние версии Opera также поддерживают спецификацию CSS3 drop shadow.