Создание тени для текста и других текстовых эффектов при помощи CSS
Свойство text-shadow не новое для CSS-3, оно было введено еще в CSS-2, однако браузеры начали учитывать его только в последнее время.
Как следует из названия, свойство text-shadow позволяет создавать тень для текста при помощи CSS. Ниже приводится синтаксис text-shadow.
Материалы по теме:
- Шрифты в CSS и их свойства
- Параграфы и выравнивание текста в HTML
- Как изменять цвет текста в html документе
Синтаксис.
Первое значение определяет смещение тени по оси 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
Материал подготовлен сайтом: WebMasterMix.ru
Источник
Рекомендуем ознакомиться:
- Подробности
Обновлено: 26 Сентябрь 2013
Просмотров: 14037
Тень текста CSS — javatpoint
следующий → ← предыдущая Как следует из названия, это свойство CSS добавляет тени к тексту. Давайте посмотрим на синтаксис свойства text-shadow. Синтаксис text-shadow: h-shadow v-shadow цвет радиуса размытия | нет | начальная | наследовать; Значения h-shadow: Это необходимое значение. Он определяет положение горизонтальной тени и допускает отрицательные значения. v-shadow: Это также обязательное значение, указывающее положение вертикальной тени. Он не допускает отрицательных значений. радиус размытия: Это радиус размытия, который является необязательным значением. Его значение по умолчанию равно 0, .color: Это цвет тени, а также необязательное значение. нет: Это значение по умолчанию, что означает отсутствие тени. начальный: Используется для установки значения свойства по умолчанию. inherit: Он просто наследует свойство от своего родительского элемента. Давайте разберемся, используя некоторые иллюстрации. Пример — простая тень<голова> Простая тень Пример — нечеткая тень<голова> Нечеткая тень Протестируйте сейчасПример — несколько теней<голова>  мульти{
text-shadow: -3px -3px 3px синий, 3px 3px 3px красный;
размер шрифта: 30px;
выравнивание текста: по центру;
} Множественные тени Протестируйте сейчасПример — эффект свечения<голова> Next TopicCSS text-transform ← предыдущая следующий → |
Он принимает разделенный запятыми список теней, примененных к тексту. Его свойство по умолчанию — none. Он применяет один или несколько эффектов text-shadow к текстовому содержимому элемента.
Тени на холсте — Как создать холст
Автор: Шон Нуфер
Используя свойства box-shadow CSS, вы можете добавлять гладкие тени и интересные эффекты к своим изображениям в своем курсе Canvas.
Примечание. Для использования этой функции вам потребуется либо доступ к редактору тем вашего учреждения, либо вам потребуется работа с администратором, который может работать с редактором тем. Эта функция недоступна для учетных записей Free-For-Teacher.
В этом посте мы рассмотрим основные свойства элемента CSS box-shadow и то, как вы можете изменить настройки, чтобы получить правильный эффект тени для ваших изображений. Вы также можете применить эти же эффекты к элементам HTML, таким как
Базовая тень
box-shadow: 0 0 10px;
Смещение тени
box-shadow: 5px 5px 10px;
Тень с разбросом
box-shadow: 0 0 10px 5px;
Тень одного края (внизу)
box-shadow: 0 8px 6px -7px;
Синтаксис CSS и значения свойств
Для box-shadow существует шесть основных значений свойств, хотя необходимы только два из них.
Основной код будет выглядеть так:
box-shadow: [вставка] [смещение по горизонтали] [смещение по вертикали] [радиус размытия] [расстояние распространения] [цвет];
Порядок свойств важен. Единственными двумя важными свойствами являются смещение по горизонтали и смещение по вертикали . Оба этих смещения могут быть установлены на 0 (ноль), если установлен радиус размытия. Смещение по горизонтали, смещение по вертикали, радиус размытия и расстояние распространения должны быть определены либо как 0, либо как единица измерения — обычно px (пиксели), но также могут быть %, em и т. д. Цвет должен быть определен либо как HEX-значение (например, #000000), RGB или имя цвета HTML. Я считаю, что с HEX лучше работать, но названия цветов легче объяснить. Вставка — это совершенно необязательный параметр, который устанавливает тень внутри изображения, а не снаружи. Этот эффект лучше всего работает с текстовыми полями или
Горизонтальное смещение
Горизонтальное смещение определяет, как по центру располагается тень или как она отклоняется влево или вправо по оси x. Положительное число сдвинет тень вправо, значение 0 сдвинет ее по центру, тогда как отрицательное значение сдвинет ее влево от центра. Ниже показана тень, сдвинутая на 20 пикселей вправо и на 10 пикселей вниз, с кодом:
box-shadow: 20px 10px
Вертикальное смещение
Смещение по вертикали аналогично смещению по горизонтали, но изменяет тень по оси Y. Положительное значение подтолкнет тень под изображение, значение 0 сместит ее по центру, а отрицательное значение поднимет ее над изображением. Ниже показана тень, сдвинутая на 20 пикселей вправо и на 10 пикселей вниз, с кодом:
box-shadow: 10px 20px
Радиус размытия
То, что я считаю наиболее важным свойством, радиус размытия определяет, как резкий или размытый тень есть.
В приведенных выше примерах смещения тень имеет идеально четкие края. Я думаю, что добавление нескольких пикселей размытия создаст реалистичный и интересный эффект тени. Вы можете создать тонкое размытие даже без смещения по горизонтали или вертикали — мы рассмотрим это позже. Ниже представлена тень со смещением 5 пикселей вправо и вниз и радиусом размытия 15 пикселей с кодом:
box-shadow: 5px 5px 15px;
Интересный эффект. На самом деле, поскольку сейчас уже не конец 20-го века, я бы не стал рассматривать тень без небольшого радиального размытия.
Расстояние распространения
Расстояние распространения в основном обеспечивает эффект глубины тени. Это создает иллюзию того, что изображение представляет собой плоский трехмерный объект, слегка выступающий за пределы страницы. Я предлагаю использовать это экономно и всегда с размытием, так как это может дать интересный эффект. Если нет смещения (0, 0), то разброс будет распространяться на все стороны изображения.
Распространение 5 пикселей
box-shadow: 0 0 10px 5px;
Смещение на 5 пикселей
box-shadow: 5px 5px 10px 5px;
Также можно уменьшить разброс (например, -5px), что уменьшит тени. Поиграйтесь с вариантами.
Цвет
Последний параметр — цвет. По умолчанию тень будет серой, но вы можете изменить цвет тени на любое шестнадцатеричное значение или выбрать имя цвета HTML. Если вы добавляете box-shadow к элементу, у которого уже есть цвет (например, синий
box-shadow: 0 0 10px 5px синий;
box-shadow: 0 0 10px 5px красный;
box-shadow: 0 0 10px 5px DarkSlateGray;
box-shadow: 0 0 10px 5px слива;
Бонус
Вы можете определить более одной тени для вашего изображения.
Вы просто разделяете группы свойств для каждой тени запятой. Синтаксис будет выглядеть так:
box-shadow: [свойства тени блока 1], [свойства тени блока 2], [свойства тени блока 3 и т. д.];
По всей вероятности, вы можете не действовать в соответствии с этим знанием. Но интересно знать, что у вас есть некоторые творческие возможности.
box-shadow: 5px 5px 30px 5px красный,
-5px -5px 30px 5px синий;
Размещение вашего кода в Canvas
Canvas не поддерживает box-shadow как встроенный CSS, в отличие от кода, который мы продемонстрировали в предыдущих сообщениях, таких как создание заголовков, разделителей страниц, баннеров и адаптивных фреймов. Когда вы сохраняете редактируемую страницу Canvas, все свойства box-shadow будут полностью удалены, а это означает, что вам нужно будет добавить свои box-shadow во внешний CSS вашего учреждения либо на уровне экземпляра, либо на уровне дочерней учетной записи.
Если у вас есть права администратора, перейдите в меню «Темы» вашего учреждения и откройте активный редактор тем.
В редакторе тем щелкните вкладку «Загрузить», чтобы получить доступ к файлу CSS. Если в вашем учреждении уже есть файл CSS, вы можете загрузить его, добавить в файл новый список свойств box-shadow и повторно загрузить его. Если файла CSS нет, вы можете просто выбрать и загрузить свой файл. Убедитесь, что вы протестировали редактор перед сохранением новой темы.
Когда я создаю свой файл CSS, я предпочитаю быть четким в своих заметках и разграничивать элементы в моем файле. Например, вот некоторые из моих заметок:
/* ТЕНИ */
/* Список теней
*
* Basic Drop Shadow
* Offset Drop Shadow
* Drop Shadow Spread 5px
* One Edge Shadow
* Multi -box Color Shadows
*
*/
/* Basic Drop Shadow */
.
shadow1 {
-moz-box-shadow: 0 0 10px;
-webkit-box-shadow: 0 0 10px;
box-shadow: 0 0 10px;
}
/* Смещение тени */
.shadow2 {
-moz-box-shadow: 5px 5px 10px;
-webkit-box-shadow: 5px 5px 10px;
box-shadow: 5px 5px 10px;
}
и т. д.
Более подробное пошаговое руководство по загрузке файлов в экземпляр или субаккаунт учреждения см. в описании Руководства администратора в ресурсном центре Canvas Guides:
https://community.canvaslms.com /t5/Руководство администратора/Как-загрузить-собственный-JavaScript-и-CSS-файлы-в-аккаунт/ta-p/253
Другие приложения для box-shadow
В этом посте я сосредоточился на тенях как на элементе специально для изображений, но эти свойства можно применить к любому элементу. В другом посте мы обсуждали создание заголовков и разделителей страниц с помощью
В приведенном выше коде вы должны заменить [класс для вашей тени] любым классом, который вы назвали для свойств:
box-shadow: 0 0 10px 5px DarkSlateGray;
В приведенном выше коде вы должны заменить [класс для вашей тени] любым классом, который вы назвали для свойств:
box-shadow: 5px 5px 10px;
Изучая свойства box-shadow, вы можете экспериментировать с различными цветовыми схемами, глубиной, размытием, наложением нескольких теней и т.