Красивый Текст

Иногда очень хочется оригинально оформить оглавление (название) своего поста. На сайте "Шпаргалка блогера" познакомилась с приведенными ниже видами красивого оформления текста. Я, правда, ещё не все уразумела, поэтому делюсь с вами тем, что поняла и освоила.

Свойство text-shadow:1px1px1px#000 имеет четыре параметра:

X Y амплитуда цвет

X - горизонтальное смещение тени к тексту (положительное значение - вправо, отрицательное - влево),

Y - вертикально смещение тени к тексту (положительное - вниз, отрицательно - вверх),

амплитуда - чем выше значение, тем больше степень размытия,
#000 - цвет тени.
Можно добавить две и более тени через запятую.



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: rgba(102, 0, 102, 0.5);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 -
Часть 2 - Бегущие строчки...
...
Часть 6 - Огненный текст без фотошопа..
Часть 7 - Обводка текста без фотошопа...
Часть 8 - Объёмный текст без фотошоп...
Часть 9 - Генераторы текста
Часть 10 - Несколько html кодов для ЦВЕТА текста
...
Часть 17 - Разные разные шрифты...
Часть 18 - Цветовой круг он-лайн. Подбор цветов и генерация цветовых схем.html
Часть 19 - ШРИФТЫ...