html — Обводка текста на чистом СSS
Хочу сделать обводку текста как на макете, но никак не выходит.
Вот как должно быть:
Что получилось у меня:
.box-design { -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: $boxGray; font-family: GBold; font-size: 150px; }
<div> <p>DES</p> </div>
- html
- css
- вёрстка
- svg
- svg-animation
1
Для разнообразия можно рассмотреть использование SVG
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 330 200" > <rect fill="#111111" /> <text x="10" y="150" font-size="150px" font-family="sans-serif" fill="none" stroke="white" stroke-width="4" > DES </text> </svg>
Добавляем буквально одну строчку и можно сделать анимацию обводки
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 330 200" > <rect fill="#111111" /> <text x="10" y="150" font-size="150px" stroke-dasharray="25" font-family="sans-serif" fill="none" stroke="white" stroke-width="4" > DES <!-- Анимация обводки --> <animate attributeName="stroke-dashoffset" dur="2s" values="300;0" repeatCount="indefinite" /> </text> </svg>
+SVG Filter
Для обводки используются SVG фильтры: feColorMatrix
и feMorphology
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 330 200" > <filter x="-20%" y="-20%"> <feMorphology operator="dilate" in="SourceAlpha" radius="4" result="e1" /> <feMorphology operator="dilate" in="SourceAlpha" radius="1" result="e2" /> <feComposite in="e1" in2="e2" operator="xor" result="outline"/> <feColorMatrix type="matrix" in="outline" values="0 0 0 0 0.2 0 0 0 0 0.1 0 0 0 0 0.5 0 0 0 1 0" result="outline2"/> <feComposite in="outline2" in2="SourceGraphic" operator="over" result="output"/> </filter> <rect fill="#111111" /> <text x="10" y="150" filter="url(#outText)" font-size="150px" stroke-dasharray="0" font-family="sans-serif" fill="none" stroke="white" stroke-width="4" > DES </text> </svg>
Тот же вариант + анимация строки
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 330 200" > <filter x="-20%" y="-20%"> <feMorphology operator="dilate" in="SourceAlpha" radius="5" result="e1" /> <feMorphology operator="dilate" in="SourceAlpha" radius="1" result="e2" /> <feComposite in="e1" in2="e2" operator="xor" result="outline"/> <feColorMatrix type="matrix" in="outline" values="0 0 0 0 0.2 0 0 0 0 0.1 0 0 0 0 0.9 0 0 1 1 0" result="outline2"/> <feComposite in="outline2" in2="SourceGraphic" operator="over" result="output"/> </filter> <rect fill="#111111" /> <text x="10" y="150" filter="url(#outText)" font-size="150px" stroke-dasharray="20" font-family="sans-serif" fill="none" stroke="silver" stroke-width="4" > DES <!-- Анимация обводки --> <animate attributeName="stroke-dashoffset" dur="5s" values="300;0" repeatCount="indefinite" /> </text> </svg>
5
Используйте text-shadow
.box-design { text-shadow: -1px 0 0 red, /* Тень влево */ 0 -1px 0 red, /* Тень вверх */ 1px 0 0 red, /* Тень вправо */ 0 1px 0 red; /* Тень вниз */ font-size: 150px; color: #fff; margin: 0; }
<div> <p>DES</p> </div>
1
Можно использовать text-shadow
, как в соседнем ответе, но тогда не будет прозрачности у самих букв. Поэтому, всё таки -webkit-text-stroke
:
body { background: radial-gradient(#d808, #000f) no-repeat; } .box-design { margin: 0; font: 150px Arial; text-align: center; color: transparent; -webkit-text-stroke: 2px white; }
<div> <p>DES</p> </div>
1
Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
Обводка текста средствами CSS
Оцените материал
- 1
- 2
- 3
- 5
(2 голосов)
Текст с обводкой на страницах сайта порой выглядит очень интересно и привлекательно. Обычно такие надписи размещаются на сайте в виде графического изображения. Но есть способ лучше, когда обводка реализуется при помощи CSS. Я сам недавно узнал о таком способе и решил написать о нем пару строк, тем более что способ простой и написать больше не получится ☺
Итак, разметка:
HTML
<div>TEST!</div>
Имеем простой блок с текстом. Применяем к нему следующий CSS-код и получаем надпись с обводкой.
CSS
.txt{width:500px; margin:25px; background:#0505b0; padding:50px; color:#0505b0; text-align: center; font: bold 100px Verdana, sans-serif; text-shadow: 1px 1px 1px white, -1px -1px 1px white, -1px 1px 1px white, 1px -1px 1px white;}
На самом деле ничего сложного: цвет фона у блока совпадает с цветом шрифта у текста. Обводка текста появляется за сет применения к нему CSS-правила text-shadow
, причем с тенями со всех сторон. Когда размер шрифта у надписи крупный,
то смотрится вполне прилично. При уменьшении текста, на мой взгляд выглядит хуже, но это мое мнение. Если интересно, то можно открыть демо-страничку, изменить размер шрифта при помощи средств для веб-разработчика и сделать
свои выводы.
Свойство text-shadow
поддерживается всеми современными браузерами. Что же касается IE, то в нем свойство работает начиная с версии 10. В более старших версиях тень можно сделать с помощью filter
.
Другие материалы в этой категории: « 5 библиотек для создания ярких CSS эффектов Замена стандартных маркеров у списка и их стилизация »
Наверх
Категории блога
- Битрикс (40)
- HTML-верстка (54)
- Joomla (18)
- JavaScript, jQuery (26)
- PHP (10)
- Базы данных (5)
- Разное (23)
Мои услуги
Предлагаю следующие услуги:
- Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
- Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
- Настройка и кастомизация компонентов и модулей для указанных CMS
- Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
- Разработка лендингов (landing-pages)
По все вопросам обращайтесь через форму обратной связи
Скачать
Предлагаю вашему вниманию:
- Шаблон документа HTML5 (zip, 35. 41 Кб)
- Шаблон jQuery-плагина (zip, 426 байт)
- Шаблон сайта 1С-Битрикс (zip, 3.11 Кб)
Полезное
- Шпаргалки (Cheat Sheets)
- Генератор паролей
- Метка времени для заданной даты
Добавление контура к тексту с помощью CSS
С помощью CSS вы можете оформлять текст различными способами. Вы можете добавить различные цвета, тени, подчеркивания или стиль несколькими способами. В этом посте вы рассмотрите различные методы, с помощью которых к тексту можно добавить контур или обводку текста.
Мы рассмотрим два метода, с помощью которых вы можете добавлять контуры к вашему тексту. Есть и третий, но в настоящее время он не поддерживается ни одним браузером.
Использование свойства text-stroke
Свойство text-stroke
добавляет обводку к тексту. Его можно использовать для изменения ширины и цвета текста. Это свойство поддерживается только браузерами на базе WebKit и при использовании префикса -webkit-
.
HTML
Этот текст имеет обводку
CSS
#example1{ белый цвет; размер шрифта: 40px; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: черный; }
-webkit-text-stroke-width
и -webkit-text-stroke-color
задает ширину и цвет обводки соответственно. Это два расшифрованных свойства для сокращенного свойства -webkit-text-stroke
, которое одновременно определяет цвет и ширину обводки. Таким образом, приведенный выше код CSS эквивалентен коду, показанному ниже.
CSS
#example2{ белый цвет; размер шрифта: 40px; -webkit-text-stroke: черный 2px; }
Этот текст имеет обводку
Вы не сможете увидеть приведенный выше текст, если ваш браузер не поддерживает text-stroke
свойство, так как оно имеет белый цвет шрифта. Чтобы текст был виден во всех этих браузерах, присвойте ему любой цвет текста, отличный от цвета фона, чтобы он стал видимым во всех браузерах, которые не поддерживают это свойство, и используйте -webkit-text-fill-color
. свойство для переопределения цвета текста во всех браузерах на основе WebKit.
HTML
Обводка текста не будет отображаться в некоторых браузерах
УС
#пример3{ черный цвет; размер шрифта: 34px; -webkit-text-stroke: 1px черный; -webkit-text-fill-color: белый; }
Обводка текста не будет видна в некоторых браузерах
Приведенный выше текст будет отображаться черным во всех браузерах, которые не поддерживают свойство text-transform
. Для браузеров, поддерживающих это свойство, -webkit-text-fill-color
заменяет черный цвет текста на белый.
Теперь давайте перейдем к другому методу, который можно использовать для добавления планов к вашему тексту.
Использование свойства text-shadow
Поскольку text-stroke
не имеет широкой поддержки браузеров, вы можете использовать свойство text-shadow
, которое сравнительно широко поддерживается браузерами.
HTML
Обводка с использованием тени текста
CSS
#example4{ белый цвет; размер шрифта: 40px; тень текста: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000; -1px -1px 0 #000; }
Обводка с использованием тени текста
В приведенной выше демонстрации четыре текстовые тени (вверху справа, внизу справа, внизу слева и вверху слева) задаются с радиусом размытия 0. Этот эффект аналогичен эффекту, создаваемому первым методом.
Этот метод имеет дополнительное преимущество. Мы можем настроить горизонтальные и вертикальные тени в соответствии с тем, что подходит для текста. Добавление небольшого радиуса размытия также придаст ему лучший вид, как показано в следующей демонстрации.
HTML
Обводка с радиусом размытия
CSS
#example5{ белый цвет; размер шрифта: 40px; тень текста: -1px 1px 2px #000, 1px 1px 2px #000, 1px -1px 0 #000, -1px -1px 0 #000; }
Обводка с радиусом размытия
Недостатком использования текстовых теней является то, что если задать длину тени больше 1 пикселя, то можно увидеть прерывистую обводку.
Больше с обводкой текста
Вы можете комбинировать свойства text-stroke
и text-shadow
для получения еще одного отличного эффекта.
HTML
Обводка текста
CSS
#example6{ белый цвет; размер шрифта: 40px; -webkit-text-stroke: 1px #23430C; тень текста: -1px 1px 2px #23430C, 1px 1px 2px #23430C, 1px -1px 0 #23430C, -1px -1px 0 #23430C; }
Обводка текста
HTML
Обводка текста
Обводка текста
CSS
#example7{ белый цвет; размер шрифта: 47 пикселей; -webkit-text-stroke: 3px #E21F03; } #пример8{ белый цвет; размер шрифта: 47px; -webkit-text-stroke: 5px #E21F03; }
Обводка текста
Обводка текста
Приведенная выше демонстрация создает эффект тонкой линии белого цвета, идущей по пути текста для первого текста, и изогнутой полужирной линии для второго текста. Этого можно добиться, просто увеличив ширину штриха.
Взгляните на другие эффекты обводки текста
HTML
Обводка текста
Обводка текста
Обводка текста
CSS
#example9{ белый цвет; размер шрифта: 47px; -webkit-text-stroke: 1px #F8F8F8; тень текста: 0px 1px 4px #23430C; } #пример10{ белый цвет; размер шрифта: 47px; -webkit-text-stroke: 1px #F8F8F8; тень текста: 0px 2px 4px синий; } #пример11{ цвет: #333; цвет фона: черный; размер шрифта: 56px; -webkit-text-stroke: 1px #282828; тень текста: 0px 4px 4px #282828; }
Обводка текста
Обводка текста
Обводка текста
Это были некоторые классные эффекты, которые вы можете добавить к своему тексту, используя вышеуказанные свойства. Вы можете создавать более красивые эффекты обводки текста, комбинируя и изменяя значения различных свойств, таких как цвет, радиус размытия, ширина обводки и так далее.
Поддержка браузера
Как обсуждалось ранее, свойство text-stroke
поддерживается браузерами на основе WebKit с префиксом -webkit-
. Это поддерживается Chrome , Safari , Opera и Android . С другой стороны, text-shadow
поддерживается почти всеми браузерами.
Существует также третье свойство text-outline
для добавления контура к тексту, но в настоящее время оно не поддерживается ни одним браузером.
Заключение
Легкий штрих может придать вашему тексту живой вид. Хотя text-stroke
служит цели, равномерно добавляя плавный контур, я предпочитаю использовать text-shadow
из-за хорошей поддержки браузерами. Последний не предназначен для добавления контуров, но является очень хорошим CSS-хаком, который дает вам эффект, который вы ищете. Более того, вы можете придать эффект размытия тенями, которые добавят глубины вашему макету. Хотя text-shadow
не дает хороших результатов, если длина тени больше 1 пикселя, вы всегда можете использовать комбинацию text-shadow
и text-stroke
.
штрих-текст | Монитор кампании
штрих-текст | Монитор кампанииРабочий стол Посмотреть все 11
Мобильный Посмотреть все 16
Веб-почта
Текст и шрифты
Настольный
- Настольный компьютер AOL
- Apple Mail 10
Поддерживается с префиксом
‑webkit
. - IBM Notes 9
- Перспективы 2000–03
- Прогноз на 2007–2016 годы
- Аутлук Экспресс
- Outlook для Mac
Поддерживается с префиксом
‑webkit
. - Почтовый ящик
- Thunderbird
Поддерживается с префиксом
‑webkit
. - Почта Windows 10
- Почта Windows Live
Мобильный телефон
- Android 4.2.2 Mail
Поддерживается с префиксом
‑webkit
. - Android 4.4.4 Mail
Поддерживается с префиксом
‑webkit
. - Приложение AOL Alto для Android
Поддерживается с префиксом
‑webkit
. - Приложение AOL Alto для iOS
Поддерживается с префиксом
‑webkit
. - BlackBerry
Поддерживается с префиксом
‑webkit
. - Приложение Gmail для Android
- Приложение Gmail для Android IMAP
- Приложение Gmail для iOS
- Мобильная веб-почта Gmail
- iOS 10 Mail
Поддерживается с префиксом
‑webkit
. - iOS 11 Mail
Поддерживается с префиксом
‑webkit
. - Приложение Outlook для Android
Поддерживается с префиксом
‑webkit
.