Регистрация Войти
Войти через VK Войти через FB Войти через Google Войти через Яндекс

Поиск по сайту

Наш Telegram бот: @htmlweb_bot

Генератор тени у текста с помощью стиля CSS3 text-shadow

text-shadow

Исходный код этого примера:

<style>
    label {display: block; margin-bottom: 6px}
    label * {vertical-align: middle}
    label span {display: inline-block; width: 200px;}
    input[type="button"] {padding: 5px 10px; font-size: 18px}
    #res {text-shadow: 3px 3px 1px #AAA}
</style>
<form name="form">
    <label for="px_Horizontal"><span>Смещение по горизонтали</span> <input type="text" id="px_Horizontal" name="px_Horizontal" size="2" value="3"> px</label>
	<label for="px_Vertical"><span>Смещение по вертикали</span> <input type="text" id="px_Vertical" name="px_Vertical" size="2" value="3"> px</label>
	<label for="px_Blur"><span>Радиус размытия</span> <input type="text" id="px_Blur" name="px_Blur" size="2" value="1"> px</label>
	<label for="Color"><span>Цвет</span> <input type="color" id="Color" name="Color" value="#aaaaaa"></label>
	<input type="button" onclick="s();" value="Сформировать тень от текста">
</form>

<p id="res" style="font-size: 36px;">
    text-shadow
</p>

<script type="text/javascript">
function s(){
    var s='';
    s=form.px_Horizontal.value+'px '+form.px_Vertical.value+'px '+form.px_Blur.value+'px '+form.Color.value;
    console.log('textShadow=', s);
    l=getObj('res'); l.style.textShadow=s;
}
</script>

Посмотрите также:

.
Прокомментировать/Отблагодарить