Как сделать обводку текста в CSS?
Приветствую вас, дорогие посетители сайта Impuls-Web!
Сегодня я хотела бы продолжить тему форматирования и показать, как можно сделать обводку текста CSS.
Навигация по статье:
Обводка теста css-свойством text-shadow
Для того, что бы придать эффект обводки мы можем использовать css-свойство text-shadow для задания тени тексту.
По заданию параметров, данное свойство очень похоже на box-shadow и имеет следующий вид:
text-shadow:
Например:
<div> <p>Эксперимент с тенью</p> </div>
<div>
<p>Эксперимент с тенью</p>
</div> |
СSS:
#content .teni p{ font-size:25px; color:#fff!important; text-shadow: 1px 1px 1px #000; }
#content .teni p{ font-size:25px; color:#fff!important; text-shadow: 1px 1px 1px #000; } |
Эксперимент с тенью
Так же, как и в случае с тенью для блока, если нам нужна обводка текста css по контуру, то нам нужно задать тень четыре раза.
Вот как это будет выглядеть:
<div> <p>Обводка текста в CSS</p> </div>
<div>
<p>Обводка текста в CSS</p>
</div> |
#content .obvod p{ font-size:30px; color:#E2A126!important; text-shadow: 1px 0 1px #000, 0 1px 1px #000, -1px 0 1px #000, 0 -1px 1px #000; }
#content .obvod p{ font-size:30px; color:#E2A126!important; text-shadow: 1px 0 1px #000, 0 1px 1px #000, -1px 0 1px #000, 0 -1px 1px #000; } |
Обводка текста в CSS
В принципе, ни чего сложного. Если понять закономерность и немного поэкспериментировать, то у вас обязательно получиться добиться нужного вам результата.
Онлайн-генератор теней
Если же вам не хочется заморачиваться или вы постоянно путаетесь в параметрах свойства, то вы можете воспользоваться специальным генератором обводки текста на CSS3.
Здесь все просто:
- 1.Переходите на страницу сервиса
- 2.Рабочая область поделена на две части. В левой части вам нужно задать параметры для текста, а в правой вы можете посмотреть, что в результате получится.
- 3.Задаете тип шрифта, его размер, цвет, а так же цвет обводки текста, и ее толщину, и размытие.
- 4.После того, как вы задали все параметры, вам просто нужно скопировать сгенерированный код в окошке CSS и вставить его в свой файл стилей с заменой класса .ts на свой.
Надеюсь, показанные мой в этой статье инструменты, помогут вам сделать для своего сайта красивую обводку текста CSS. Не забывайте делиться статьей в социальных сетях, и обязательно подписывайтесь на мою рассылку новостей.
Хорошего вам дня! И до скорых встреч!
С уважением Юлия Гусарь
impuls-web.ru
Делаем тень к тексту на CSS. Обводка текста с помощью CSS — LOCO.RU
Конечно, в Photoshop’е можно наводить красоту, но что делать если нужно сохранить именно текст, а не вставлять его красивой картинкой?
Например, заголовок для пущей индексации захотелось сделать текстом в тегах <h2> </h2>. Но при этом сохранить красивость. Вот так:
* — здесь применён ещё градиент к тексту, используя опять таки CSS. О том как это реализовать — читайте в статье — Делаем градиент к тексту, используя CSS
Итак, делаем текст с тенью, используя CSS:
Уровень 3 CSS обладает свойством ‘text-shadow’ для добавления тени на каждую букву любого текста.
Другой интересный пример:
Обводка текста с помощью CSS
Обводку текста с помощью CSS без прибегания к скриптам сделать возможно. Данный эффект можно создать с помощью свойства text-shadow. Хоть это свойство IE и не воспринимает ни в одной из своих версий – в остальных популярных браузерах описанный рецепт будет замечательно работать.
Рассмотрим приведённый ниже код:
Пример №1
h2{text-shadow: red 1px 0px, red 1px 1px, red 0px 1px, red -1px 1px, red -1px 0px, red -1px -1px, red 0px -1px, red 1px -1px;}Первый параметр свойства text-shadow устанавливает цвет тени, второй смещение тени по горизонтали относительно текста, третий смещение по вертикали. При указании смещения тени во всех направлениях вокруг текста на 1 пиксель по очереди и получается эффект обводки.
Пример обводки №1
Чтобы сделать обводку более насыщенной, можно применить четвёртый параметр text-shadow, который отвечает за радиус размытия тени:
Пример №2
h2{text-shadow: red 1px 0px, red 1px 1px, red 0px 1px, red -1px 1px, red -1px 0px, red -1px -1px, red 0px -1px, red 1px -1px, red 0 0 3px, red 0 0 3px, red 0 0 3px, red 0 0 3px, red 0 0 3px, red 0 0 3px, red 0 0 3px, red 0 0 3px;}
Пример обводки №2
Если Вы заметили, свойство «red 0 0 3px» несколько раз повторяется. Именно в этом и скрывается эффект насыщенности. Для достижения более чёткого отображения обводки свойство можно добавлять с другими параметрами большое количество раз. Единственным недостатком является то, что это может сильно замедлить работу браузера на слабых компьютерах.
loco.ru
Обводка текста при помощи HTML и CSS / Песочница / Хабр
Привет всем хабражителям. Начал я как-то теплым летним вечером рисовать дизайн сайта, попробовал применить однопиксельную обводку текста, смотрелось довольно миленько, решил оставить, наивно думая что большинство последних версий браузеров будут иметь какое-то черновое CSS3 свойство.
Когда дошло дело до верстки того самого элемента, текст в котором нужно было обвести, выяснилось, что text-stroke доступен только в webkit’ах, а это всего-лишь 20-30% браузеров.
Если вам стало интересно то добро пожаловать под кат.
Для множественной тени (так-же применимо в современных браузерах и к background) следует описать все тени (я их использовал 4) через запятую, следующим образом: body{
text-shadow: #000 1px 0 0px, #000 0 1px 0px, #000 -1px 0 0px, #000 0 -1px 0px;
}
в результате получаем правую, нижнюю, левую и верхнюю тени
text-shadow имеет следующий синтакс: #цвет сдвиг_по_х сдвиг_по_у размер_размытости; являеться CSS2.1 свойством.
Для большей наглядности используем сдвиг по больше и раскрасим тень в разные цвета:body{
color: #000;
text-shadow: text-shadow: #f00 40px 0px 0px, #0f0 0px 20px 0px, #00f 0px -20px 0px, #f0f -40px 0px 0px;
}
Получим следующий результат:
Также можно поиграться с размером шрифта, сдвигом, размытием для получения желаемого результата. К примеру для получения изображения в начале поста использовался следующий вариант: body{
font: 40px Tahoma;
color: #e7e7e7;
text-shadow: #000 2px 0px 2px, #000 0px 2px 2px, #000 0px -2px 2px, #000 -2px 0px 2px;}
Надеюсь эта информацию будет кому-то полезной.
habr.com
Css обводка текста белым цветом
Создание эффекта контурного текста
Создание обводки текста CSS основано на свойстве -webkit-text-stroke, которое принимает в качестве значений ширину и цвет:
.outline { -webkit-text-stroke: 2px cyan; }
Значение width указывает, какой толщины будет контур. Значение color определяет цвет контура. Все довольно просто. Пример применения этого свойства:
.outline { -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: cyan; }
Следует отметить, что у свойства text-stroke есть префикс webkit. Это может показаться странным, но это единственная версия, поддерживаемая всеми браузерами. Даже браузеры, не использующие webkit, такие как Firefox и Edge, поддерживают это свойство.
Размещаем все вместе
Мы рассмотрели свойство -webkit-text-stroke и его использование. Теперь проиллюстрируем все это.
Перед тем, как сделать обводку текста CSS, создайте новый документ HTML и добавьте в него следующую разметку:
<!DOCTYPE html> <html> <head> <meta name=»viewport» content=»width=device-width, initial-scale=1.0″ /> <title>Text Outline</title> <style> body { background-color: #0F1020; padding: 100px; } #textContainer p { font-family: sans-serif; font-size: 64px; fong-weight: 100; color: #E6E8E6; margin: 0; } </style> </head> <body> <div> <p>Did you know that your fingerprint is unique? <span>Of course you did!</span></p> </div> </body> </html>
Сохраните веб-страницу, а затем откройте ее в браузере. Вы должны увидеть примерно следующее:
Взгляните на разметку, отвечающую за CSS обводку текста белым цветом, который мы видим:
<div> <p>Did you know that your fingerprint is unique? <span>Of course you did!</span></p> </div>
Мы хотим разместить текст внутри элемента span и отобразить его с эффекта контура, о котором говорили ранее. Обводка должна быть шириной 1 пиксель и иметь зеленовато-лимонный цвет. Для этого добавьте следующий код в нижнюю часть блока style (ниже существующих правил стиля):
#textContainer .outline { -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #AFFC41; }
После этого сохраните веб-страницу и откройте (обновите) ее в браузере.
Вы должны увидеть появившийся контур:
Если хотите отобразить только контур текста, все, что нужно сделать, это присвоить CSS свойству color значение transparent:
#textContainer .outline { -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #AFFC41; color: transparent; }
После этого текст «Of course you did!» будет отображен только с помощью контура!
Работа со старыми браузерами
Свойство text-stroke поддерживается браузерами хорошо. Но, возможно, вы захотите отобразить альтернативный вариант для тех пользователей, которые используют старые версии браузеров. В этих случаях нужно «закрасить» текст сплошным цветом. Это можно сделать, комбинируя свойства color и -webkit-fill-color:
#textContainer .outline { color: #E6E8E6; -webkit-text-fill-color: transparent; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #AFFC41; }
В этом случае текст будет отображаться сплошным цветом для старых свойств (с помощью свойства color). Если поддерживаются свойства -webkit-text, то webkit-text-fill-color переопределит свойство цвета и отобразит контур с прозрачным цветом заливки.
Заключение
Свойство -webkit-text-stroke упрощает создание обводки текста CSS. Раньше, если бы мы хотели сделать это, пришлось бы полагаться на изображения, хитрости с тенями, использование специального контурного шрифта. Теперь нам не нужно все это делать!
Перевод статьи «Creating a Text Outline Effect» был подготовлен дружной командой проекта Сайтостроение от А до Я.
rpilot62.ru
Обводка текста css средствами: два способа реализации примера
Приветствую всех читателей текущей публикации! Сегодня мы разберем с вами, как создается обводка текста css-средствами. Я расскажу вам, какие на данный момент существуют инструменты для реализации обводки вокруг текстового контента, как все это работает в различных браузерах и конечно же приведу конкретные примеры. А теперь давайте приступать к делу!
Обратимся к привычным инструментам
Долгое время, да и по сей день разработчики используют свойство text- shadow для создания контура вокруг символов. Но на самом деле названный элемент изначально был разработан для формирования теней вокруг текста.
Благодаря гибкому механизму управления слоями, с помощью text- shadow можно создать абсолютно разные эффекты: вдавленный или объемный, прозрачный или с градиентом текст и так далее. Конечно же данное свойство можно использовать и для реализации контуров.
Преимущество текущего инструмента состоит в том, что:
- он привычен девелоперам в использовании;
- корректно отображается во всех браузерах без исключения;
- прост в использовании;
- позволяет создавать различные эффекты для контента.
А теперь рассмотрим программную реализацию. В html-разметке я создал простой заголовок первого уровня, а в стилях из основного указал цвет текста и параметры тени.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html>
<html lang="en">
<head>
<title>Пример создания черного контура </title>
<meta charset="utf-8">
<style>
h2{
text-align: center;
font-size: 39px;
color:#fff;
background: #FFE1FF;
text-shadow: 0 0 2px #010010;
}
</style>
</head>
<body>
<h2>Мега-супер-пупер заголовок</h2>
</body>
</html> |
<!DOCTYPE html> <html lang=»en»> <head> <title>Пример создания черного контура </title> <meta charset=»utf-8″> <style> h2{ text-align: center; font-size: 39px; color:#fff; background: #FFE1FF; text-shadow: 0 0 2px #010010; } </style> </head> <body> <h2>Мега-супер-пупер заголовок</h2> </body> </html>
Однако в таком случае обводку практически не видно. Поэтому приготовьтесь к тому, что в данном блоке придется создавать несколько слоев:
text-shadow: 0 0 2px #010010, 0 0 3px #010010, 1px 1px 2px #010010, 2px 2px 2px #010010, 3px 3px 1px #010010;
Несмотря на существование данного механизма был создан и другой, ориентированный конкретно на реализацию контура вокруг символов.
Новый инструмент для решения поставленной задачи
Среди свойств стилевых таблиц css3 появилось новое, имя которому -webkit-text-stroke. Названное свойство работает только в браузерах, созданных на движке Webkit. А значит, к сожалению, оно не будет отображаться в Firefox и Internet Explorer.
Хочу вас сразу предупредить, что текущий инструмент находится в так называемой экспериментальной стадии. Его вы не найдете даже в спецификациях W3C. Хотя ранее он был описан под наименованием text-outline, а после удален из документации.
Работать с -webkit-text-stroke достаточно просто, так как он функционирует как и border. Для установки определенного цвета к указанному выше названию добавляется -color, а для определения толщины – -width. Однако, как и в border, можно использовать сокращенный вид описания стилей. Т.е. указать вначале толщину обводки, а после – ее цвет. Для лучшего понимания материала давайте разберем пример.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html>
<html lang="en">
<head>
<title>Пример реализации яркого контура </title>
<meta charset="utf-8">
<style>
body {
background: #7FFFD4;
}
h2{
text-align: center;
font-size: 46px;
-webkit-text-stroke-width: 3px;
-webkit-text-stroke-color: #000080;
font-family: Arial;
color:#fff;
}
</style>
</head>
<body>
<h2>Мега-супер-пупер заголовок</h2>
</body>
</html> |
<!DOCTYPE html> <html lang=»en»> <head> <title>Пример реализации яркого контура </title> <meta charset=»utf-8″> <style> body { background: #7FFFD4; } h2{ text-align: center; font-size: 46px; -webkit-text-stroke-width: 3px; -webkit-text-stroke-color: #000080; font-family: Arial; color:#fff; } </style> </head> <body> <h2>Мега-супер-пупер заголовок</h2> </body> </html>
Как вы видите, в этом случае обводка выглядит аккуратно и создается намного проще.
Благодаря данному свойству можно создавать не только привычную нам обводку, а и делать ее полупрозрачной.
Однако не забывайте, что при использовании text-stroke стоит позаботиться о корректном отображении текстового контента и в других браузерах.
Несколько слов о генераторах
Если вы не знаете какой код стоит писать для реализации того или иного дизайна, то воспользуйтесь онлайн-генераторами. В качестве примера могу привести ссылку http://protocoder.ru/css/strokeTextGen. Перейдя по ней, вы сможете сгенерировать определенный вид контура для текста, а также в конструкторе ниже посмотреть полученный код css.
На этой ноте моя публикация подошла к концу. Если вам понравился изложенный материал, то порадуйте меня своими заявками на подписку, а также не жадничайте и делитесь интересными ссылками с коллегами и друзьями. Пока-пока!
С уважением, Роман Чуешов
Прочитано: 69 раз
romanchueshov.ru
Текст — обводка кистью
Итак, приступим.
Как обычно, начнём с создания нового документа. Создайте документ шириной 700 и высотой 220 пикселей на белом фоне.
Теперь на панели инструментов берём инструмент «Горизонтальный текст» (Horizontal Type Tool) и пишем слово, я написал слово «кисть». Для нашей задачи лучше подойдёт шрифт с толстыми буквами, я взял шрифт «Терминатор», скачать который Вы можете здесь. Цвет заливки шрифта не имеет значения. Вот что у меня получилось в результате:
Кликаем правой клавишей мыши по слою с текстом в панели слоёв и выбираем пункт «Создать рабочий контур» (Create Work Path) из контекстного меню. После чего вокруг букв появится контур:
Теперь отключим видимость текстового соля и создадим новый слой над текстовым, вот как должна выглядеть теперь панель слоёв:
А в документе отображается только контур:
Сейчас нам необходимо подготовить кисть для обводки текста. Для этой задачи неплох подойдут кисти, имитирующие мягкий карандаш, скачать которые можно здесь, но я воспользуюсь стандартной фотошоповской кистью-аэрографом.
В русской версии она называется почему-то «Засоленная (акварель)», а в английской — Salty watercolor, ну да ладно, найти её можно по картинке:
Нам необходимо только изменить некоторые стандартные настройки кисти. В окне настройки кисти снимаем галки со всех опций, и увеличиваем параметр «Кегль»(Size) до 300 пикселей, «Зернистость» (Granularity) увеличиваем до 100%, а «Степень разбрызгивания (Spatter Amount) делаем 11%, смотрите рисунок:
После того, как настройки кисти закончены, переходим на панель контуров и кликаем по кнопке «Выполнить обводку контура кистью» (Stroke Path with Brush):
Собственно, на этом обводка готова. Вот как выглядит конечный результат:
Мы можем использовать и другие стандартные кисти, предварительно изменив их дефолтные настройки:
А это я получил, используя кисть «Перекрёстные штрихи» (Crosshatch) из встроенного в Photoshop набора «Дополнительные кисти» (Assorted Brushes)
Если обводка выглядит бледноватой, то можно нажать на кнопку «Выполнить обводку контура кистью» (Stroke Path with Brush) ещё раз:
Таким образом, выбирая различные кисти, мы можем получить практически любую обводку текста.
rugraphics.ru
Как сделать обводку текста?
Ваш вопрос:Как сделать обводку текста?
Ответ мастера:Иногда при работе с текстом нужно привлечь внимание читателя к той или иной части текста. В этом случае можно сделать обводку текста. Для этого вам понадобится программа Photoshop. Вы можете это сделать двумя способами. И оба этих способа мы сейчас рассмотрим.
Первый способ. В меню «Файл» (File) найдите команду «Новый» (New). Нажмите на нее и создайте новый документ в программе Photoshop. Новый документ можно создать при помощи комбинаций клавиш Ctrl+N.
В палитре «Инструменты» находится список инструментов. Найдите там «Горизонтальный текст» (Horizontal Type Tool) и выберите его. Теперь курсор нужно навести на новый документ, и щелкнуть левой кнопкой мыши там, где нужно написать текст. Напишите текст и перенесите его в растр. Для этого нужно выбрать палитру «Слои» (Layers), выбрать опцию «Растрировать текст» (Rasterize Type) и правой кнопкой мыши щелкнуть по текстовому слою.
Сохранить созданный документ. Для этого в меню «Файл» нажать на кнопку «Сохранить».
Второй способ. При этом способе вам не обязательно переводить созданный текст в растр. Обводка будет создана как стиль слоя. И текст можно будет редактировать с ней. Чтобы это сделать, надо создать слой с текстом через «Горизонтальный текст».
Правой кнопкой мыши нажмите на текст. Выйдет список опций. Выберите «Опции наложения» (Blending Options). В чекбоксе «Обводка» (Stroke) поставьте галочку. И нажать левой кнопкой мышки по этой вкладке. Откроется вкладка настроек. Нужно выбрать ширину обводки, или, передвигая ползунок, или поставить число в поле «Размер» (Size). В списках можно выбрать позицию обводки и режим наложения. Во вкладке «Тип заливки» (Fill Type) можно выбрать, чем вы хотите заполнить обводку. Это может быть цвет, градиент или текстура. Настроить. Все, что вы делаете, будет отображаться на созданном вами документе. Если вас все устраивает, нажмите на «ОК».
Теперь нужно сохранить текст с обводкой. Для этого в меню «Файл» нажмите на пункт «Сохранить».
remont-komputerov-notebook.ru