Автор

Примеры использования 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

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

Стилизация сайта, несомненно, самый важный элемент веб-дизайна. Разработчики стараются сделать более уникальным и привлекательным сайт для своих пользователей, ведь не секрет, что чем лучше дизайн сайт - тем более привлекает положительные отзывы пользователей. В данном уроке мы рассмотрим процесс создание красивой таблицы с ценами на услуги или товары при этом будем использовать исключительно CSS3, никаких изображений для таблицы, и минимум разметки HTML. Такие таблицы помогают пользователю быстро и легко найти то, что ему нужно.


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

Вам необходимо организовать сетку для изображений, с динамической подгрузкой изображений, аналогом можно привести стену вконтакте по подгружаемости контента. В данном уроке мы рассмотрим как реализовать данный эффект.  На самом деле возможностей реализовать этот эффект достаточно много, и мы бы хотели поделиться своим опытом. Некоторые эффекты позаимствованы от CSS3 scroll effects, написанных Hakim El Hattab. Для распределения изображений в сетке, воспользуемся библиотекой Masonry.


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

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


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

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


75 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close