Меню

Как обвести шрифт черным цветом



Как сделать обводку текста в CSS?

Приветствую вас, дорогие посетители сайта Impuls-Web!

Сегодня я хотела бы продолжить тему форматирования и показать, как можно сделать обводку текста CSS.

Навигация по статье:

Обводка теста css-свойством text-shadow

Для того, что бы придать эффект обводки мы можем использовать css-свойство text-shadow для задания тени тексту.

По заданию параметров, данное свойство очень похоже на box-shadow и имеет следующий вид:

Эксперимент с тенью

Эксперимент с тенью

Так же, как и в случае с тенью для блока, если нам нужна обводка текста css по контуру, то нам нужно задать тень четыре раза.

Вот как это будет выглядеть:

Обводка текста в CSS

Обводка текста в CSS

В принципе, ни чего сложного. Если понять закономерность и немного поэкспериментировать, то у вас обязательно получиться добиться нужного вам результата.

Онлайн-генератор теней

Если же вам не хочется заморачиваться или вы постоянно путаетесь в параметрах свойства, то вы можете воспользоваться специальным генератором обводки текста на CSS3.

Здесь все просто:

  1. 1. Переходите на страницу сервиса
  2. 2. Рабочая область поделена на две части. В левой части вам нужно задать параметры для текста, а в правой вы можете посмотреть, что в результате получится.

Надеюсь, показанные мой в этой статье инструменты, помогут вам сделать для своего сайта красивую обводку текста CSS. Не забывайте делиться статьей в социальных сетях, и обязательно подписывайтесь на мою рассылку новостей.

Источник

белый шрифт с чёрной обводкой

Нужно сделать белый шрифт с чёрной обводкой.
Много гуглил, но ничего подходящего не нашёл.

пробовыл создавать сзади такие же чёрные надписи со смещением, но результат не понравился.

Интересует, возможно ли сделать векторный такой шрифт.
Все что видел из похожего — белый контур символа, а внутри — прозрачность, но это не устраивает.
Нужно как в ведьмаке в главном меню.

скачай корел -____-

не умею им пользоваться и учится сейчас нет возможности, если это так просто решается, почему тогда нигде не могу найти такой шрифт ?

Шрифты, где смешано черное и белое есть, но не факт, что они понравятся. А вообще такую штуку можно сделать вручную, только надо сначала шрифты вывести на промежуточную поверхность, а потом на этой поверхности построить черную обводку. Точка превращается в обводку, если рядом имеются белые точки на расстоянии N. Собственно, вот и весь метод.

Выглядит так:

Distance field и в шейдере аутлайн. Посмотри пейперы вальве.

Мартин Кипирко
пишешь текст, в настройках текста ставиш аутлайн нужного цвета и толщины, экспортишь в картинку -___-

Мартин Кипирко
в иллюстраторе за 15 секунд

дело в том , чтоэто все не очень подходит.
я вообще программист, пишу игру на скриптах.
низкоуровневого доступа к графике нет.
растр использовать мягко говоря неудобно, т.к. приложение рассчитано на устройства с разными разрешениями.

в моём представлении идеальным было бы на основе имеющегося шрифта сгенерить такойже, только чтобы буквы были толще.
т.е. чтобы при наложении одинаковых надписей с одинаковым текстом, получался белый шрифт с чёрной обводкой.

незнаю возможно ли это..
пока что я ещё размышляю на эту тему.

Мартин Кипирко
что мешает вам таким способом как описано выше собрать свой фонт?

как ? в фотошопе ? насколько я знаю, форошоп — редактор растровой графики, а все нормальные шрифты — векторные.
качество будет плохим при увеличении и использовать картинки как шрифт не очень удобно.

возможно здесь я в чем-то ошибаюсь, тогда обьясните пожалуйста подробнее.

по-моему я так пробовал, но не получилось, потому что толщина линий шрифта изменяется совсем незначительно.
получается , что по высоте он выступает, а по ширине остаётся таким же.

Мартин Кипирко
> как ? в фотошопе ? насколько я знаю, форошоп — редактор растровой графики, а
> все нормальные шрифты — векторные.
> качество будет плохим при увеличении и использовать картинки как шрифт не очень
> удобно.
> возможно здесь я в чем-то ошибаюсь, тогда обьясните пожалуйста подробнее.

ошибаетесь
1. про фотошоп никто не упоминал; фигурировали программы для работы с векторной графикой corel draw и illustrator
2. шрифт не является векторным объектом, шрифт — это шрифт (расширение ttf)
ни напечатанный стандартной командой текст, ни каждая буква по отдельности в таком тексте изначально не являются векторными объектами

