Оформление текста с использованием тени/подсветки

Свойство text-shadow имеет четыре параметра: X Y амплитуда цвет.

X — горизонтальное смещение тени/подсветки к тексту. Положительное значение — смещение вправо, отрицательное значение — смещение влево.
Y — вертикально смещение тени/подсветки к тексту. Положительное значение — смещение вниз, отрицательное значение — смещение вверх.
Амплитуда — чем выше значение, тем больше степень размытия.
Цвет — тёмные тона дадут тень, светлые тона — «подсветку».

Примеры использования:

1 Ваш Текст... <span style="text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 5px 7px #001135; margin-top: 4px; line-height: 56px;color: #dcdcdc; font-size: 4em; color: #fffe9f;">Ваш Текст...</span>	2 .Ваш Текст... если фон и текст одноцветные <span style="text-shadow: 0.1em 0.1em 0.2em black; color: aliceblue;font-size: 4em;">Ваш Текст...</span>
3 Ваш Текст... тень <span style="text-shadow: 1px 1px 1px #000; color: #ffffff;font-size: 4em; ">Ваш Текст...</span>	4 Ваш Текст... на темном фоне <span style="text-shadow:4px 4px 5px #AAAAAA; color:#000;font-size: 4em;">Ваш Текст...</span>
5Ваш Текст... затемнение <span style="text-shadow: 1px 4px 0 #456; color: #FFF;font-size: 4em;">Ваш Текст...</span>	6 Ваш Текст... обтекаемый <span style="text-shadow: 0 2px 2px rgba(0, 0, 30, 0.6); color: #ffd700;font-size: 4em;">Ваш Текст...</span>
7 Ваш Текст... <span style="text-shadow: 4px 2px black; color: #ece2ca;font-size: 4em;">Ваш Текст...</span>	8 Ваш Текст... контур <span style="text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; color: #ddcca3;font-size: 4em;">Ваш Текст...</span>
9 Ваш Текст... вдавленный <span style="text-shadow: -1px -1px #666, 1px 1px #FFF; color: #ddcca3;font-size: 4em;">Ваш Текст...</span>	10 Ваш Текст.... объемный <span style="text-shadow: 1px 1px 3px #666, -1px -1px 3px #FFF, 1px 1px #666, -1px -1px #FFF; color:#ddcca3;font-size: 4em;">Ваш Текст....</span>
11 Ваш Текст... ретро <span style="text-shadow: 2px 4px 0px #EEE, 4px 6px 0px #707070;color: #707070;font-family: Times New Roman; font-size: 6em;margin: 0 auto;">Ваш Текст...</span>	12 Ваш Текст... неон <span style="text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;padding: 20px 0;margin: 20px auto;font-family: Garamond;font-size: 4em;color: #fff;">Ваш Текст...</span>
13 Ваш Текст... ареол <span style=" text-shadow: 8px 8px 0 rgba(255,0,180,0.5);margin: 20px auto;font-family: Arial; font-size: 5em; text-transform: upperca;color: rgba(0,168,255,0.5);">Ваш Текст...</span>	14 Ваш Текст... слоёный 1 <span style="text-shadow: -4px -2px 0 #ece2ca, -6px -4px 0 #5a5a5a;color: #4c6271;font-family: Arial; font-size: 5em;margin: 20px auto;">Ваш Текст...</span>
15 Ваш Текст... слоёный 2 <span style="text-shadow: 0 1px 0 #000000, 0 2px 0 #888888, 0 3px 0 #777777, 0 4px 0 #FFFFFF, 0 5px 0 #555555, 0 6px 0 #444444, 0 7px 0 #333333, 0 8px 7px #001135; color: #FE6602; font-family: 'Aclonica',serif;font-size: 7em; margin: 20px auto;">Ваш Текст...</span>	16 Ваш Текст... этот мне нравится больше всех! <span style="text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb, 0 4px 0 #b9b9b9,0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);color: #fff; font: 5em 'ChunkFiveRegular'; margin: 20px auto;">Ваш Текст...</span>

Источник

Серия сообщений "***ТЕКСТ":
Часть 1 - Написание текста ручкой.
Часть 2 - Красивый эффект (анимация)
...
Часть 37 - Движение текста с изображением внутри
Часть 38 - Красивый текст в BluffTitler
Часть 39 - Пишем красиво

вверх^ к полной версии понравилось! в evernote

Вы сейчас не можете прокомментировать это сообщение.

Дневник >Пишем красиво< | gallinnika - Дневник gallinnika | Лента друзей gallinnika / Полная версия Добавить в друзья Страницы: раньше»