Css контур текста: Как сделать обводку текста в CSS?

Содержание

Контур для текста — Xiper

Автор: Евгений Рыжков и Анна Лысак Дата публикации:

Задача

Сделать контур тексту средствами CSS.

Решение

На момент написания этого материала только разработчики Webkit предусмотрели такую возможность — CSS свойство -webkit-text-stroke. Чтобы нам сделать белый текст с черным контуром, достаточно двух строк кода:


color: white;
-webkit-text-stroke: 1px black;

Т.к. контур появится только у webkit браузеров, остальным незачем цвет текста сливать с цветом фона. Для этого предусмотрено еще одно свойство — -webkit-text-fill-color:


color: white; /* цвет текста для всех браузеров */
-webkit-text-fill-color: white; /* цвет текста для webkit */
-webkit-text-stroke: 1px black;

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


	color: #fff;
	text-shadow:
			-1px -1px 0 #000,
			1px -1px 0 #000,
			-1px 1px 0 #000,
			1px 1px 0 #000;

Данный прием сработает во всех распространенных ныне браузеров, кроме IE8 и ниже. Для них можно либо сделать заголовки по проще (без контура), либо использовать картинки, или же применить небольшой скрипт + несколько дополнительных CSS правил для эмуляции тени. Ниже приведенный код подключаем только для IE8 и версий ниже:


h2 {
	position: relative;
}
h2 span {
	position: absolute;
	z-index: -1;
	color: #000;
}
.h2 {
	left: -1px;
	top: -1px;
}
.h3 {
	left: 1px;
	top: -1px;
}
.h4 {
	left: -1px;
	top: 1px;
}
.h5 {
	left: 1px;
	top: 1px;
}


function stroke() {
	var header = document.getElementById("strokeHeader"),
		text = header.innerText,
		strokeIE = 	text+
					&<span><+text+&</span>&+
					&<span>&+text+&</span>&+
					&<span>&+text+&</span>&+
					&<span>&+text+&</span>&;
	header. innerHTML = strokeIE;
}
window.onload = stroke;

Демо пример. Проверено в:

IE 6-8
Firefox 4

Opera 11
Safari 5
Chrome

Недостатки

для «особых» браузеров нужен Javascript;
кроссбраузерно можно сделать контур только в 1px;
начертание в разных браузерах немного отличается.

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

И на последок более симпатичный пример.

P.S.

Интересно как на такое решение отреагируют поисковики, ведь цвет текста (color) совпадает с цветом фона (background-color).

Материалы

Adding Stroke to Web Text

По теме

Тень для текста (кроссбраузерное решение)
Эффект отражения текста на CSS
Текст с CSS градиентом

Контур для текста на CSS

Главная/ Собираем HTML и CSS приемы/ HTML и CSS приемы, интересные решения/ Typographics/ Контур для текста на CSS

Задача

Сделать контур тексту средствами CSS.

Решение

color: white;
-webkit-text-stroke: 1px black;

color: white; /* цвет текста для всех браузеров */
-webkit-text-fill-color: white; /* цвет текста для webkit */
-webkit-text-stroke: 1px black;

	color: #fff;
	text-shadow:
			-1px -1px 0 #000,
			1px -1px 0 #000,
			-1px 1px 0 #000,
			1px 1px 0 #000;

h2 {
	position: relative;
}
h2 span {
	position: absolute;
	z-index: -1;
	color: #000;
}
.h2 {
	left: -1px;
	top: -1px;
}
.h3 {
	left: 1px;
	top: -1px;
}
.h4 {
	left: -1px;
	top: 1px;
}
.h5 {
	left: 1px;
	top: 1px;
}

function stroke() {
	var header = document.getElementById("strokeHeader"),
		text = header.innerText,
		strokeIE = 	text+
					&<span><+text+&</span>&+
					&<span>&+text+&</span>&+
					&<span>&+text+&</span>&+
					&<span>&+text+&</span>&;
	header.innerHTML = strokeIE;
}
window.onload = stroke;

Демо пример. Проверено в:

IE 6-8

Firefox 4
Opera 11
Safari 5
Chrome

Недостатки

для «особых» браузеров нужен Javascript;
кроссбраузерно можно сделать контур только в 1px;
начертание в разных браузерах немного отличается.

И на последок более симпатичный пример.

P.S.

Материалы

Adding Stroke to Web Text

По теме

Тень для текста (кроссбраузерное решение)
Эффект отражения текста на CSS

Текст с CSS градиентом

Теги: эффекты, типографика, оформление текста

html — контур шрифта с использованием только CSS

спросил 3 года 11 месяцев назад

