электронный код | Веб-сайт ресурсов с кодом электронной почты
Последнее обновление:
CSS великолепен. Добавить тень текста очень просто text-shadow: 2px 2px 0 #333;
просто добавьте смещение по горизонтали, смещение по вертикали, размытие и цвет.
Поддержка text-shadow в электронной почте довольно хороша, но неполная, поэтому многие люди избегают ее использования.
Затем вчера в слабой группе EmailGeeks возник вопрос о поиске «уникальные решения» . Я не могу устоять перед таким языком, поэтому вот что я придумал.
Код
<ч2>
<дел >
это мой заголовок
<дел >
это мой заголовок
Хорошо, это немного больше кода, чем наше решение CSS text-shadow: 2px 2px 0 #333; но работает хорошо
стилей шрифта
Начните с добавления основных стилей шрифта семейство шрифтов: без засечек; размер шрифта: 3em; цвет: # 005959; как обычно.
Здесь я использую элемент , так что замените его на соответствующий элемент, хотя я должен отметить, что это должен быть блочный элемент, а не встроенный элемент. Если вы не знаете разницы, ознакомьтесь с руководством W3School по блочным и встроенным элементам. Если вам нужно, чтобы он был встроенным, добавьте display:inline-block .
mso-эффект-тень
Эти стили устанавливают тень текста для MSO Outlook, другие почтовые клиенты просто игнорируют этот код,
Я подробно описал это в своем руководстве по стилям mso, поэтому взгляните на него для получения более подробной информации.
Теневой слой
Здесь мы добавляем тень для всех других почтовых клиентов, дублируя текст и помещая его под другим текстом. Этот метод основан на методе искусственного абсолютного положения.
<дел >
это мой заголовок
максимальная высота:0;
используется для удаления вертикального пробела, то есть он будет находиться под текстовым слоем, который мы поместим после него.
мсо-скрыть: все; добавлен, чтобы удалить это из Outlook MSO, поскольку у нас уже есть хорошее решение для них.
aria-hidden="true" — удалить этот контент из вспомогательных технологий. Мы добавляем текст дважды для достижения эффекта, но мы не хотим, чтобы вспомогательные технологии, такие как программа чтения с экрана, читали его дважды.
Внутри этого мы устанавливаем еще один
, который будет содержать текст.
поле-верх:2px; поле слева: 2px; установит вертикальное и горизонтальное смещение.
цвет:#333; устанавливает цвет тени.
Текстовый слой
<дел >
это мой заголовок
Все, что нам нужно сделать в этом разделе, это сбалансировать горизонтальное смещение, поэтому для теневого слоя мы установили левое поле 2px, поэтому здесь нам нужно отразить это с margin-right: 2px .
Нам это нужно, чтобы исправить перенос текста. Текст переносится, когда он достигает края своего контейнера, поэтому добавление поля с одной стороны заставит теневой слой оборачиваться в немного другой точке, чем текстовый слой, когда мы сбалансируем их, тогда обтекание текстом будет соответствовать.
Проблемы
В большинстве случаев это работает хорошо, но я заметил пару небольших проблем.
Заметки IBM
Некоторые старые версии Notes не учитывают максимальную высоту , поэтому текст будет отображаться сверху, а не в виде тени внизу.
Outlook 2007
Это не работает в Outlook 2007, но работает в 2010 и более поздних версиях. Поэтому, если вы используете почтовый клиент, который устарел на 15 лет, вы можете обновить его до устаревшего на 12 лет.
текстовая тень поддержка
Следите за CanIEmail, чтобы узнать последние сведения о поддержке text-shadow CSS в электронной почте. Надеюсь, если / когда это улучшится, я смогу обновить эту статью.
Текстовая тень CSS
Пример <стиль> ч2 {
семейство шрифтов: без засечек;
белый цвет;
текст-тень:
1px 1px 8px черный,
.5em -.5em 0 золота,
1em .4em 0 оранжевый,
1.5em .4em 10vw оранжевый,
0 0 10vw золото;
размер шрифта: 10vw;
}
Тени CSS
Свойство CSS text-shadow используется для применения эффектов тени к тексту.
Вы можете использовать text-shadow для применения теней, внешнего свечения и других эффектов теней к тексту.
Свойство text-shadow принимает список значений. Каждый элемент в списке может иметь два, три или четыре значения.
Первые два значения — это значений длины , которые определяют горизонтальное смещение тени и вертикальное смещение соответственно (это обязательные значения). Третий длина Можно использовать значение для определения радиуса размытия тени (опционально). А значение цвета можно использовать для определения цвета тени (необязательно).
Вы можете применить несколько эффектов тени в одном объявлении text-shadow , разделив каждый набор значений запятой. Несколько теневых эффектов применяются в указанном порядке и, таким образом, могут накладываться друг на друга, но никогда не накладываются на сам текст.
Тени текста не обрезаются до затененной формы и могут просвечиваться, если текст частично прозрачен. Кроме того, тени текста не влияют на макет, не вызывают прокрутку и не увеличивают размер прокручиваемой области.
Синтаксис
тень текста: нет | [ <длина>{2,3} && <цвет>? ]#
Эти значения объясняются ниже.
Возможные значения
нет
Нет тени.
1-я длина
Первое значение длины указывает горизонтальное смещение тени. Положительное значение рисует тень, смещенную вправо от поля, отрицательное значение — влево.
2-я длина
Второе значение length указывает вертикальное смещение тени. Положительное значение смещает тень вниз, отрицательное — вверх.
3-й длина
Третье значение length определяет радиус размытия . Большие значения приводят к более размытой тени. Значение 0 приводит к резкой тени. Отрицательные значения не допускаются.
цвет
Это значение определяет цвет тени. Если это значение не указано, тень имеет результирующий цвет чернил, которые она затеняет.
Кроме того, все свойства CSS также принимают следующие значения ключевых слов CSS в качестве единственного компонента значения их свойства:
начальный
Представляет значение, указанное как начальное значение свойства.
унаследовать
Представляет вычисленное значение свойства родительского элемента.
0
(Читайте о initial)
Если вы не знаете разницы, ознакомьтесь с руководством W3School по блочным и встроенным элементам. Если вам нужно, чтобы он был встроенным, добавьте 
Текст переносится, когда он достигает края своего контейнера, поэтому добавление поля с одной стороны заставит теневой слой оборачиваться в немного другой точке, чем текстовый слой, когда мы сбалансируем их, тогда обтекание текстом будет соответствовать.
А значение цвета можно использовать для определения цвета тени (необязательно).
