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