jQuery textShadow - плагин для создания тени в IE

В предыдущей статье про свойство text-shadow я писала, что его вполне можно использовать, отказавшись от поддержки IE.
Но потом я подумала – а зачем отказываться?
И написала небольшой jQuery плагин для реализации этого свойства под IE.
Вызывается он крайне просто:

$('.block').textShadow('0 1px #191919'); // без размытия	
$('.block').textShadow('1px 1px 5px #191919'); // с размытием

Перечисление параметров идёт так же, как в свойстве text-shadow, с той лишь разницей, что цвет тени должен быть последним параметром.
Давайте рассмотрим код плагина:

$.fn.textShadow = function(o){
	if (!o) return; // если нет параметра - выходим
	var str = o.split(' '), // делим введенную строку
	x = parseInt(str[0]), // получаем отступ сверху
	y = parseInt(str[1]), // и снизу
	blur = 0, // значения по умолчанию
	color = '';
	if (str.length == 3) { // если было передано 3 параметра
		color = str[2]; // третьим параметром будет цвет
	} else { // иначе
		blur = parseInt(str[2]); // третьим параметром будет размытие 
		color = str[3]; // а четвёртым цвет
	}
	return $(this).each(function(){ // для каждого элемента
	    	var text = $(this); 
	    	text.css({
			position:'relative', // устанавливаем относительное позиционирование
			'z-index':0, // определяем позицию на случай использования фона
			zoom:1 // хак для IE 6
		}).append('<span></span>') // добавляем к элементу тег span 
		.find('span').html(text.html()) // находим его и вставляем в него содержимое элемента
	    	.css({width:text.width(), // ширина тени равна ширине элемента
		    position:'absolute', // устанавливаем абсолютное позиционирование
		    'z-index':-1, // прячем тень за основной элемент
		    color:color, // устанавливаем основной цвет
		    left:x - blur + 'px', // отступ от элемента сверху 
		    top:y - blur + 'px', // и снизу
		    'padding-left':text.css('padding-left'), // отступы тени равны отступам элемента
		    'padding-top':text.css('padding-top')}); 
		if (blur) text.find('span') // если нужно размыть тень, находим её
			.css('filter','progid:DXImageTransform.Microsoft.Blur(pixelradius=' + blur + ', enabled="true")'); // и размываем с помощью фильтра blur
        });
};

А вот и примеры из прошлой статьи: Браузеры, которые поддерживают text-shadow, выведут эти примеры с помощью CSS, а IE будет использовать вышеприведённый плагин.
Но как отличить IE от других браузеров?

Конечно, можно проверять браузер в самой функции, но мы сделаем проще.

<!--[if IE]><script type="text/javascript" src="text-shadow.jquery.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('.block').textShadow('1px 1px #191919');
	})
</script><![endif]-->

Все остальные браузеры будут воспринимать этот текст как обычный комментарий, и лишь IE загрузит необходимый плагин.
Подробнее об условных комментариях для IE можно почитать здесь.

Можно сделать ещё проще – если следующие строки, задающие параметры тени:

$(document).ready(function(){
	$('.block').textShadow('1px 1px #191919');
})

добавить в конец кода плагина, хак для IE сократится до простого вызова скрипта:

<!--[if IE]><script type="text/javascript" src="text-shadow.jquery.js"></script><![endif]-->

Вот и всё.
Пользуйтесь на здоровье, и успехов вам в создании кроссбраузерной вёрстки.

---

Категории

• CMS
• CSS
• jQuery
• MySQL
• PHP
• Вёрстка

Контакты