Авторский знак. Seosait21.ru Есть у человека надежда. Пока не поздно. Вгрызайся и изучай.
Нажимай и поддержи.

Пн Вт Ср Чт Пт Сб Вс
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30


Чувашия-это моя Россия

Ссылки на каскадные стили CSS - text-shadow.

Поддержка Браузеров

Internet Explorer Интернет эксплорер Google Chrome Google Chrome Opera Опера Firefox Firefox Safari Сафари, то есть поддерживается во всех основных браузерах.

Внимание!!! Свойство text-shadow не поддерживается в IExplorer 9 и более ранних версий.

Определение и использование. Свойство text-shadow применяется для устройства тени к тексту. По сути свойство text-shadow прибавляет тень к тексту, устанавливает её параметры: цвет тени, смещение относительно надписи и радиус размытия. Данное свойство text-shadow можно применить вмесмте с псевдоэлементами :first-letter и :first-line.

Особенно интересное и полезное в данном случае не в том, что совершается какое-то изменение какого-то участка( элемента) страницы сайта. Вся удивительная и необходимая информация содержится в том, что свойство text-shadow, которое действует через стили CSS3 самостоятельно и независимо работает и при отключения JavaScripta в браузере Вашего компьютера. Вам не надо гадать: будет работать - не будет работать, потому как работает постоянно и стабильно.


Синтаксис:

               text-shadow: h-shadow v-shadow blur color|none|initial|inherit;
               
               
       примеры:
       
    div {
    color: rgba(0,0,0,0.6);
    text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
          }
          Вдавленные буквы
          
   ----------------------------------------------
    div {
        text-shadow: 6px 6px 0px rgba(0,0,0,0.2);
        }
        Жесткая тень
   ----------------------------------------------
     div {
        ttext-shadow: 0px 3px 0px #b2a98f,
                 0px 14px 10px rgba(0,0,0,0.15),
                 0px 24px 2px rgba(0,0,0,0.1),
                 0px 34px 30px rgba(0,0,0,0.1);
        }
        Вниз с утяжкой
   ----------------------------------------------
    div {
        text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);
        }
        Простой 3D текст
   ---------------------------------------------
    div {
       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);
        }
        3D текст в перспективе
   -------------------------------------------------
    div {
        background-color: #666666;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
        }
        Вдавленный текст
   -------------------------------------------------
    div {
        text-shadow: 0px 0px 6px rgba(255,255,255,0.7);
        }
        Сверкание текста
   -------------------------------------------------
    div {
        text-shadow: -10px 10px 0px #00e6e6,
                 -20px 20px 0px #01cccc,
                 -30px 30px 0px #00bdbd;
        }
        Ретро-стиль или мультипликация
   ------------------------------------------------
    div {
        text-shadow: 0px 15px 5px rgba(0,0,0,0.1),
                 10px 20px 5px rgba(0,0,0,0.05),
                 -10px 20px 5px rgba(0,0,0,0.05);
        }
       Много напраленных источников света
   -----------------------------------------------
    div {
        color: rgba(0,0,0,0.6);
text-shadow: 2px 8px 6px rgba(0,0,0,0.2),
                 0px -5px 35px rgba(255,255,255,0.3);
        }
      Выпуклый текст
    ----------------------------------------------

Описание и Использование

Значение по умолчанию: none
наследуется: да
Версия: CSS3
JavaScript синтаксис: object.style.textShadow="2px 5px 5px red"


Свойства Значения

Значение Описание
h-shadow Требуется. Положение горизонтальной тени. Отрицательные значения
v-shadow Требуется. Положение вертикальной тени. Отрицательные значения
blur Необязательно. Расстояние размытия
color Необязательно. Цвет тени. Посмотреть полный список возможных значений цветов
none Значение по умолчанию. Нет тени
initial Это свойство задает значение по умолчанию.>
inherit Наследует это свойство от своего родительского элемента.


Пишем программу:

< !DOCTYPE>
< html>
< head>
< style>
h2 {text-shadow: 0 2px 5px #CC33CC;}
< /style>
< /head>
< body>

< h2>Text-shadow способ эффекта тени!!!< /h2>

< p>< b>Внимание!!!< /b> IE9 и более ранних версий не поддерживают свойство text-shadow.< /p>

< /body>
< /html>                      

Результат программы:

Text-shadow способ эффекта тени!!!

Внимание!!! IE9 и более ранних версий не поддерживают свойство text-shadow.

-----------------------------------------------

Вот, ещё посмотрите на некоторые реализации выше написанных примеров:

Суть слова

3D текст в перспективе
-------------------------------------------------

Суть слова

Вдавленный текст
-------------------------------------------------

Суть слова

Ретро-стиль или мультипликация
------------------------------------------------

Суть слова

Много напраленных источников света
-----------------------------------------------

Суть слова

Выпуклый текст
----------------------------------------------


seosait21.ru
HTML

seosait21.ru
CSS

seosait21.ru
Web-диз.
HTML ссылка CSS ссылка ...

seosait21.ru
JavaScript

seosait21.ru
PHP

seosait21.ru
JQuery
JavaScript ссылка PHP ссылка JQuery ссылка

seosait21.ru
SEO.

seosait21.ru
MySQL

seosait21.ru
XML
... ... ...
ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: