День добрый!
Наконец добрался до своей учетки на хабре, а то обленился так, что все читаю с братского компа )
Хочу поделиться небольшим сервисом — генератором обводки текста.
Пока стандарты утрясаются, можно с помощью небольшого хака с 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