как человек с дизайнерским образованием я бы оторвал руки за создание обводки путем масштабирования и последующего наложения текста
потому что никто не отменял понятие кернинга, например, и очевидно, что кроме уродства вышеуказанный метод ничего не даст

я бы рекомендовал автору разобраться, какими алгоритмами меняется цвет шрифта и формируется обводка в программах векторной графики и использовать эти алгоритмы в своем коде

[ТОЛСТО]
Есть конечно очень костыльный метод, если нет пока времени.
Выводим черным цветом текст с координатами (-1;-1) (1;-1) (-1;1) (1;1)
Затем выводим белым цветом текст с координатами (0;0)
Но это конечно много лишних вызовов на отрисовку, но дает результат. Для большей точности можно к черному еще добавить (0;-1) (-1;0) (1;0) (0;1)
[/ТОЛСТО]

Источник

LiveInternetLiveInternet

Рубрики

  • Компьютерная графика (2122)
  • Клипарты (332)
  • Мои рамочки (279)
  • Мои Музыкальные флешки и открытки (272)
  • Флешки уроки программы (189)
  • Фоны и разделители (183)
  • Уроки gif — анимации (170)
  • Уроки фотошопа (обработка фото, эффекты) (96)
  • Фракталы (уроки, программы, опыты) (76)
  • Плееры (75)
  • Рамочки (71)
  • Мои часики и информеры (56)
  • Оформление дневника (56)
  • Флешки, флеш плееры, календари, информеры, открытк (54)
  • Открытки и коллажи (52)
  • Художественные произведения (44)
  • Мои фракталы, футажи, фоны и фотографии (43)
  • Уроки фотошопа (рисование) (43)
  • Уроки фотошопа и HTML-Css (рамки) (39)
  • Мои коллажи и открытки (30)
  • Мастерская Наденьки — mimozochka (21)
  • Схемы оформления дневника (13)
  • Флеш-мастерская от Георгия (12)
  • Футажи и гифки от Diza (10)
  • Мои уроки (10)
  • Уроки Gimp (10)
  • Уроки — создание сайта (8)
  • Управление шрифтами (8)
  • Мастерская Катеньки — Cafe__de__Paris (3)
  • Рамочки кулинарные (3)
  • Живопись (451)
  • Пейзаж (131)
  • Портреты (84)
  • Сюрреализм и мир фантазии (79)
  • Натюрморт (72)
  • Городской пейзаж (65)
  • Графика (47)
  • Жанровая (35)
  • Анималисты (2)
  • Красота Земли (369)
  • Пейзаж (94)
  • Фотопутешествия по Европе (89)
  • МАКРО фотографии и видео (46)
  • Фотопутешествия по Азии (41)
  • Фотопутешествия по России (37)
  • Городской пейзаж (37)
  • Фотопутешествия по Северной Америке (19)
  • Фотоконкурсы (14)
  • Подземный мир (9)
  • Подводный мир (9)
  • Фотопутешествия по Латинской Америке (9)
  • Фотопутешествия по Австралии и Океании (8)
  • Фотопутешествия по Африке (5)
  • Фотопутешествия по Антарктиде и северу (1)
  • Адреса сайтов и блогов (226)
  • Компьютерные сети и программы (159)
  • Блоги (7)
  • Фотобанки и Фотохостинги (5)
  • Генераторы (2)
  • Музыка (126)
  • Песни (52)
  • Танец (39)
  • Инструментальная (21)
  • Классика (15)
  • Relax (4)
  • Голоса птиц (3)
  • Искусство (109)
  • Прикладное искусство (64)
  • Архитектура (25)
  • Скульптура (20)
  • Кино (1)
  • Женский образ (104)
  • Кулинария (102)
  • Выпечка (31)
  • Салаты и закуски (25)
  • Мясные блюда (19)
  • Овощи (17)
  • Рыба (10)
  • Десерты (8)
  • Грибы (6)
  • Первые блюда (6)
  • Напитки (2)
  • за 5 минут (1)
  • Дизайн (87)
  • Мода (48)
  • Интерьер (18)
  • Куклы (9)
  • Ландшафт (9)
  • Флора (78)
  • Цветы (70)
  • Фауна (70)
  • Звери (36)
  • Птицы (33)
  • Насекомые (9)
  • Домашние животные (6)
  • Литература (60)
  • Поэзия (52)
  • Проза (8)
  • Фетиш (49)
  • Женские украшения (ювелирка, бижутерия) (40)
  • Автомобили и мотоциклы (6)
  • Вечное (43)
  • Люди (39)
  • Дети (19)
  • Женщины (все для женщин) (10)
  • Спорт (4)
  • Мужчины (1)
  • Философия (33)
  • Притчи (18)
  • Цитаты (15)
  • Здоровье (32)
  • Народная медицина (13)
  • Традиционная европейская медицина (7)
  • Оздоровительные гимнастики (6)
  • Китайская медицина (3)
  • Фитотерапия (3)
  • Юмор (29)
  • Анекдоты (12)
  • Приколы (11)
  • История (25)
  • Личности в истории (13)
  • Космос (12)
  • Натюрморты (12)
  • Психология (6)
  • Мои фотографии (4)
  • Мои фотографии — Пейзаж (2)
  • Мои фотографии — Разное (1)
  • Мои фотографии — Макро (1)
  • Видео (3)
  • Иностранные языки (3)
  • Вспомогательные программы (2)
  • Переводчики (1)
  • Явления природы (2)
  • Ураганы, смерчи, торнадо (1)

