Контур текста 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 — schoolsw3.

com

---

❮ Назад Далее ❯

---

Outline — это линия, проведенная за пределами границы элемента.

---

Этот элемент имеет черную рамку и зеленый контур шириной 10 пикселей.

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

---

CSS Свойство outline

Свойство outline — это линия, которая рисуется вокруг элементов, ЗА ПРЕДЕЛАМИ границ, чтобы элемент «выделялся».

CSS обладает следующими свойствами контура:

• outline-style
• outline-color
• outline-width
• outline-offset
• outline

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

---

---

CSS Стиль контура

Свойство outline-style задает стиль контура и может иметь одно из следующих значений:

• dotted — устанавливает контур штрихом
• dashed — устанавливает контур пунктиром
• solid — устанавливает сплошной контур
• double — устанавливает двойной контур
• groove — устанавливает 3D контур желобом.
• ridge — устанавливает 3D контур хребетом.
• inset — устанавливает 3D контур вставкой.
• outset — устанавливает 3D контур начальный.
• none — устанавливает без контура
• hidden — устанавливает скрытый контур

В следующем примере показаны различные значения outline-style:

Пример

Демонстрация различных стилей контуров:

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}

p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

Результат:

Контур пунктиром.

Контур штрихом.

Контур сплошной.

Контур двойной.

Контур желобом. Эффект зависит от значения outline-color.

Контур хребетом. Эффект зависит от значения outline-color.

Контур вставкой. Эффект зависит от значения outline-color.

Контур начальный. Эффект зависит от значения outline-color.

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

Примечание: Ни одно из других свойств контура (о которых вы узнаете больше в следующих главах) не будет иметь НИКАКОГО эффекта, если только свойство

outline-style!

---

❮ Назад Далее ❯

---

---

---

ТОП Учебники

HTML Учебник
CSS Учебник
JavaScript Учебник
КАК Учебник
SQL Учебник
Python Учебник
W3.CSS Учебник
Bootstrap Учебник
PHP Учебник
Java Учебник
C++ Учебник
jQuery Учебник

ТОП Справочники

HTML Справочник
CSS Справочник
JavaScript Справочник
SQL Справочник
Python Справочник
W3.CSS Справочник
Bootstrap Справочник
PHP Справочник
HTML Цвета
Java Справочник
Angular Справочник
jQuery Справочник

ТОП Примеры

HTML Примеры
CSS Примеры
JavaScript Примеры
КАК Примеры
SQL Примеры
Python Примеры
W3. CSS Примеры
Bootstrap Примеры
PHP Примеры
Java Примеры
XML Примеры
jQuery Примеры

---

Форум | О SchoolsW3

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

Авторское право 1999- Все права защищены.
SchoolsW3 работает на площадке от SW3.CSS.

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

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

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

Просмотрено 24к раз

Я работаю над добавлением контура черного шрифта к белому тексту с помощью 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
• текст
• контур

1

Один из способов сделать это — использовать 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;
      } 

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

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

0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример

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

и элемента