Автор

22 02.2017
Примеры использования CSS тени текста

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


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

В приведенных примерах, мы используем тени текста в различных ситуациях, что даст вам необходимую базу, чтобы дальше вы смогли самостоятельно изучить данный вопрос.

 

1. Базовая настройка

Создайте новый HTML-файл и добавьте в него следующий код HTML и CSS:

<!DOCTYPE html>
<html>
<head>
    <title>CSS Buttons</title>
</head>
<body>
    <!-- Раздел стилей -->
    <style type="text/css"></style>
    <!-- Раздел HTML -->
</body>
</html>

В раздел HTML добавьте тег <h1> с классом text:

<!-- Раздел HTML -->
<h1 class="text">Web Code Geeks</h1>

Для этого элемента мы будем добавлять тень текста CSS. Я задал для этого элемента начальные свойства, чтобы он красиво выглядел на экране:

<!-- Раздел стилей -->
<style type="text/css">
body{
    font-family: "Arial", "sans-serif"; /* пользовательский шрифт */  
}
/* выравнивание текста */
h1 {         
    margin-left: 7em;
    margin-top: 5em;
}
</style>

Теперь давайте зададим для текста атрибут text-shadow. Но сначала разберемся, какие значения принимает этот атрибут:

text-shadow: 4px 4px 4px #ccc;
  1. 4px – смещение по оси X (горизонтальное);
  2. 3px – смещение по оси Y (вертикальное);
  3. 2px – значение размытия;
  4. #ccc – цвет.

Это задается следующим образом:

text-shadow: horizontal-offset vertical-offset blur color;

де цвет может быть представлен шестнадцатеричным кодом #ccc или RGBA (0,0,0,0.3);. В CSS мы можем применить к нашему тексту внутреннюю тень CSS следующим образом:

<!-- Раздел стилей -->
.text {
    font-size: 5em;      /* делаем текст больше */
    text-shadow: 4px 3px 2px #ccc;
}

Представление в браузере этого текста с тенью будет выглядеть так:

ДЕМО
ПРИМЕР S-SD.RU

Дальше мы будем по-разному изменять цвет фона элемента body. Делаем мы это потому, что для некоторых теней CSS нужен определенный фон, иначе они не будут заметны. Чтобы текст смотрелся красивее, мы зададим его в верхнем регистре.

 

2. Эффект оттиска

Установите для цвета текста немного более темный оттенок, чем фон. Затем примените небольшую белую тень текста с уменьшенной непрозрачностью:

body {
    background: #222;
}
.text {
    font-size: 5em;                     
    color: rgba(0,0,0,0.6);        /* цвет текста */
    text-shadow: 2px 2px 3px rgba(255,255,255,0.1);    /* добавление тени */
}

Используя код RGBA, вы можете установить непрозрачность цвета. Обратите внимание на то, что цвет текста имеет непрозрачность 60% (0.6), а тени div CSS 10% (0.1).

ДЕМО
ПРИМЕР S-SD.RU

 

3. Эффект ретро-тени

Для ретро-тени не всегда нужно применять размытие. Возьмем, к примеру, эту ретро-тень:

body {
    background: #fff3cd;        /* изменяем цвет фона */
}
.text {
    font-size: 5em;                     
    color: white;        /* изменяем цвет текста на белый */
    text-shadow: 6px 6px 0px rgba(0,0,0,0.2);    /* добавление ретро-тени */
}
ДЕМО
ПРИМЕР S-SD.RU

 

4. Эффект двойной тени

Интересно, что вы можете добавлять более одной CSS тени шрифта. Это можно сделать следующим образом: text-shadow: shadow1, shadow2, shadow3; Давайте добавим две тени, одна - с цветом фона, а вторая немного темнее:

.text {
    font-size: 5em;                                                 
    text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);    /* дает две тени */
}

Фон у нас белый, так что другой цвет для него нам не нужен. В браузере эффект будет выглядеть так:

ДЕМО
ПРИМЕР S-SD.RU

 

5. Эффект удаленной тени

Этот эффект основывается на функции определения нескольких красивых теней CSS. Ниже вы можете увидеть эффект с четырьмя тенями, отбрасываемыми вниз с различной степенью интенсивности:

body {
    background: #fff3cd;            /* изменяем цвет фона */
}
.text {
    font-size: 5em;
    color: white;                                                 
    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);        
}
ДЕМО
ПРИМЕР S-SD.RU

 

6. 3D-эффект Марка Дотто

Следующий эффект был опубликован на MarkDotto.com, в нем используется 12 отдельных теней, чтобы создать реалистичный 3D-эффект:

body {
    background: #3495c0;            /* изменяем цвет фона */
}
.text {
    font-size: 5em;
    color: white;                                                 
    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);
}

Теперь посмотрите, как эти внутренние тени текста CSS выглядят в браузере:

ДЕМО
ПРИМЕР S-SD.RU

 