Музыка

Поиск по дневнику

Подписка по e-mail

Интересы

Статистика

Обводка для текста (коды HTML)

Обводка для текста

ОБВОДКА ДЛЯ ТЕКСТА
БЕЗ ФОТОШОПА

Кто-то в комментариях попросил меня рассказать как на пестром фоне сделать более видимым текст. Решила дать урок. Может кому-то пригодится.

Посмотрите ниже пример двух рамок с пестрым фоном и текстом. В верхней рамке текст написан с обводкой и поэтому его легче читать, а в нижней рамке текст написан обычным способом и читается с трудом. О том как сделать обводку мы сегодня и поговорим.

Женщина остаётся Женщиной,
Неважно, сколько ей лет,
И сколько лет ей по паспорту,
Замужем или нет.
Она может быть молоденькой,
И может быть средних лет,
И дамой преклонного возраста,
У Женщины возраста нет!
Женщина остаётся Женщиной,
Неважно, сколько ей лет,
И сколько лет ей по паспорту,
Замужем или нет.
Она может быть молоденькой,
И может быть средних лет,
И дамой преклонного возраста,
У Женщины возраста нет!

Если надо вставить текст в рамку.
Копируем в окошечке код.

Код будет выглядеть вот так (см. фото А)

Код дан с обводкой черного цвета. Код цвета обводки выделен красной рамочкой. Вместо цифр 000000 вставляете код(6 знаков) нужного вам цвета. Вместо слов «Здесь будет Ваш текст» вставляете свой текст, всё копируете и вставляете в рамочку.

Если надо вставить текст без рамки.
Копируем в окошечке код.

Код будет выглядеть вот так (см. фото Б)

В код добавился параметр размера (синяя рамочка) и цвета (зеленая рамочка) шрифта. Их нужно заменить на свои.

Вот и всё! Удачи!

Источник

Как в Photoshop сделать обводку текста?

Вы задумывались, как сделать текст привлекательным. Оформите его красивым стилем. Рассмотрим, как в Фотошопе (Photoshop) сделать обводку текста.

А нужно ли это

Просматривая изображения с надписями, вы замечали, что тексту чего-то нахватает? Надпись смотрится не оформлено. Что предпринять? Обведите контент. Рассмотрим, как это сделать в Photoshop.

Как в Photoshop сделать обводку вокруг текста

Откройте изображение, далее:
Выберите «Обводка». Настройте цвет, расположение толщину.
Рассмотренный способ создает обводку одного цвета. Как сделать ее любой конфигурации.

Делаем контур текста другим цветом

Напишите текст. Перейдите:
Создадим, например, контур со скругленными краями. В меню выберите:
Далее:
Получилось следующее:
Выберите инструмент:
Нажмите кнопку «Уточнить»:
Далее:
Создайте новый слой:
Активируйте слой. Перейдите:
Далее:
Выберите цвет:
Нажмите «Ctr+D», чтобы снять выделение. Перемещаем слой:
Нажимаем два раза ЛКМ по слою с обводкой. Отметьте пункт «Наложение». Выбираем стиль градиента:
Далее:
Получилось следующее:

Поэкспериментируйте со стилями слоя, для получения интересных результатов.

Теперь вопросов, связанных с тем, как сделать обводку текста в Фотошопе (Photoshop) СС не возникнет.

Обводка текста в Photoshop онлайн

Перейдите по адресу: https://online-fotoshop.ru/ . Онлайн версия оснащена ограниченным набором функций. Создать сложную обводку не получится. Выберите:
Отредактируйте параметры:

Вывод

Мы рассмотрели, как в Фотошопе (Photoshop) сделать контур у текста. Используйте текстуру, чтобы добиться интересных эффектов. Экспериментируйте.

Источник

Читайте также:  Как получить цвет пепельная роза