Генератор обводки текста на CSS3

от автора


День добрый!
Наконец добрался до своей учетки на хабре, а то обленился так, что все читаю с братского компа )

Хочу поделиться небольшим сервисом — генератором обводки текста.

Пока стандарты утрясаются, можно с помощью небольшого хака с text-shadow добиться того же эффекта.

Нужно было тот для проекта подобрать для разных надписей разные обводки визуально.

К своему удивлению обнаружил отсутствие такого генератора в просторах интернета, однако, быть может, плохо искал (прошу подсказать в комментах, если знаете).

Решил написать сам.

Генератор живет здесь.
Можно менять цвет/прозрачность фона и тени, а так же добавлять фоновое изображение.

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

На JavaScript функция, генерирующая аргумент для text-shadow выглядит так:

function getCSS( size, color, smooth ) { 	var s = ""; 	var sm = smooth > 0 ? smooth + "px" : smooth + ""; 	var wp = size + "px"; 	for ( var i = 0; i <= size; i++ ) { 		var ip = i > 0 ? i + "px" : 0; 		s += "-" + ip + " -" + wp + " " + sm + " " + color + ","; 		s +=       ip + " -" + wp + " " + sm + " " + color + ","; 		s += "-" + ip + " "  + wp + " " + sm + " " + color + ","; 		s +=       ip + " "  + wp + " " + sm + " " + color + ","; 		s += "-" + wp + " -" + ip + " " + sm + " " + color + ","; 		s +=       wp + " -" + ip + " " + sm + " " + color + ","; 		s += "-" + wp + " "  + ip + " " + sm + " " + color + ","; 		s +=       wp + " "  + ip + " " + sm + " " + color + ","; 	} 	s = s.slice( 0, -1 ); 	return s; } 

с форматированием

function getCSS( size, color, smooth ) { 	var s = ""; 	var sm = smooth > 0 ? smooth + "px" : smooth + "  "; 	var wp = size + "px"; 	for ( var i = 0; i <= size; i++ ) { 		var ip = i > 0 ? i + "px" : i + "  "; 		s += "\t\t-" + ip + " -" + wp + " " + sm + " " + color + ",\n"; 		s += "\t\t " + ip + " -" + wp + " " + sm + " " + color + ",\n"; 		s += "\t\t-" + ip + "  " + wp + " " + sm + " " + color + ",\n"; 		s += "\t\t " + ip + "  " + wp + " " + sm + " " + color + ",\n"; 		s += "\t\t-" + wp + " -" + ip + " " + sm + " " + color + ",\n"; 		s += "\t\t " + wp + " -" + ip + " " + sm + " " + color + ",\n"; 		s += "\t\t-" + wp + "  " + ip + " " + sm + " " + color + ",\n"; 		s += "\t\t " + wp + "  " + ip + " " + sm + " " + color + ",\n"; 	} 	s = s.slice( 0, -2 ); 	return s; } 

Где:

size — размер тени в пикселах (чем он больше, тем больше будет получатся теней, тем больше будут тормоза при отрисовке)

color — цвет тени в формате #RRGGBB, rgb() или rgba()

smooth — смягчение тени в пикселах (размытие).


Пользуйтесь на здоровье!
Очень буду рад, если кому-то помог сберечь время и нервы 🙂

ссылка на оригинал статьи http://habrahabr.ru/post/234501/


Комментарии

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *