• Главная
  • WEB студия
    • Услуги и Цены
    • Домены
    • Хостинг и Почта
    • Сайт-Визитка
    • Интернет-магазин
    • Поддержка сайта
    • Портфолио
  • Продвижение сайта
    • Контекстная реклама
    • Семантическое ядро
    • SEO продвижение сайта
  • Социальные сети
    • SMO/SMM-продвижение
    • Создание и ведение групп
    • Автопостинг новостей
  • Парсинг сайтов
    • Зачем нужен парсинг?
    • Зачем нужен парсинг?
    • Анализ цен конкурентов
  • Журнал о Web
    • Поисковые системы
    • Все о SEO
    • Все о SMM
    • jQuery скрипты
    • Малый бизнес
  • Справочники
    • HTML
    • CSS
    • PHP
    • MySQL
    • jQuery
  • Информация
    • Кто МЫ!?
    • Контакты
    • Оплата услуг
    • Спасибо Вам
  • Инструменты
  • SEOker
  • SIZEr
  • HTML редактор
  • Наши проекты
  • W1CMS.ru
  • DiiF.ru
  • MinURL.ru

Возможности text-shadow, эффективные тени

text-shadow - Добавляет тень к тексту, а также устанавливает её параметры: цвет тени, смещение относительно надписи и радиус размытия

  1. Главная
  2. Все про CSS

text-shadow - Добавляет тень к тексту, а также устанавливает её параметры: цвет тени, смещение относительно надписи и радиус размытия.

Рассмотрим простейший пример.

p { text-shadow: 1px 2px 3px #000; }
  1. Первое значение (1px) — смещение тени по горизонтали. Принимает положительные и отрицательные значения. При положительном значении смещает тень вправо, при отрицательном – влево.
  2. Второе значение (2px) — смещение тени по вертикали. Принимает положительные и отрицательные значения. При положительное значении смещает тень вниз, при отрицательном – вверх.
  3. Третье значение (3px) — размытие тени. Когда размытие не нужно, параметр можно не указывать. Параметр поддерживается не всеми браузерами.
  4. Четвертое значение (#000) — цвет тени. Параметр также можно не указывать, и в этом случае будет использоваться цвет текста.

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

p { text-shadow: 1px 1px, 2px 2px #ccc, 3px 3px 1px #000; }

Иными словами - наборы параметров всех теней последовательно перечисляются через запятую.

И так - примеры:

Слегка доработанный эффект вдавленного текста (за счёт добавления верхней тени выглядит естественнее, чем растиражированные в сети примеры):

.inset {
    font-size: 72px;
    color: #666;
    text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
}

Наоборот, выдавленный текст:

.outset {
    font-size: 72px;
    font-weight: bold;
    color: #666;
    text-shadow: -2px -2px 2px #fff, -2px 0 2px #fff,
        0 -2px 2px #fff, 2px 2px 2px #000,
        0px 2px 2px #000, 2px 0 2px #000;
}
    

Радужная тень:

.rainbow {
    font-size: 72px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0); /* сам текст невидим */
    text-shadow: 3px 0 0 #d91f26, 6px 0 0 #e25b0e,
        9px 0 0 #f5dd08, 12px 0 0 #059444,
        15px 0 0 #0287ce, 18px 0 0 #044d91,
        21px 0 0 #2a1571;
}
        

Текст с обводкой:

.stroke {
    font-size: 72px;
    font-weight: bold;
    color: #999;
    text-shadow: 1px 1px 0 #e47e0f, -1px -1px 0 #e47e0f,
        1px -1px 0 #e47e0f, -1px 1px 0 #e47e0f;
}
            

Неоновый текст:

.neon {
    background: #000;
    font-size: 72px;
    font-weight: bold;
    color: #407ec4;
    text-shadow: 1px 1px 0 #4da2fc, -1px -1px 0 #4da2fc,
        1px -1px 0 #4da2fc, -1px 1px 0 #4da2fc,
        4px 4px 8px #2c5889, -4px 4px 8px #2c5889,
        4px -4px 8px #2c5889, -4px -4px 8px #2c5889;
}
                

Рекомендуем

Теги

SEO HTML CSS JavaScript

Смотрите также

Веб-студия

  • Услуги и Цены
  • Аренда сайтов
  • Реклама на наших проектах
  • Журнал о Web технологиях

Сделаем

  • Сайт-Визитку
  • Интернет-магазин
  • Landing Page
  • Поддержка сайта

Заполним

  • Написание статей
  • Обмен данными
  • Парсинг сайтов

Продвинем

  • Контекстная реклама
  • Продвижение сайта
  • Социальные сети
  • Автопостинг новостей

Наши контакты

W1C : Первый Веб-Консультант
mail@w1c.ru
Пн - Пт: 10:00 - 20:00

Дизайн и разработка сайта - W1C на W1CMS
W1C : Web First Consultant - Intelligence everywhere ©