Текст с тенью на CSS3
Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.
|
При помощи CSS3 можно добавлять тени для обычного текста на странице сайта и создавать потрясающие эффекты без применения фоновых изображений. Имеется возможность с успехом реализовать эффект нескольких теней одновременно для одного и того же текста. |
Применяемый типовой CSS-код:
text-shadow: <Смещение-X> <Смещение-Y> <Размытие>* <Цвет>*
Смещение-X: горизонтальное смещение тени по отношению к тексту. Отрицательное значение помещает тень слева от текста.
Смещение-Y: вертикальное смещение тени по отношению к тексту. Отрицательное значение помещает тень на верхней части текста.
Размытие *: установка значения размытия.
Цвет *: установка цвета тени. Значение может быть определено либо в начале либо в самом конце кода. По умолчанию, если ничего не указано, присваивается цвет интерфейса.
Примечание: значения, отмеченные звездочками (*) являются необязательными.
Установка на сайт
1. Для любого из представленных видов тени создаём класс (для каждого свой) в разделе head или стилях CSS, например, basic:
.basic
{
text-shadow: 5px 5px 0 #CCCCCC;
}
2. В разделе body помещаем код:
<h2>Привет, друзья!</h2>
Рассмотрим примеры и их CSS
1. Обычная тень:
text-shadow: 5px 5px 0 #CCCCCC;
2. Размытая тень:
text-shadow: 5px 5px 7px #959595;
3.
Тень и заданный цвет текста:
color: #ADD8E6; text-shadow: 5px 5px 3px #414141;
4. Эффект легкого вдавливания:
Есть несколько способов для достижения такого эффекта. В данном случае определяем только смещение тени по вертикали, оставляя смещение по горизонтали X=0, а цвет тени задаём светлее, чем цвет шрифта текста.
.inset{
text-shadow: 0 -2px 1px #8a8a8a;
}
Вот более яркий пример, сделано на темном фоне:
background: #494949; color: black; text-shadow: 0 1px 2px #8a8a8a;
5. Несколько теней:
К одному элементу одновременно можно применить несколько теней, что сделает его более привлекательным. Чтобы добавить несколько текстовых теней элементу, просто отделите каждое определение тени текста запятой:
text-shadow: 5px 5px 5px red, -5px -5px 5px orange;
На примере чуть выше показано, как две тени (или более)
могут быть одновременно добавлены в текстовый элемент, каждый со своими смещениями и цветами.
6. 3D-тень:
В этом примере, множественные тени того же цвета добавляют к элементу, каждую тень смещают на несколько пикселей больше по сравнению с предыдущей. Это создает иллюзию 3D-эффекта:
color: #12c911; text-shadow: 1px 1px black, 2px 2px #149c14, 3px 3px #149c14, 4px 4px #149c14, 5px 5px #149c14, 6px 6px #149c14, 7px 7px #149c14, 8px 8px #149c14;
Обратите внимание, цвет первой тени определен черным, чтобы придать тексту приятный контур.
7. Светящиеся тени:
Вы можете создать «светящийся текст» с помощью нескольких текстовых теней. Вертикальное и горизонтальное смещение делаем нулевым, постепенно увеличиваем размытость очередной тени и выставляем цвет с каждым разом темнее. Таким образом создаём эффект «сияния»:
background: black; text-shadow: 0 0 5px #FFFFA0, 0 0 10px #FFFF4D, 0 0 15px #FFFF41, 0 0 20px #FFFF2A, 0 0 25px #FFFF2B, 0 0 30px #FEFE00, 0 0 35px #F7F700;
Спасибо за внимание.
Посещайте мой сайт. Пока! L.M.
CSS, текст shadow и overflow.
Итак, мы подошли к финишной прямой по оформлению текста и в этом уроке мы рассмотрим еще два свойства которые могут вам пригодится при работе с текстом. Данные свойства достаточно редко применяются, но о них все же нужно знать.
Свойство text-overflow
Свойство text-overflow: ; используется для определения области видимости текста в блоке, в ситуации, когда текст полностью не помещается в выделенный блок. Данное свойство может принимать два значения:
- clip — текст будет обрезан по размеру области/блока.
- ellipsis — текст будет обрезан и концу добавится многоточие.
Свойство text-overflow: ; будет работать только в том случае, если для блока установлено свойство 
И свойство white-space, которому нужно указать значение nowrap запрета переноса строк. В итоге получаем вот такой код.
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML страница</title>
<link href="css/fonts.css" type="text/css" rel="stylesheet">
</head>
<body>
Текст обрезается с помощью свойства text-oveflow
</body> </html>
И ниже его стили.
CSS
p{
white-space: nowrap; /* Запрещаем перенос строк */
overflow: hidden; /* Обрезаем все, что не помещается в область */
background: #fc0;/* Цвет фона */
padding: 5px; /* Поля вокруг текста */
width: 150px; /*Ширина блока*/
text-overflow: ellipsis; /* Добавляем многоточие */
}
Используя такую структуру кода Вы всегда можете обрезать текст, в зависимости от размера блока.
Свойство text-shadow
Переходим к рассмотрению следующего свойства — это text-shadow. Данное свойство добавляет тень к тексту. Для тени задаются параметры: цвет, смещение относительно надписи и размытие. Также, формируемая тень может иметь разный характер: внутренняя тень текста, тень под текстом и тень вокруг текста.
Для этого свойства используется следующий синтаксис:
CSS
text-shadow: none | тень [,тень]* где тень: <�������������������������������
����метры <�сдвиг по x> <�сдвиг по y> являются обязательными, параметр <�радиус размытия>, по умолчанию установлен в 0, является не обязательным параметром и задает размытие той самой тени.
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML страница</title>
<link href="css/fonts.
css" type="text/css" rel="stylesheet">
</head>
<body>
css" type="text/css" rel="stylesheet">
</head>
<body>
Текст, которому установлена тень. Свойство text-shadow
</body> </html>
И ниже его стили.
CSS
.text-shadow p{
text-shadow: 1px 1px 0 crimson, 3px 8px 18px blue; /* Параметры тени */
color: green; /* Зеленный цвет текста */
font-size: 22px; /* Размер текста */
}
Имейте ввиду, что каждый браузер будет отображать тени по своему, в зависимости от его версии. Данное свойство применяется достаточно редко, поэтому для того, чтобы понять как это, все же, работает, стоит самому поэкспериментировать, меняя данные значения text-shadow:1px 1px 0 crimson, 3px 8px 18px blue;.
Вот мы рассмотрели еще свойства относящиеся к тексту. В Демо показано как каждое из этих свойств работает. На этом все, мы рассмотрели все Основные свойства, которые позволяют нам работать и изменять отображаемый вид текста.
<<< Предыдущий материал
Следующий материал >>>
Просмотреть демо: Демо
Скачать исходник: Скачать
электронный код | Веб-сайт ресурсов с кодом электронной почты
Последнее обновление:
CSS великолепен. Добавить тень текста очень просто text-shadow: 2px 2px 0 #333; просто добавьте смещение по горизонтали, смещение по вертикали, размытие и цвет.
Поддержка text-shadow в электронной почте довольно хороша, но неполная, поэтому многие люди избегают ее использования.
Затем вчера в слабой группе EmailGeeks возник вопрос о поиске «уникальные решения» . Я не могу устоять перед таким языком, поэтому вот что я придумал.
Код
<ч2><дел > это мой заголовок
Если вы не знаете разницы, ознакомьтесь с руководством W3School по блочным и встроенным элементам. Если вам нужно, чтобы он был встроенным, добавьте 
Текст обтекается, когда он достигает края своего контейнера, поэтому добавление поля с одной стороны заставит теневой слой оборачиваться в немного другой точке, чем текстовый слой, когда мы сбалансируем их, тогда обтекание текстом будет соответствовать.
Он также принимает отрицательные значения.