CSS3 текст, свойство text-shadow

CSS3 Рейтинг: +1 Голосов: 1 10776 просмотров
CSS3 текст, свойство text-shadow

Рассмотрим несколько примеров использования свойства CSS3 text-shadow:

Общий синтаксис text-shadow:

Свойство text-shadow работает во всех новых браузерах, без вендорных префиксов, типа -moz и -webkit.

Даже IE можно научить понимать это свойство, нужно использовать Modernizr или аналоги.

Общий принцип:


text-shadow:1 2 3 4;


Где:


1.x-смещение
2.у-смещение
3.размытие
4.цвет


Пример 1:

text-shadow: 2px 4px 3px rgba(0,0,0,0.3);

Получим:


CSS3 текст


То есть мы сместили тень, размыли на 3 пиксела и назначили черный цвет с прозрачностью в 30% (0.3).
 Для чего нужен альфа-канал или прозрачность? Это дает больше свободы в действиях, можно сделать чуть светлее или темнее просто поменяв значение прозрачности, не мучаясь с подбором цвета.



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


Принцип работы тут такой — фон чуть светлее букв, светлая тень с небольшой прозрачностью.


Пример 2:


 

CSS3 текст



Код:

body {
    background: #222;
}

#text h1 {
    color: rgba(0,0,0,0.6);
    text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
}



Текст с жесткой тенью



Используется тень без размытия.

Пример 3:



CSS3 текст



Код:

text-shadow: 6px 6px 0px rgba(0,0,0,0.2);

 

Текст с двойной тенью



Используется еще одно свойство text-shadow, селекторы можно перечислять через запятую, таким образом создавая столько теней, сколько необходимо.
 Первой тени можно назначить цвет как у бэкграунда, тогда будет эффект, как на картинке.

Пример 4:



CSS3 текст



Код:

 text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);
 
 

Текст с тенью внизу



Текст объёмный и как бы висит над фоном. Тут использованы 4 тени с различным уровнем размытия и расположения.

Пример 5:



CSS3 текст



Код:


text-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);


 

CSS3 3D текст


Аналогично предыдущему примеру, три тени, но расположены ближе, отсюда эффект трехмерности и весомости текста.

Пример 6:



CSS3 текст



Код:


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);


 

Еще один CSS3 3D текст


Более расширенный эфект.

Пример 7:



CSS3 текст



Код:


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);


 

Еще пример вдавленного текста CSS3.


Чуть светлее фон, светлая тень ниже букв и темная выше.

Пример 8:



CSS3 текст



Код:


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;


 

CSS3 сияние текста.


Тень не смещаем, размываем посильнее и делаем ее белой.

Пример 9:



CSS3 текст



Код:


text-shadow: 0px 0px 6px rgba(255,255,255,0.7);

 

CSS3 Выпуклый текст.


Очень красивый эфект.

Пример 10:



CSS3 текст



Код:


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);


Используя свойство CSS3 text-shadow как видите можно очень красиво оформить заголовки и текст в статьях на Вашем сайте.

Комментарии (0)

Нет комментариев. Ваш будет первым!

Случайное в статьях

Open Server, создание базы данных.
В пред идущей статье мы создавали пользователя базы данных в Open Server. Теперь мы...
skaz - 0 - 7695
Скачать Artisteer v.4.0
И так сегодня наконец вышла долгожданная, новая версия Artisteer 4.0 В связи с тем,...
skaz - 63 - 33051
Суффикс модулей для Joomla в Artisteer
Перепечатка данного материала возможна только с ссылкой на наш сайт. Много врпросов по...
skaz - 13 - 11790
Скачать Artisteer 4.3.0.60745 для Windows
02.03.2015 г. Обновлены плагины экспорта, добавлена поддержка Joomla 3.4 и Wordpress...
skaz - 0 - 13564
Установка Денвера, настройка локального сервера.
Для установки Joomla на локальный сервер , лучше всего подойдет пакет Денвер содержит...
skaz - 2 - 4384
Как сделать магазин на Wordpress?
Как мы уже говорили в предыдущих статьях, на Wordpress можно создать не только обычный...
skaz - 11 - 7678