Как сделать обводку в html css
Перейти к содержимому

Как сделать обводку в html css

  • автор:

CSS Magic #3. Обводка для текста (text-stroke effect)

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

HTML

div class="no-ie">Text with stroke.div>
div class="ie">Text with stroke.div>

Самая обыкновенная разметка. Даже и останавливаться на ней неохота, разве что тут два текста, один будет под IE, другой — под все остальное.

CSS

.no-ie  
font-size: 4em;
-webkit-text-stroke: 1px darkgrey;
-webkit-text-fill-color: transparent;
margin-bottom: 2em;
>

.ie
font-size: 4em;
color: #fff;
text-shadow:
-0 -1px 0 #000000,
0 -1px 0 #000000,
-0 1px 0 #000000,
0 1px 0 #000000,
-1px -0 0 #000000,
1px -0 0 #000000,
-1px 0 0 #000000,
1px 0 0 #000000,
-1px -1px 0 #000000,
1px -1px 0 #000000,
-1px 1px 0 #000000,
1px 1px 0 #000000,
-1px -1px 0 #000000,
1px -1px 0 #000000,
-1px 1px 0 #000000,
1px 1px 0 #000000;
>

Используем два -webkit-свойства -webkit-text-stroke и -webkit-text-fill-color для достижения нужного результата. Текст будет прозрачным и будет иметь красивую, нужную нам, обводку. Под IE идем другим путем — придется задать цвет тексту и text-shadow . Конкретно такой код может не сработать, поэтому вот вам генератор тени для текста.

Определять браузер можно любым доступным способом (благо их полно в интернете), но если нужно — я расскажу в отдельной статье как)

И по традиции пен:

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

Обводка текста CSS: создание эффекта контурного текста

Обводка текста CSS основана на свойстве -webkit-text-stroke , которое принимает в качестве значений ширину и цвет:

.outline

Значение width указывает, какой толщины будет контур. Значение color определяет цвет контура. Все довольно просто. Пример применения этого свойства:

.outline

Следует отметить, что у свойства text-stroke есть префикс webkit . Это может показаться странным, но это единственная версия, поддерживаемая всеми браузерами. Даже браузеры, не использующие webkit , такие как Firefox и Edge , поддерживают это свойство.

Обновлено: 2022-05-19 14:46:40 МЛ Мария Логутенко автор материала

Размещаем все вместе

Мы рассмотрели свойство -webkit-text-stroke и его использование. Теперь проиллюстрируем все это.

Перед тем, как сделать обводку текста CSS , создайте новый документ HTML и добавьте в него следующую разметку:

    Text Outline body < background-color: #0F1020; padding: 100px; >#textContainer p  

Did you know that your fingerprint is unique? Of course you did!

Сохраните веб-страницу, а затем откройте ее в браузере. Вы должны увидеть примерно следующее:

Размещаем все вместе

Взгляните на разметку, отвечающую за CSS обводку текста белым цветом, который мы видим:

 

Did you know that your fingerprint is unique? Of course you did!

Мы хотим разместить текст внутри элемента span и отобразить его с эффекта контура, о котором говорили ранее. Обводка должна быть шириной 1 пиксель и иметь зеленовато-лимонный цвет. Для этого добавьте следующий код в нижнюю часть блока style ( ниже существующих правил стиля ):

#textContainer .outline

После этого сохраните веб-страницу и откройте ( обновите ) ее в браузере. Вы должны увидеть появившийся контур:

Размещаем все вместе - 2

Если хотите отобразить только контур текста, все, что нужно сделать, это присвоить CSS свойству color значение transparent :

#textContainer .outline

После этого текст « Of course you did! » будет отображен только с помощью контура!

Работа со старыми браузерами

Свойство text-stroke поддерживается браузерами хорошо . Но, возможно, вы захотите отобразить альтернативный вариант для тех пользователей, которые используют старые версии браузеров. В этих случаях нужно « закрасить » текст сплошным цветом. Это можно сделать, комбинируя свойства color и -webkit-fill-color :

#textContainer .outline

В этом случае текст будет отображаться сплошным цветом для старых свойств ( с помощью свойства color ). Если поддерживаются свойства -webkit-text , то webkit-text-fill-color переопределит свойство цвета и отобразит контур с прозрачным цветом заливки.

Заключение

Свойство -webkit-text-stroke упрощает создание обводки текста CSS . Раньше, если бы мы хотели сделать это, пришлось бы полагаться на изображения, хитрости с тенями, использование специального контурного шрифта. Теперь нам не нужно все это делать!

МЛ Мария Логутенко автор-переводчик статьи «

Как добавить вокруг текста рамку определенного цвета?

Для создания рамки вокруг текста используйте стилевое свойство border , добавляя его к соответствующему селектору. Например, если для текста применяется тег

, то для него надо установить следующий стиль.

Применение свойства border к текстовому абзацу продемонстрировано в примере 1.

Пример 1. Рамка вокруг абзаца

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Рамка вокруг текста p 

Нет страшнее зверя в сибирских лесах, чем разъяренный заяц-мутант. Вы видели, какие у него зубы? О, даже медведь боится этих зубов! А, как известно, медведи больше ничего не боятся.

Результат данного примера показан на рис. 1.

Вид рамки вокруг абзаца

Рис. 1. Вид рамки вокруг абзаца

Следует учитывать, что в тексте может быть несколько абзацев и вокруг каждого тогда возникнет рамка. В подобных случаях лучше воспользоваться тегом , для которого и требуется установить стиль. А текст добавить уже внутрь этого контейнера (пример 2).

Пример 2. Рамка вокруг слоя

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

Из этого правила есть только одно исключение. Герой может не суетиться, тянуть время, и вообще ничего не делать, потому что на помощь придут его друзья.

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

Тень текста CSS

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

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

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

  • Обводка теста css-свойством text-shadow
  • Онлайн-генератор теней

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

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

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

text-shadow:

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

#content .teni p < font-size : 25px ; color : #fff !important ; text-shadow : 1px 1px 1px #000 ;

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

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

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

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

#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

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

По заданию цветов на сайте у меня есть отдельные статьи, которые так же могут быть для вас полезными:
Изменение цвета шрифта в CSS. Коды цветов HTML и CSS
Как определить цвет на сайте

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

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

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

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

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

Настройка генератора обводки

Если вы не знаете как определить класс или идентификатор элемента на странице, то вам будет полезна эта статья с видеоинструкцией:
Как определить ID и класс элемента на странице?

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

Хорошего вам дня! И до скорых встреч!

С уважением Юлия Гусарь

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *