Это сайт — моя персональная записная книжка. Интересна мне, по большей части, история, своя жизнь и немного программирование.

CSS3 text-shadow

Благодаря БлоGноту узнал об официальном открытии сервиса «Я.ру», походил по ссылкам и обратил внимание, что в Opera 9.50 некоторые ссылки как-то интересно подсвечиваются. До того интересно, что я было подумал, что «оперовцы» реализовали CSS-фильтры из Internet Explorer. Оказывается, нет, это работает CSS3-свойство text-shadow (позволяет добавлять к тексту тень), которое на данный момент поддерживается браузерами Safari (и его кузенами), Konqueror, iCab и теперь ещё «Оперой».

Интересно, что тени (text-shadow) можно накладывать на текст по нескольку раз, что даёт интересные визуальные эффекты, например тот, который вы увидите ниже, если ваш веб-браузер поддерживает text-shadow:

Многократные тени — впечатляющая штука

Как обычно, идея позаимствована из Internet Explrorer, там есть фильтр «drop shadow», который занимается тем же самым.

<div style="cursor:hand;height:160px; padding:10px; font:bold 13pt Verdana;
        filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, 
        Color='gray', Positive='true')">
Текст с тенью
</div>

Причём, фильтр можно наложить несколько раз (добившись эффекта множественной тени), если окружить текст несколькими тегами и наложить на каждый тег по фильтру.

3 комментария
anton3.livejournal.com 2007

Чем этот скриншот с текстом примечателен?

Евгений Степанищев (bolknote.ru) 2007

Какой скриншот?

Алексей 2011

Комментарий для anton3.livejournal.com:

тем и примечателен что это не картинка)