7. Реалистичный эффект вырезанного текста Гордона Холла

Гордон использует некоторую продвинутую магию CSS, чтобы задать не только внешнюю тень, но и реалистичную внутреннюю тень:

body {
    background: #cbcbcb;            /* изменяем цвет фона */
}
.text {
    font-size: 5em;
    color: transparent;                                         
    background-color: #666666;
           -webkit-background-clip: text;
           -moz-background-clip: text;
           background-clip: text;
           text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
}

И это создает эффект вырезанного текста.

ДЕМО
ПРИМЕР S-SD.RU

 

8. Эффект свечения текста

body {
    background: #992d23;            /* изменяем цвет фона */
}
.text {
    font-size: 5em;
    color: white;                                                 
    text-shadow: 0px 0px 6px rgba(255,255,255,0.7);
}

Эта тень создает эффект свечения текста:

ДЕМО
ПРИМЕР S-SD.RU

 

9. Эффект выпуклого текста

body {
    background: #629552;            /* изменяем цвет фона */
}
.text {
    font-size: 5em;                                            
    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);
}
ДЕМО
ПРИМЕР S-SD.RU

 

10. Эффект длинных теней

Этот эффект можно сделать с помощю Генератора длинных теней

background-color: rgb(147, 201, 67);
text-shadow: 1px 1px rgb(131, 179, 60), 2px 2px rgb(131, 179, 60), 3px 3px rgb(131, 179, 60), 4px 4px rgb(131, 179, 60), 5px 5px rgb(131, 179, 60), 6px 6px rgb(131, 179, 60), 7px 7px rgb(131, 179, 60), 8px 8px rgb(131, 179, 60), 9px 9px rgb(131, 179, 60), 10px 10px rgb(131, 179, 60), 11px 11px rgb(131, 179, 60), 12px 12px rgb(131, 179, 60), 13px 13px rgb(131, 179, 60), 14px 14px rgb(131, 179, 60), 15px 15px rgb(131, 179, 60), 16px 16px rgb(131, 179, 60), 17px 17px rgb(131, 179, 60), 18px 18px rgb(131, 179, 60), 19px 19px rgb(131, 179, 60), 20px 20px rgb(131, 179, 60), 21px 21px rgb(131, 179, 60), 22px 22px rgb(131, 179, 60), 23px 23px rgb(131, 179, 60), 24px 24px rgb(131, 179, 60), 25px 25px rgb(131, 179, 60), 26px 26px rgb(131, 179, 60), 27px 27px rgb(131, 179, 60);
color: #eaeaea;
ДЕМО
ПРИМЕР S-SD.RU

 

Заключение

Как видите, свойство text-shadow очень просто в использовании, и с его помощью вы можете создавать собственные креативные CSS тени.


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеCSS3

23 04.2013
Примеры использования CSS тени текста

Как вы возможно заметили, мы достаточно много уделяем внимания по созданию различных галерей для сайта, и это совсем не странно, ведь галерей достаточно много, и они весьма специфические. В данном уроке мы рассмотрим как создать адаптированную галерею с каруселью миниатюр для сайта, с помощью плагина jquery. Галерея будет подстраиваться под размер окна браузера, также можно будет отключить или включить карусель миниатюр. Достаточно удобно можно осуществлять навигацию с помощью клавиатуры.


16 05.2013
Примеры использования CSS тени текста

Хорошая навигация на сайте является неотъемлемой его частью. Вы можете создать любое меню сайта, но кроме этого оно должно быть гармонично сочетаться с другими элементами на сайте, к этим критериям можно отнести и цветовую схему меню. Мы уделяем множество уроков данной тематике, ведь это один из главных элементов на странице ресурса. В данном уроке мы рассмотрим простое, анимированное меню для сайта с вертикальным расположением созданное с помощью исключительно css.


18 01.2017
Примеры использования CSS тени текста

Профессиональный веб-дизайн не обходится без создания цветовой схемы. Во всемирной паутине существует множество инструментов для достижения цветовой «нирваны». Кажется, что они совершенно разные, но многие из них – всего лишь измененные версии более популярных и полезных инструментов.


12 04.2013
Примеры использования CSS тени текста

Всем известен youtube, весьма популярный сервис для просмотра и размещения созданного пользователями видео со всего мира в интернете. Недавно был обновлен интерфейс данного сервиса, в котором появилось много чего нового и интересного. В данном уроке мы рассмотрим как создать идентичные кнопки как на youtube. Такой дизайн кнопок очень выразителен и отлично работает. Состояние по умолчанию не бросается в глаза посетителя, соревнуясь за его внимание с другими достойными элементами интерфейса. Данные кнопки выражают функционал, в отличие от ссылок..


105 Публикаций

Раскрутка в соцсетях

В данном блоге описано где и как сделать накрутку групп, сообществ и личных страничек в популярных социальных сетях и тест платных сайтов занимающихся накруткой.


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close