Возможности text-shadow, эффективные тени
text-shadow - Добавляет тень к тексту, а также устанавливает её параметры: цвет тени, смещение относительно надписи и радиус размытия
text-shadow - Добавляет тень к тексту, а также устанавливает её параметры: цвет тени, смещение относительно надписи и радиус размытия.
Рассмотрим простейший пример.
p { text-shadow: 1px 2px 3px #000; }
- Первое значение (1px) — смещение тени по горизонтали. Принимает положительные и отрицательные значения. При положительном значении смещает тень вправо, при отрицательном – влево.
- Второе значение (2px) — смещение тени по вертикали. Принимает положительные и отрицательные значения. При положительное значении смещает тень вниз, при отрицательном – вверх.
- Третье значение (3px) — размытие тени. Когда размытие не нужно, параметр можно не указывать. Параметр поддерживается не всеми браузерами.
- Четвертое значение (#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; }