Изменено 3 года, 11 месяцев назад

Просмотрено 26 тысяч раз

Я работаю над добавлением контура черного шрифта к белому тексту с помощью CSS. Цель — изображение ниже. До сих пор я смог придумать ниже. Есть ли какая-либо другая лучшая практика для более точного соответствия тонкому контуру, показанному на изображении ниже? Спасибо!

 .introText {
семейство шрифтов: «Nunito», без засечек;
-moz-text-fill-color: белый;
-webkit-text-fill-color: белый;
-moz-text-stroke-color: черный;
-webkit-text-stroke-color: черный;
-moz-text-stroke-width: 2px;
-webkit-text-stroke-width: 2px;
размер шрифта: 50px;
поле-верх: 20vh;
}
}

  У нас есть идеальное место.

html
css
текст
контур

Один из способов сделать это — использовать text-shadow и перекрыть несколько теней:

 .introText {
   text-shadow: 0 0 1px черный, 0 0 1px черный, 0 0 1px черный, 0 0 1px черный;
}

4 раза в данном случае.

Пример:

 .introText {
        семейство шрифтов: "Nunito", без засечек;
        text-shadow: 0 0 1px черный, 0 0 1px черный, 0 0 1px черный, 0 0 1px черный;
        белый цвет;
        размер шрифта: 50px;
        поле-верх: 20vh;
      }

  У нас есть идеальное место.

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

Возможно, это то, о чем вы спрашиваете

 .introText {
  семейство шрифтов: «Nunito», без засечек;
  фон: серый;
  белый цвет;
  размер шрифта: 50px;
  вес шрифта: 400;
  граница: 100px белая сплошная;
  поле-верх: 20vh;
}

  У нас есть идеальное место для вас.

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания и подтверждаете, что прочитали и поняли нашу политику конфиденциальности и кодекс поведения.

Контур CSS Свойство

❮ Предыдущий Полное руководство по CSS Далее ❯

Пример

Установить контур вокруг элемента

и элемента

h3 {
контур: 5 пикселей с зелеными точками;
}

div.a {
обводка: 2 пикселя, пунктирная синяя;
}

Попробуйте сами »

Определение и использование

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

Свойство контура является сокращенным свойством для:

ширина контура
стиль контура (обязательно)
цвет контура

Если параметр layout-color опущен, применяемый цвет будет цветом текста.

Примечание: Контуры отличаются от границ! В отличие от границы, контур рисуется вне границы элемента и может перекрывать другой контент. Кроме того, контур НЕ является частью элемента. размеры; общая ширина и высота элемента не зависит от ширины план.

Показать демо ❯

Значение по умолчанию:	средний инвертированный цветной
По наследству:	нет
Анимация:	да, см. отдельные свойства . Читать о анимированном Попробуй
Версия:	CSS2
Синтаксис JavaScript:	объект .style.outline=»#0000FF с точками 5px» Попробуй

Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Собственность
контур	1,0	8,0	1,5	1,2	7,0

Синтаксис CSS

контур: ширина контура стиль контура цвет контура |начальный|наследовать;

Значения свойств

Значение	Описание	Демо
ширина контура	Задает ширину контура	Попробуй »
контурный стиль	Задает стиль контура	Попробуй »
цвет контура	Задает цвет контура	Попробуй »
начальный	Устанавливает для этого свойства значение по умолчанию. Читать про начальный
унаследовать	Наследует это свойство от родительского элемента. Читать о унаследовать

Связанные страницы

Учебник по CSS: CSS Outline

Справочник по HTML DOM: свойство контура

❮ Предыдущий Полное руководство по CSS Далее ❯

ВЫБОР ЦВЕТА

Лучшие учебники

Учебник по HTML
Учебник по CSS
Учебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery
9000 5

Лучшие ссылки

HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

902 83 Лучшие примеры Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.

Css контур текста: Как сделать обводку текста в CSS?

Контур для текста — Xiper

Задача

Решение

Недостатки

P.S.

Материалы

По теме

Контур для текста на CSS

Задача

Решение

Недостатки

P.S.

Материалы

По теме

html — контур шрифта с использованием только CSS

У нас есть идеальное место.

У нас есть идеальное место.

У нас есть идеальное место для вас.

Зарегистрируйтесь или войдите в систему

Опубликовать как гость

Опубликовать как гость

Контур CSS Свойство

Пример

и элемента

Определение и использование

Поддержка браузера

Синтаксис CSS

Значения свойств

Связанные страницы

ВЫБОР ЦВЕТА

Лучшие учебники

Лучшие ссылки

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

Рубрики

Рубрики