Генератор обводки текста на 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 += "tt-" + ip + " -" + wp + " " + sm + " " + color + ",n";
		s += "tt " + ip + " -" + wp + " " + sm + " " + color + ",n";
		s += "tt-" + ip + "  " + wp + " " + sm + " " + color + ",n";
		s += "tt " + ip + "  " + wp + " " + sm + " " + color + ",n";
		s += "tt-" + wp + " -" + ip + " " + sm + " " + color + ",n";
		s += "tt " + wp + " -" + ip + " " + sm + " " + color + ",n";
		s += "tt-" + wp + "  " + ip + " " + sm + " " + color + ",n";
		s += "tt " + wp + "  " + ip + " " + sm + " " + color + ",n";
	}
	s = s.slice( 0, -2 );
	return s;
}

Где:

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

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

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

Автор: Protocoder

Источник