Автор

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

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

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

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


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

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


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

Простой шаблон, который использует свойство CSS фона для добавления фиксированного фонового эффекта.


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

Эффект погружения, основанный на масках изображений и CSS-преобразованиях.


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

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


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

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close