Генератор обводки текста на 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 — смягчение тени в пикселах (размытие).
Пользуйтесь на здоровье! Очень буду рад, если кому-то помог сберечь время и нервы :)
