Создание тени для текста и других текстовых эффектов при помощи CSS
Свойство text-shadow не новое для CSS-3, оно было введено еще в CSS-2, однако браузеры начали учитывать его только в последнее время.
Как следует из названия, свойство text-shadow позволяет создавать тень для текста при помощи CSS. Ниже приводится синтаксис text-shadow.
Синтаксис.
Первое значение определяет смещение тени по оси X, т. е. по горизонтали. Если значение положительное, оно определяет смещение тени справа от текста, при отрицательном значении, смещение тени влево от текста. Точно также, второе положительное значение определяет смещение по оси Y (по вертикале), положительное значение определяет смещение ниже текста, отрицательное создает расстояние выше текста.
Третье положительно значение, определяет радиус размытия тени. Если значение не указанно, то размытия не будет.
Создание текстовых эффектов при помощи свойства text-shadow.
При помощи свойства text-shadow можно сделать некоторые текстовые эффекты, которые раньше можно было сделать только при помощи фотошопа или другого графического редактора. Чтобы получить общее представление о том, как можно использовать text-shadow, ниже рассмотрим некоторые примеры.
1. Простая тень для текста на CSS.
Это простой пример использования свойства text-shadow. В нем создана тень 2px по оси X и оси Y, а также радиус размытия 2px.
color:#7690CF; text-shadow:2px 2px 2px #48577D;
2. Стиль выгравированного текста.
В данном случае указано только вертикальное смещение, без размытия.
color: #666; text-shadow: 0px 3px 0px #666;
3. Светящийся текстовый эффект.
Светящийся эффект можно сделать добавив только радиус размытия.
color:#FAF4E8; text-shadow:0 0 20px #FFE30A;
4. Размытый текст.
В приведенном ниже примере все сделано аналогично предыдущему, т. е. указан только радиус размытия без горизонтально или вертикально смещения. Однако в этом примере, использовалось значение цвета transparent, которое указывает, что цвет фона должен быть прозрачным. Это дает эффект размытия.
color: transparent; text-shadow: 0 0 10px #333;
5. Использование нескольких теней.
Можно указать несколько теней для текста, разделяя значения запятыми. Пример использования нескольких теней:
color:#F2B405; text-shadow: 0 0 4px #F24405, 0 -5px 4px #F27405, 2px -10px 6px #F29F05, -2px -15px 11px #F2E205, 2px -18px 18px #222601;
6. Рельефный текст.
В приведенном ниже примере используются две тени. В первой тени, горизонтальные и вертикальные значения являются отрицательными, а во второй тени используются положительные значения, что придает рельефность тексту.
color:#ccc; text-shadow: -1px -1px #FFF, 1px 1px #333;
7. Граница вокруг текста.
Следующий код создает эффект границы для текста.
color:#7FCAEB; text-shadow: 0 -1px #00468C, 1px 0 #00468C, 0 1px #00468C, -1px 0 #00468C;
8. Текст в стиле 3D.
3D эффект для текста, может быть создан с использованием нескольких теней. Для достижения эффекта каждая тень немного увеличивается с использованием одного и того же цвета.
color:#F2B405; text-shadow: 2px 2px #F27405, 3px 3px #F27405, 4px 4px #F27405, 5px 5px #F27405
