CSS3::text-shadow
Вот так можно красиво исполнить шрифт, обыкновенный, и без всяких примамбасов, используя только новый инструмент оформления стиля объекта - text-shadowОднажды мне захотелось сделать Калькулятор в виде расширения для себя, и тогда возник вопрос, как имитировать дисплей . Обычно он на калькуляторах настоящих делается с помощью семи сегментных индикаторов, которые с помощью простых горизонтальных или вертикальных черточек - индикаторов, в начале эры электроники из светодиодов, а потом ввиде ЖК, могли составить простую цифру, и даже некоторые символы, которыми можно было элементарно отобразить цифру на мониторе.
Но создавать такой символ сейчас, имитируя семисегментный индикатор наверное не интересно, и поэтому я вместо семисегментика решил имитировать возможность сделать цифру на индикаторе объемной.
Это можно было сделать используя графические цифирки или используя какой нибудь специальный шрифт, и я полез в интернет на разные фонтовые библиотеки, на которых как мне помнится есть много всяких интересных шрифтов, тем более сейчас их включить в сайт не представляет ни какой проблемы. И услышал сзади недовольное ворчание Антипа Ефграфыча
-- А ты тенью попробуй --
-- Ась --повернулся я от неожиданности -- мы же спали ?--
-- Мы зевали --
-- Антип Ефграфыч ты о чем родной? --
-- Тенью или макияжем --
-- Каким еще таким макияжем --
-- Да твоим, что на буковках ---
-- Вчерась я твой клуб смотрел. И в блог стырил ---
--- А как это тенью? -- спросил я
-- Да просто -- ты же когда рисуешь на бумаге буквы оттеняешь , и здесь сделай ---
-- А ты уверен что получится ? --
-- А ты попробуй ---
Недовольный что меня оторвали от моего любимого занятия лазить по инетам, я взялся за клаву. - Как это тенью - подумал я. Ну ладно подъем мы сделаем сдвижкой, но подъем без контура - не дает эффекта.....
А если попробовать....и творчество захватило,... и все получилось....
??чем писать
Итак начинаем действовать. Во первых нам нужно определить размер и тип шрифта. Он обычно задается через сказку об фонте (FONT - свойство), и оно достаточно всем известно. Правда многие используют лишь книжные обрывочные данные и вставляют разности в это свойство обычно по аналогии, и в основном изменяют лишь размер шрифта. В нашей постановке размер не очень интересен, но чтоб получить этот эффект более показательным - мы задаем размер равным 4.0ем------------------
Эта единица измерения в стиле редко применяется в сафковой практики ибо она плохо понимается и редко используется в учебниках, Но она очень интересная. Самое главное, то, что она хороша не только для скриптов , но и для обычных размеров, как то начало и конца, ширины и высоты, и очень продуктивна. Но пока оставим мы ее, а так же ставим и фамилию нашего шрифта, ибо разговор о них требует времени и не одного часа, а досконального и долгого обучения
Цветограмма
Обычно его стараются задать противоположным по подложке. или черный на белом или наоборот, т.е используется контраст авто яркости между цветом и подложкой. Но это в обычном исполнении . В нашем случае объемность шрифта добивается яркостью подставки на любом фоне, и поэтому необязательно цвет шрифта будет противоположен цвету подложки, а наоборот цвет выбирается близким к подложки по яркости. В нашем случае свойство color=='#FFF', т.е белыйОбъемистость
Объемистость создается с помощью множественных теней свойства текстовых тэгов text-shadow. Это не новое средство, а забытое ленивыми парсуками, по причине невнимательности их начальников. Ну бывает такое - с министерства команды не поступало - вот и сидим играем в домино, а что за окном давно весна - нам по-барабануФормат свойства text-shadow
- text-shadow: x y m c;
- x - размер тени по горизонтали
- y - размер тени по вертикали
- m - радиус размытия тени
- c - цвет тени
Размеры тени могут задаваться и отрицательной величиной и тогда тень соответственно ляжет в другую сторону по оси.
И последний момент - допускается задать несколько теневых меток для одного объекта, В этом случае, каждая четверка определяющая тень повторяется столько раз - сколько нам требуется для воссоздания эффекта стилизации тени.
text-shadow: тень1, тень2, тень3.....;
Ну вот в принципе и все
Изыск
Мы здесь используем эффект тройной тени, причем каждая теневая группа , выполняет особую роль в создании шарма всей конструкции- тень - тень объема::
2px 2px 4px red - тень - подсветка подложки::
0px 0px 1em blue
можно заметить что у этой тени большой радиус размытия, Именно им и создается эффект воздушности и полета букв над всей страницей - тень - создает рамку вокруг буквы, и тем самым выделяет ее над таким же по интенсивности фоном::
0px 0px 0.2em green
Можно заметить что последнии две тени задаются радиусом размытия в относительных единицах. Это позволяет эффективно сохранять всю конструкцию нашей системы в зависимости от масштаба ее отображения
Ну и вот все вместе
<span style="font-family: sans; font-size: 4em; text-shadow: 2px 2px 4px red, 0 0 1em blue, 0 0 0.2em green; color: white;">Ваш текст</span>
