CSS3 Text-shadow (Тень текста) в IE



CSS3 Text-shadow (Тень текста) в IE

В Internet Explorer реализовать тень для текста возможно двумя способами.

Первый это использование фильтров, в общем есть всего 4 фильтра, которые можно использовать как по отдельности, так и вместе. Фильтр dropshadow используется для смещения тени по оси Х и Y, фильтр glow используется для придания свечения, фильтр Blur используется для размытия, фильтр Shadow собственно сама тень в которой задается смещение тени в градусах и пикселях. Интересно то, что с помощью фильтров можно было создавать тень для текста еще в ie5, когда об этом даже некто не задумывался. Многие мастера для создания более сложных эффектов дублировали слова, после чего накладывали друг на друга, используя данные фильтры в разных комбинациях. Таким же образом делаются тени на блоки и картинки. Но есть и минусы у такого способа реализации тени. В частности при использование данного способа не редко на тексте появляются различного рода артефакты, искажающие отображения. Еще один минус в том, что при использование фильтров для большого количества элементов браузер начинает сильно тормозить (используется directX), так что злоупотреблять данным эффектом не стоит.

 

Пример с фильтрами виден только в ie CSS

Пример

.test11 {filter: dropshadow(color=#E51919,offX=5,offY=5);}

Пример

.test12 {filter: glow(color=#B24C4C,strength=3);}

Пример

.test13 {filter: Blur(pixelradius=5, enabled='true');}

Пример

.test14 {filter: Blur(pixelradius=5, enabled='true'), glow(color=#B24C4C,strength=5);}

Пример

.test15 {filter: Blur(pixelradius=5, enabled='true'), glow(color=#B24C4C,strength=5), dropshadow(color=#E51919,offX=5,offY=5);}

Пример

.test16 {filter: glow(color=#B24C4C,strength=5), dropshadow(color=#E51919,offX=5,offY=5);}

Пример

.test17 {filter: Blur(pixelradius=20, enabled='true'), dropshadow(color=#E51919,offX=5,offY=5);}

Пример

.test18 {filter: Shadow(Color=#FF0000, Direction=120, Strength=5); font-size:36px;}

Пример

.test19 {filter: Shadow(Color=#FF0000, Direction=120, Strength=5), filter: glow(color=#B24C4C,strength=5); font-size:36px;}

Пример

.test20 {filter: Shadow(Color=#FF0000, Direction=120, Strength=5), dropshadow(color=#E51919,offX=5,offY=5); font-size:36px;}

Пример

.test21 {filter: Shadow(Color=#FF0000, Direction=120, Strength=5), Blur(pixelradius=5, enabled='true'); font-size:36px;}

Второй способ - это использование скрипта. По сути скрипт использует те же самые фильтры, но делает он это более качественно. С использованием скрипта минусы связанные с артефактами на тексте и искажением более не актуальны. Минусы такого способа в том, что приходится использовать библиотеку jQuery, но с другой стороны многие сайты ее используют и это может не являться минусом для вас.

Для работы скрипта между тегами <head></head> нужно подгрузить библиотеку jQuery и сам скрипт

<head>
<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script><!-- библиотека jQuery -->
<script type="text/javascript" src="/js/jquery.textshadow.js"></script><!-- скрипт тени-->
<script type="text/javascript">
$(document).ready(function(){$(' ').textShadow();});
</script><!-- скрипт вызывающий скрипт тени-->
</head>

 Скрипт вызова работает следующем образом: между кавычками $(document).ready(function(){$(' ') нужно ввести css класс или идентификатор, в скобках $(document).ready(function(){$(' ').textShadow();}); можно ввести css код тени или же оставить их пустыми прописав в css файле коды в классах которые вы прописали в вызывающем скрипте. Пример который используется тут:

<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/js/jquery.textshadow.js"></script>
<script type="text/javascript">
$(document).ready(function(){$('h2, test1, test2, test3, test4, test5, test6, test7, test8, test9, test0').textShadow();});
</script>

Пример со скриптом, виден во всех браузерах CSS

Пример

.test1 {text-shadow:2px 2px 0 #E51919;}

Пример

.test2 {text-shadow:3px 3px 3px #B24C4C;}

Пример

.test3 {text-shadow:0px 0px 1px #ff0000;}

Пример

.test4 {text-shadow:0px 0px 4px #ffffff, 0px -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200;}

Пример

.test5 {text-shadow:0px 0px 1px #ffffff, 0px 0px 2px #ffffff, 0px 0px 3px #ffffff, 0px 0px 4px #ff00de, 0px 0px 7px #ff00de, 0px 0px 8px #ff00de, 0px 0px 10px #ff00de, 0px 0px 15px #ff00de;}

Пример

.test6 {text-shadow:0 0 20px #FFFF00, 0 0 60px #FFFF00;}

Пример

.test7 {text-shadow:-1px -1px white, 1px 1px #333333;}

Пример

.test8 {text-shadow:1px 1px rgba(255,128,0,.7), 2px 2px rgba(255,128,0,.7), 3px 3px rgba(255,128,0,.7), 4px 4px rgba(255,128,0,.7), 5px 5px rgba(255,128,0,.7);}

Пример

.test9 {text-shadow:-4px 0px 0px #0f1128, -8px 0px 4px rgb(50, 152, 234), -10px 0px 4px rgba(50, 152, 234, 0.3), -8px -4px 4px rgba(50, 152, 234, 0.6), -8px 4px 4px rgba(50, 152, 234, 0.6);}

На примере видно какие эффекты скрипт не может реализовать, в определенных случаях куда правильней будет реализовывать данный эффект с помощью подгрузки картинки.  Удачи в использование. Скрипты можно скачать ниже.

Печать

Добавить комментарий

Защитный код
Обновить