Красивые подчеркивания текста: Подчеркивание в CSS (красивые эффекты с примерами кода)

Плавное подчёркивание ссылки при наведении

Плавное подчёркивание ссылки при наведении

Сегодня мы анонсируем новую серию статей, в которой мы покажем вам, как можно быстро и без особых усилий «прокачать» ваш сайт. Мы будем выкладывать маленькие кусочки кода(сниппеты), которые будут работать сразу после того, как вы вставите их в ваш файл стилей.

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

a {
	position: relative;
	color: #00a650; 
	cursor: pointer;
	line-height: 1; 
	text-decoration: none; 

}
a:after {
	display: block;
	position: absolute;
	left: 0; 
	width: 0;
	height: 2px; 
	background-color: #00a650; 
	content: "";
	transition: width 0.3s ease-out; 
}

a:hover:after,
a:focus:after {
	width: 100%; 
}

Плавное подчёркивание ссылки справа налево при наведении

достаточно изменить left:0 на right:0;

Применяем плавное подчеркивание ссылок при наведении к нашему стандартному шаблону.

Делаем это из административной панели:

1. Открываем настройки
2. Выбираем шаблон
3. Открываем Style.css
4. В самый конец кода добавляем 

.bottom-bar .main-menu .mg-menu li .submenu li a {
	position: relative;
	color: #00a650; 
	cursor: pointer;
	line-height: 1; 
	text-decoration: none; 

}
.bottom-bar .main-menu .mg-menu li .submenu li a:after {
	display: block;
	position: absolute;
	left: 0; 
	width: 0;
	height: 2px; 
	background-color: #00a650; 
	content: "";
	transition: width 0.3s ease-out; 
}

.bottom-bar .main-menu .mg-menu li .submenu li a:focus:after,
.bottom-bar .main-menu .mg-menu li .submenu li a:hover:after{
	width: 100%; 
}

  

Вот вы и узнали как добится плавного подчеркивания ссылки при наведении на ссылку. Если у вас появятся какие-либо вопросы — пишите в комментариях.

Создайте свои интернет-магазин в два клика!

Стилизация ссылок — Изучение веб-разработки

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

Для изучения вам потребуется:	Основы компьютерной грамотности, базовые знания HTML (изучите Введение в HTML), основы CSS (изучите Введение в CSS), базовые знания о текстах и шрифтах CSS.
Вы узнаете:	Изучите как стилизуются ссылки и как использовать ссылки эффективно в общих задачах UI (пользовательских интерфейсах), например, в меню навигации.

Мы рассматривали как реализуются ссылки в вашем HTML в соответствии с лучшими практиками в Создании гиперссылок. В этой статье мы будем опираться на эти знания, показывая вам лучшие практики по оформлению ссылок.

Состояния ссылок

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

• Link (не посещённая): Состояние по умолчанию, в котором находится ссылка, когда она не находится в каком-либо другом состоянии. Она может быть специфически стилизована используя псевдокласс :link.
• Visited: Ссылка, когда она уже была посещена (существует в истории браузера), стилизуется используя псевдокласс :visited.
• Hover: Ссылка, когда на неё наведён курсор мыши, стилизуется используя псевдокласс
  :hover
• Focus: Ссылка, когда она была сфокусирована (например когда пользователь переместился на неё используя клавишу Tab или наподобие или программно сфокусирована используя HTMLElement.focus() (en-US)) — стилизуется используя псевдокласс :focus.
• Active: Ссылка, когда она активируется (например при клике по ней), стилизуется используя псевдокласс :active

Стили по умолчанию

Следующий пример показывает, как будет вести себя ссылка по умолчанию (CSS просто увеличивает и центрирует текст чтоб больше выделить его).

<p><a href="https://mozilla.org">A link to the Mozilla homepage</a></p>

p {
  font-size: 2rem;
  text-align: center;
}

Вы заметите несколько вещей при изучении стилей по умолчанию:

• Ссылки подчёркнуты.
• Не посещённые ссылки синие.
• Посещённые ссылки фиолетовые
• Наведение курсора мыши на ссылку меняют указатель мыши на иконку маленькой руки.
• Сфокусированные ссылки имеют контур вокруг себя — вы можете сфокусироваться на ссылках на этой странице с помощью клавиатуры, нажав клавишу табуляции (на Mac, вам может понадобиться включить опцию
  Full Keyboard Access: All controls нажав Ctrl + F7, прежде чем это будет работать).
• Активные ссылки красные (попробуйте удерживать кнопку мыши на ссылке, когда вы кликните по ней).

Довольно интересно, что эти стили по умолчанию приблизительно такие же какими они были в первые дни браузеров в середине 1990-ых. Это потому, что пользователи знают и привыкли ожидать такого поведения — если бы ссылки были стилизованы по-разному, это бы путало много людей. Это не значит, что вы недолжны стилизовать ссылки совсем, просто вы не должны уходить слишком далеко от ожидаемого поведения. По крайней мере вы должны:

• Использовать нижнее подчёркивание для ссылок, но не для других вещей. Если вы не хотите подчёркивать ссылки, то хотя бы выделите их каким-либо другим путём.
• Сделать так чтобы они как-нибудь реагировали на наведение/фокусировку на них и немного отличались после активации.

Стили по умолчанию могут быть выключены/изменены, используя следующие свойства CSS:

• color (en-US) для цвета текста.
• cursor для стиля курсора мыши — вы не должны отключать эту опцию только если у вас нет на это веской причины.
• outline (en-US) для контура текста (контур схож с границей, единственное отличие — это то, что границы занимают место в блоке, а контур — нет; он просто располагается поверх фона). Контур является полезным вспомогательным средством, так что подумайте хорошо, прежде чем отключать его; по крайней мере вы должны удвоить стили, заданные для состояния hover, а также состояния фокусировки.

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

Стилизация некоторых ссылок

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

Чтобы начать, мы выпишем наши пустые наборы правил:

a {

}


a:link {

}

a:visited {

}

a:focus {

}

a:hover {

}

a:active {

}

Этот порядок важен так как стили ссылок опираются друг на друга, например стили в первом правиле будут применяться ко всем последующим правилам и когда ссылка будет активирована, она также будет находиться под «наведением» (hover). Если вы введёте их в неправильном порядке, стили не будут работать правильно. Чтобы запомнить этот порядок вы можете попробовать использовать мнемонику типа

LoVe Fears HAte.

А теперь давайте добавим ещё немного информации чтобы правильно оформить этот стиль:

body {
  width: 300px;
  margin: 0 auto;
  font-size: 1.2rem;
  font-family: sans-serif;
}

p {
  line-height: 1.4;
}

a {
  outline: none;
  text-decoration: none;
  padding: 2px 1px 0;
}

a:link {
  color: #265301;
}

a:visited {
  color: #437A16;
}

a:focus {
  border-bottom: 1px solid;
  background: #BAE498;
}

a:hover {
  border-bottom: 1px solid;
  background: #CDFEAA;
}

a:active {
  background: #265301;
  color: #CDFEAA;
}

Также мы дадим некий пример HTML к которому применяется CSS:

<p>There are several browsers available, such as <a href="https://www.mozilla.org/en-US/firefox/">Mozilla
Firefox</a>, <a href="https://www. google.com/chrome/index.html">Google Chrome</a>, and
<a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a>.</p>

Объединение этих двух даёт нам такой результат:

Итак, что мы сделали тут? Это определённо выглядит иначе чем стилизация по умолчанию, но все ещё даёт достаточно знакомый опыт для пользователей, чтобы знать, что происходит:

• Первые два правила не так интересны в этом обсуждении.
• Третье правило использует селектор a чтобы избавиться от подчёркивания текста и контура фокуса по умолчанию (которые всё равно варьируют в зависимости от браузера), а также добавляет малое количество padding к каждой ссылке — все это станет ясно позже.
• Далее, мы используем селекторы a:link и a:visited чтобы настроить пару цветовых вариаций не посещённых и посещённых ссылок, так чтоб они отличались.
• Следующие два правила используют a:focus и a:hover настраивают сфокусированные и наведённые (hovered) ссылки таким образом чтобы они имели разные фоновые цвета, плюс нижнее подчёркивание чтобы ссылка выделялась ещё больше. Два пункта на которые надо обратить внимание:
  • Нижнее подчёркивание создано используя border-bottom, а не text-decoration (en-US) — некоторые люди предпочитают это потому что первый имеет лучшие варианты стилизации, чем второй, и отрисован немного ниже, так что не срезает нижние элементы слов будучи подчёркнутыми (например хвосты у букв как «р» и «у»).
  • Значение border-bottom установлено на 1px solid, без определённого цвета. Это позволяет границам принимать тот же цвет что и элементы текста, что полезно в случае как этом, где текст имеет разные цвета в каждом случае.
• Наконец, a:active используется чтобы дать ссылкам инвертированную цветовую схему в то время когда они активированы, чтобы было ясно что происходит что то важное!

Активное изучение: Стилизуйте ссылки самостоятельно

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

Если вы допустите ошибку, вы всегда можете сделать сброс используя кнопку Reset. Если вы действительно застряли нажмите кнопку Show solution чтобы вставить пример, который мы показали выше.

Обычной практикой является добавление иконок в ссылки, чтобы предоставить больше индикатора того, на какой контент указывает ссылка. Давайте рассмотрим очень простой пример, который добавляет иконку к внешним ссылкам (ссылки, которые ведут на другие сайты). Такая ссылка обычно выглядит как маленькая стрела торчащая из коробочки — например, мы будем использовать этот отличный образец с сайта icons8.com.

Давайте взглянем на HTML и CSS которые дадут нам эффект, который мы хотим. Во-первых, немного простого HTML который будет стилизован:

<p>For more information on the weather, visit our <a href="weather. html">weather page</a>,
look at <a href="https://en.wikipedia.org/wiki/Weather">weather on Wikipedia</a>, or check
out <a href="http://www.extremescience.com/weather.htm">weather on Extreme Science</a>.</p>

Далее, CSS:

body {
  width: 300px;
  margin: 0 auto;
  font-family: sans-serif;
}

p {
  line-height: 1.4;
}

a {
  outline: none;
  text-decoration: none;
  padding: 2px 1px 0;
}

a:link {
  color: blue;
}

a:visited {
  color: purple;
}

a:focus, a:hover {
  border-bottom: 1px solid;
}

a:active {
  color: red;
}

a[href*="http"] {
  background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
  background-size: 16px 16px;
  padding-right: 19px;
}

Итак, что же тут происходит? Мы пропустим большую часть CSS так как это та же информация, которую вы рассматривали ранее. Однако, последнее правило интересное — тут мы вставляем пользовательское фоновое изображение во внешнюю ссылку схожим способом как мы делали пользовательские маркеры для пунктов списка в последней статье — в этот раз, однако, мы используем короткую запись background вместо индивидуальных свойств. Мы задаём путь к изображению, которое хотим вставить, устанавливаем no-repeat чтобы мы получили только одну копию вставленного и затем устанавливаем позицию на 100% до правого края изображения и 0 пикселей от верхнего края.

Также мы используем background-size для того чтобы указать размер в котором бы хотим чтобы было показано фоновое изображение — полезно иметь иконку большего размера и далее менять его размер так, как нужно для адаптивного (отзывчивого) веб-дизайна. Однако это работает только в IE9 и следующих версиях так что, если вам нужна поддержка тех старых браузеров вам просто придётся менять размер изображения и вставлять его как есть.

Наконец, мы задаём некоторый padding-right для ссылки чтобы добавить пространство в котором появляется фоновое изображение, таким образом, чтобы мы не накладывали его на текст.

И последнее слово — как мы выбрали только внешние ссылки? Ну, если вы пишете свои HTML ссылки правильно, то вы должны были использовать только абсолютные URL для внешних ссылок — гораздо эффективнее использовать относительные ссылки для связи с другими частями вашего сайта. Текст «http» таким образом должен появляться только во внешних ссылках и можем выбрать его при помощи селектора атрибутов: a[href*="http"] выбирает элементы <a>, но только если они имеют атрибут href со значением содержащим «http» где-то внутри него.

Ну вот и все — попробуйте посетить секцию активного изучения выше и испытайте этот новый метод!

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

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

Для начала HTML:

<ul>
  <li><a href="#">Home</a></li><li><a href="#">Pizza</a></li><li><a href="#">Music</a></li><li><a href="#">Wombats</a></li><li><a href="#">Finland</a></li>
</ul>

А теперь наш CSS:

body,html {
  margin: 0;
  font-family: sans-serif;
}

ul {
  padding: 0;
  width: 100%;
}

li {
  display: inline;
}

a {
  outline: none;
  text-decoration: none;
  display: inline-block;
  width: 19.5%;
  margin-right: 0.625%;
  text-align: center;
  line-height: 3;
  color: black;
}

li:last-child a {
  margin-right: 0;
}

a:link, a:visited, a:focus {
  background: yellow;
}

a:hover {
  background: orange;
}

a:active {
  background: red;
  color: white;
}

Что даёт нам следующий результат:

Давайте объясним, что тут происходит, фокусируясь на самых интересных частях:

• Наше второе правило удаляет заданный по умолчанию padding у элемента <ul> и устанавливает его ширину так, чтобы охватить 100% внешнего контейнера (в этом случае <body>).
• Элементы <li> по умолчанию в норме являются блочными (см. типы блоков CSS чтобы вспомнить), что значит что они будут располагаться на своих собственных строках. В этом случае мы создаём горизонтальный список ссылок, поэтому в третьем правиле задаём свойству display значение inline, что приводит к тому, что элементы списка располагаются в одной строке друг с другом — теперь они ведут себя как строчные элементы.
• четвёртое правило — которое стилизует элемент <a> — самое сложное; давайте пройдёмся по нему шаг за шагом:
  • как в предыдущем примере, мы начинаем отключать настройки по умолчанию для text-decoration (en-US) и outline (en-US) — мы не хотим, чтоб они портили нам вид.
  • Далее мы устанавливаем display на inline-block — элементы <a> являются строчными по умолчанию и, поскольку мы не хотим чтобы они вываливались на свои собственные строки как если бы это получалось со значением block, мы хотим иметь возможность менять их размер. inline-block позволяет нам делать это.
  • Теперь только изменение размера! Мы хотим заполнить всю ширину элемента <ul>, оставить немного margin между каждой кнопкой (не без зазора с правого края) и мы имеем 5 кнопок, которые надо разместить и которые должны иметь одинаковый размер. Для того чтобы это сделать мы задаём width на 19.5%, а margin-right на 0.625%. Вы заметите что вся эта эта ширина составляет 100.625%, что может сделать так что последняя кнопка перекроет <ul> и выпадет вниз на следующую строку. Тем не менее, мы возвращаемся к 100%, используя следующее правило, которое выбирает только последний <a> в списке и удаляет его margin. Сделано!
  • Последние три объявления довольно просты и в основном просто для косметических целей. Мы центрируем текст внутри каждой ссылки, задаём line-height на 3 чтобы кнопки имели некую высоту (что также имеет преимущество в центрировании текста по вертикали) и задаём для текста чёрный цвет.

Обратите внимание: вы могли заметить что элементы списка в HTML все находятся на одной строке друг с другом — так сделано потому, что это сделано потому, что пробелы/разрывы строк между элементами встроенного блока создают пробелы на странице, точно также как пробелы между словами и такие пробелы могли бы нарушить расположение нашего горизонтального меню навигации. Вы можете найти больше информации об этой проблеме (и решения) на Fighting the space between inline block elements.

Мы надеемся эта статья снабдила вас всем что вам надо знать о ссылках — на данный момент! Последняя статья в нашем модуле стилизации текста детализирует как использовать пользовательские шрифты на вашем веб-сайте или как они больше известны веб-шрифты.

Создание анимированных подчеркиваний для ссылок

Нас недавно заинтересовал простой визуальный эффект: при наведении указателя мыши подчеркивание появляется из центра с помощью анимации. Создать такой эффект на удивление просто, не требуется добавление дополнительных элементов DOM в код HTML, и в старых версиях браузеров, не поддерживающих анимации CSS, он будет выглядеть нормально, как обычное подчеркивание.  Можете увидеть этот эффект ниже.

 

 

---

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

 

h3 > a {
  position: relative;
  color: #000;
  text-decoration: none;
}
h3 > a:hover {
  color: #000;
}

После этого добавим границу и спрячем ее с помощью трансформации. Это делается с помощью установки этих свойств псевдоэлементу :before и задания значения масштаба по оси X 0. В качестве обходного пути спрячем эти свойства с помощью visibility: hidden для браузеров, не поддерживающих анимации CSS:

 

h3 > a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0. 3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

В самом конце укажем элементу анимировать все применяемые к нему изменения со значением продолжительности 0,3 секунды. Теперь, чтобы анимация появилась, нужно просто сделать элемент снова видимым при наведении указателя мыши и задать значение масштаба по оси X 1:

 

h3 > a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

И это все! На всякий случай в демонстрации работы оставлены приставки производителей для старых версий браузеров Firefox и Opera, но если Вам не требуется поддержка старых версий, можете использовать только свойства без приставок производителя и с приставкой производителя -webkit, как в коде CSS в тексте урока.

Автор урока Tobias Ahlin

Перевод — Дежурка

Смотрите также:

Messletters • Стильный генератор текста 😍 классный текст, эмодзи и символы!

Введите текст здесь!

• cba
• aBc
• [a̲̅]
• a̽̐̊b̽̐̊c̽̐̊
• a͓̽b͓̽c͓̽
• a̿b̿c̿
• a͟b͟c
• a̵b̵c̵
• ã͋̆b͉͈c̦̪̄̒

Экспериментальные стили включены. Экспериментальные стили могут привести к тому, что веб-сайт будет реагировать медленно и может не отображаться на всех устройствах. Отключить

Как это работает

Сначала немного истории за именем Messletters ..

Сообщения до 2008 года назывались «Письма MSN», поскольку люди использовали необычный генератор текста в основном для названия чата в MSN Messenger, который в то время был очень популярным программным обеспечением для чата. Позже, когда люди начали использовать несколько мессенджеров, таких как Skype, Facebook и Twitter, мы изменили название на Messletters, сочетание слов MESSenger и LETTERS.

Хорошо, бла, бла, бла. Здорово. 😒 Но как это работает?

Ха-ха, ну, в общем, Messletters — это в основном просто символы Юникода из иностранных языков, таких как греческий (греческий) или английский (русский — кириллица), или такие как фонетический алфавит.
Когда вы вводите свой текст в наш генератор, он преобразует ваш обычный текст в эти стильные шрифты или причудливые стили. Например, каллиграфические шрифты, курсив, курсив, жирный стиль, шрифты веб-скриптов, курсивные шрифты, рукописные шрифты, шрифты старого английского языка, шрифты слов, красивые шрифты и т. Д.
Подожди, шрифты? Я думал, вы сказали, что раньше Месслеттеры не были шрифтами? Шрифты, хм, да, ты прав. Хотя каждый всегда называет сообщения шрифтом или шрифтом (даже мы это делаем 🤭), на самом деле это не так. Но именно поэтому это работает везде. В Instagram, Facebook, Twitter, WhatsApp, WeChat, вы называете это. Правильное название, вероятно, будет больше похоже на текстовые стили или просто навороченный текст. Но да, кого это волнует! Необычные шрифты!

А что потом? 🤔

Когда наш генератор преобразует ваш текст в стильный модный текст, вы просто копируете и вставляете его в нужное место! Как мы уже говорили, вы можете использовать его где угодно! Как твое имя в Твиттере, твит, пост в Facebook, в твоей биографии, в Instagram, подписи к фотографиям, подписи и так далее!

Это абсолютно нормально для некоторых символов появляться в виде квадратов.
Хотите добавить свои собственные творения? Отправить их нам! Kонтакт

вє cяєαтινє αη∂ cяєαтє!

Популярные Emoji

• ❤️
• ⚧️
• 💻
• ⚔️
• 📌
• 💬
• 🏳️‍🌈
• ✨
• 🔴
• 💎
• 💜
• 🌻
• 🎮
• 🔊
• ✅
• 🔒
• 🎥
• 🥰
• 📞
• 👑
• 😎
• 🌿
• 📍
• 😭
• 💫
• 🍓
• 🔨
• 🔪
• 🌊
• 🏳️‍⚧️
• 📚
• ⚽️
• 🌸
• 🖤
• 😍
• ☄️
• 🥺
• 🎼
• 🧡
• 🎧

Больше Emoji ▸▸

Популярные символы

• ♡
• ❥
• ღ
• ♥
• ❁
• ❀
• 『
• 𝓪
• 』
• ❦
• 𝓮
• ۵
• ツ
• ✰
• ༄
• 𝓲
• ও
• ↳
• →
• ★
• 「
• ☆
• »
• ║
• ✿
• ✧
• 【
• ☼
• 𝓐
• 𝓢
• 𝓻
• 」
• 🎔
• ッ
• ☽
• ɞ
• 】
• ⋆
• 𝓸
• ෆ
• დ
• ✞
• ♓︎
• ☾
• ♈︎
• 𝓼
• ♊︎
• 𝒾
• †
• ♏︎

Другие символы ▸▸

Популярное текстовое искусство

• ꒱࿐♡ ˚. *ೃ

• ˚ ༘✶ ⋆｡˚ ⁀➷

• ୭̥⋆*｡

• 𓆩*𓆪

• ✩｡:*•.─────  ❁ ❁  ─────.•*:｡✩

• • ₊°✧︡ ˗ ˏ ˋ ♡ ˎˊ ˗

• ꒰ ͜͡➸

• Mᴇʟᴀɴɪᴇ Mᴀʀᴛɪᴇɴᴇᴢ- Dᴇᴛᴇɴᴛɪᴏɴ
  0:35 ━❍──────── -5:32
  ↻     ⊲  Ⅱ  ⊳     ↺
  VOLUME: ▁▂▃▄▅▆▇ 100%

• _/﹋\_
  (҂`_´)
  

• ╔══╗
  ╚╗╔╝
  ╔╝(¯`v´¯)
  ╚══`.¸.[Name]

• ──────▄▀▄─────▄▀▄
  ─────▄█░░▀▀▀▀▀░░█▄
  ─▄▄──█░░░░░░░░░░░█──▄▄
  █▄▄█─█░░▀░░┬░░▀░░█─█▄▄█

• 。　☆ 。　　☆。　　☆ 
  ★。　＼　　｜　　／。　★
   　　 　 。。。 
  ★。　／　　｜　　＼。　★ 
  。　☆。 　　。　　☆。

• ..... (¯`v´¯)♥
  .......•.¸.•´
  ....¸.•´
  ... (
  ☻/
  /▌♥♥
  / \ ♥♥

• ✷ 　 　　 　 ·
   　 ˚ * .
   　 　　 *　　 * ⋆ 　 .
   · 　　 ⋆ 　　　 ˚ ˚ 　　 ✦
   　 ⋆ · 　 *
   　　　　 ⋆ ✧　 　 · 　 ✧　✵
   　 · ✵

• ╔══╗╔╗ ♡ ♡ ♡
  ╚╗╔╝║║╔═╦╦╦╔╗
  ╔╝╚╗║╚╣║║║║╔╣
  ╚══╝╚═╩═╩═╩═╝
  ஜ۞ஜ YOU ஜ۞ஜ
  
  I LOVE YOU

Больше текста искусства ▸▸

Популярные смайлики

• ( ˘͈ ᵕ ˘͈♡)

• （＾ω＾）

• (╥﹏╥)

• ┏(‘▀_▀’)ノ♬♪

• (　-_･) ︻デ═一 ▸

• ⸜( ˙˘˙)⸝

• ̸͆̎/͆̿̇ ͆̅͆͞͞͞͞​ι̿̿̿ ̿̎͆ ̀̈

• (๑´• . ฅ

• ℓ٥ﻻ ﻉ√٥υ

• /̵͇̿̿/'̿̿ ̿̿ ̿̿ 

• ╔═══════════════╗

• ≿━━━━༺❀༻━━━━≾

• ن٥ﻻ ﻉ√٥ﺎ ٱ

• ‿︵‿︵ʚ˚̣̣̣͙ɞ・❉・ ʚ˚̣̣̣͙ɞ‿︵‿︵

• ︻デ═一

• ───── ❝ 𝐚𝐛𝐨𝐮𝐭 𝐦𝐞 ❞ ─────

• (ღ˘⌣˘)♥ ℒ♡ⓥℯ ㄚ♡ⓤ

• ❥

• ╚═══════════════╝

• (⌐■_■)--︻╦╤─

• ➳♥

• ⋆﹥━━━━━━━━━━━━━━━﹤⋆

• ╭─━━━━━━━━━━━━─╮

• 𓆩⫯𓆪

• ︻╦̵̵͇̿̿̿̿╤─── 

• -ˋˏ ༻✿༺ ˎˊ-

• .✫*ﾟ･ﾟ｡.☆.*｡･ﾟ✫*.

• ʕ•ᴥ•ʔ

• «────── « ⋅ʚ♡ɞ⋅ » ──────»

• »»————-　☠　————-««

• {♥‿♥}

• . ⋅ ˚̣- : ✧ : – ⭒ ⊹ ⭒ – : ✧ : -˚̣⋅ .

• »»————-　♡　————-««

Больше фигур ▸▸

Существует гораздо больше!

У нас есть еще что предложить, потому что мы просто любим все, что связано с текстом!
Как насчет фигур? Или персонажи? Возможно, вы хотите, чтобы ваш текст отражался или, может быть, перевернулся! Или сделайте приятные волны, которые вы можете использовать в качестве разделительных линий в тексте.
Вы можете сделать все это на Messletters! Просто просмотрите главное меню слева. Или на мобильном телефоне нажмите кнопку меню в правом верхнем углу.
Если у вас есть какие-либо предложения или вопросы, вы можете связаться с нами через контактную страницу или через Facebook, Twitter, Youtube и т. Д.

Messletters • Стильный генератор текста 😍 классный текст, эмодзи и символы!

Создавайте стильный стильный текст для копирования и вставки с помощью нашего модного генератора шрифтов (˘ ³˘) 💕💯 Используйте его в Instagram, Facebook, Whatsapp или где угодно!

Messletters ▸▸

Зеркальный • Текст на голове или зеркало

Превратите ваш текст вверх ногами, положил его в обратном направлении или вспять и вниз головой в то же время!

Зеркальный ▸▸

Полосатый текст • Bверх, вниз и зачеркнуты полоса текстовые украшения

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

Полосатый текст ▸▸

Stacked Text • Укладывать два текста друг на друга

Содержите два текста друг над другом, не используя пространство двух строк. ᵇaͤnͨdͬcͤrͣeͭaͥtͮeͤ

Сложный текст ▸▸

Крупный шрифт • Создание огромные тексты с символами ASCII

Impress с этим огромными буквами, также известный как текст ASCII, изготовленных из обычных символов клавиатуры. Выбирайте из более чем 100 различных стилей!

Крупный шрифт ▸▸

Текст Волны • Украсьте ваши тексты с волнами ෴❤️෴

Украсьте свой текст с этими потрясающими волнами, сделаны из знаков и символов. • * ‘¨ `* •. ¸ ¸. • *’ ¨` * •. ¸

Волны ▸▸

Текстовые Cмайлики • Подчеркните свои чувства в тексте! ( ˘ ³˘)❤

Подчеркните, как вы чувствуете с нашим Текст смайлики. Вы можете использовать их на Facebook, Instagram, Twitter или там, где вы хотите! ≧◔◡◔≦

Смайлики ▸▸

Emoji • Используйте красочные смайлики везде! 🥰

Вы знаете это из своих сообщений 💬 Messaging и 👫 Social Apps, но теперь вы можете копировать и вставлять свой любимый Emoji с нашего сайта и использовать их в любом месте! 😊

Emoji ▸▸

Формы • Небольшие фигуры художественного текста

Эти крошечные изображения создаются в одном текстовой строки. Вы можете использовать их в коротких сообщений, такие, как ваши твиты или как ваш Twitter имени пользователя.

Формы ▸▸

Cимволы • Украсьте свой текст с нашими символов! ♡ ❀

Все символы, такие как сердца, цветы, стрелы, предметы и многое другое! Используйте их на Facebook, Twitter, Instagram или в вашем блоге!

Cимволы ▸▸

Персонажи • Большая коллекция иностранных алфавитов

Большая коллекция иностранных буквенных символов, таких как буквы, точки, тире, акценты и многое другое.

Персонажи ▸▸

Tекст искусство • Картины из текста и символов ୭̥⋆*｡

Текст искусство, также называемый ASCII искусство, образы создаются из текста. Например, вы можете использовать их в своих сообщениях на Facebook или в блоге!

Tекст искусство ▸▸

Текстовые эффекты • Про CSS

В посте представлены некоторые эффекты на основе text-shadow.

text-shadow — это свойство, описывающее тень, отбрасываемую текстом. В отличие от box-shadow, тень не обрезается фигурой, ей нельзя задать размер (только радиус размытия) и она не поддерживает параметр inset, то есть нельзя сделать внутреннюю тень.

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

Сочетая тени, градиенты и псевдо-элементы можно сделать много интересного.

Проведите курсором над текстом примеров, чтобы увидеть эффекты при наведении.

Выпуклый текст

h2 {
  text-shadow:
    1px 1px 1px silver,
    -1px 1px 1px silver;
  color: white;
  transition: all .5s;
}

h2:hover {
  text-shadow:
    -1px -1px 1px silver,
    1px -1px 1px silver;
  color: white;
}

Вдавленный текст

h2 {
  text-shadow:
    -1px -1px #000,
    0 1px 0 #444;
  color: #222;
  transition: all 1s;
}

h2:hover {
  text-shadow:
    -1px -1px #000,
    0 1px 0 #444;
  color: #1A1A1A;
}

Размытие

h2 {
  font-size: 50px;
  font-weight: normal;
  cursor: pointer;
  text-shadow: 0 0 15px #999;
  color: transparent;
  transition: all . 5s;
}

h2:hover {
  text-shadow: 0 0 0 #333;
}

Контуры

h2 {
  text-shadow:
    1px 1px 0 orange,
    1px -1px 0 orange,
    -1px 1px 0 orange,
    -1px -1px 0 orange;
  color: white;
  transition: all 1s;
}

h2:hover {
  text-shadow:
    1px 1px 0 yellowgreen,
    1px -1px 0 yellowgreen,
    -1px 1px 0 yellowgreen,
    -1px -1px 0 yellowgreen;
  }

h2 {
  text-shadow:
    -1px -1px #FFF,
    -2px -2px #FFF,
    -1px 1px #FFF,
    -2px 2px #FFF,
    1px 1px #FFF,
    2px 2px #FFF,
    1px -1px #FFF,
    2px -2px #FFF,
    -3px -3px 2px #BBB,
    -3px 3px 2px #BBB,
    3px 3px 2px #BBB,
    3px -3px 2px #BBB;
  color: steelblue;
  transition: all 1s;
}

h2:hover {
  color: yellowgreen;
}

Для создания контура вокруг текста можно воспользоваться SCSS-функцией.

Длинные тени

h2 {
  text-shadow:
    1px 1px 0 hsl(20,100%,50%),
    2px 2px 0 hsl(20,100%,50%),
    3px 3px 0 hsl(35,100%,50%),
    4px 4px 0 hsl(35,100%,50%),
    5px 5px 0 hsl(45,100%,50%),
    6px 6px 0 hsl(45,100%,55%),
    7px 7px 0 hsl(55,100%,60%),
    8px 8px 0 hsl(55,100%,65%);
  color: hsl(0,100%,40%);
  transition: all 1s;
}

h2:hover {
  text-shadow:
    1px -1px 0 hsl(290,100%,40%),
    2px -2px 0 hsl(290,100%,40%),
    3px -3px 0 hsl(280,100%,60%),
    4px -4px 0 hsl(280,100%,60%),
    5px -5px 0 hsl(270,100%,75%),
    6px -6px 0 hsl(270,100%,80%),
    7px -7px 0 hsl(260,100%,85%),
    8px -8px 0 hsl(260,100%,90%);
  color: hsl(300,100%,30%);
}

Полосатая тень

h2 {
  display: inline-block;
  position: relative;
  letter-spacing: . 05em;
  text-shadow:
    1px 1px mediumturquoise,
    -1px 1px mediumturquoise,
    -1px -1px mediumturquoise,
    1px -1px mediumturquoise;
  color: white;
  transition: all 1s;
}

h2:before {
  content: "";
  position: absolute;
  top: 10px;
  right: -15px;
  bottom: -15px;
  left: 0;
  z-index: -1;
  background: linear-gradient(
    -45deg,
    rgba(72, 209, 204, 0) 2px,
    mediumturquoise 3px,
    rgba(72, 209, 204, 0) 3px )
    repeat;
  background-size: 4px 4px;
}

h2:after {
  content: attr(data-name);
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: -2;
  text-shadow:
    1px 1px white,
    2px 2px white,
    3px 3px white,
    4px 4px white;
  color: white;
  transition: all 1s;
}

h2:hover {
  color: lemonchiffon;
}

h2:hover:before {
  animation: 5s move_lines infinite linear;
}

h2:hover:after {
  color: lemonchiffon;
  text-shadow:
    1px 1px lemonchiffon,
    2px 2px lemonchiffon,
    3px 3px lemonchiffon,
    4px 4px lemonchiffon;
}

@keyframes move_lines {
  100% {
    background-position: 40px 40px;
  }
}

Идея не моя, найдено тут: codepen. io/lbebber/pen/BzoHi

Живое подчеркивание

h2 {
  display: inline-block;
  text-shadow:
    1px 1px 1px white,
    1px -1px 1px white,
    -1px 1px 1px white,
    -1px -1px 1px white;
  color: steelblue;
  transition: all 1s;
}

h2:after {
  content: "";
  display: block;
  position: relative;
  z-index: -1;
  width: 100%;
  margin: auto;
  border-bottom: 3px solid steelblue;
  bottom: .15em;
  transition: all 1s;
}

h2:hover:after {
  width: 0%;
  border-bottom-width: 1px;
}

Подводка

h2 {
  text-shadow:
    1px 1px white,
    2px 2px #777;
  color: #333;
  transition: all 1s;
}

h2:hover {
  text-shadow:
    1px 1px white,
    2px 2px tomato;
  color: crimson;
}

Разъезжающийся текст

h2 {
  overflow: hidden;
  text-shadow:
    0 0 tomato,
    0 0 yellowgreen,
    0 0 skyblue;
  color: transparent;
  transition: all 1s;
}

h2:hover {
  text-shadow:
    -400px 0 tomato,
    400px 0 yellowgreen,
    0 0 skyblue;
  }

Подчеркнутый текст онлайн в ВК, Ватсап, Инстаграм, Телеграмм и Фейсбуке

Текст:

Результат: СкопироватьСкопировано

Введите текст в первое поле и во втором автоматически получите результат.

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

Существуют многочисленные инструкции по работе с текстом. Но отсутствуют причины ими руководствоваться, когда гораздо проще в одном поле написать нужные слова, во втором получить их подчеркнутыми. Далее вам остается лишь скопировать полученный результат. Подчеркивание текста в Инстаграме, ВКонтакте, Фейсбук, мессенджерах Ватсап и Телеграм 100% работает.

В каких случаях используют подчеркивание слов в постах?

В первую очередь, это украшение поста. Особенно если речь идет о довольно большой информации, которую воспринимать рядовому пользователю сложнее, чем несколько предложений. Так, например, подчеркнуть текст в ВК онлайн можно в следующих случаях:

• Когда вы хотите донести до аудитории много важной информации, в которой нужно выделить конкретный посыл. Выделение происходит с помощью подчеркивания, так как оно привлекает и заостряет внимание пользователей на конкретных словах, словосочетаниях, предложениях;
• Если ваш пост небольшой, все равно подобная опция часто необходима. Обычный небольшой текст пользователь может просто пролистать. А даже одно подчеркнутое слово, которое несет ключевое значение в посте, способно привлечь внимание;
• В конце концов, все сводится к тому, чтобы донести до пользователей максимально важные моменты из общей информации. Подчеркиванием вы как бы подталкиваете пользователей к знакомству с наиболее ключевыми моментами в контенте.

Любой контент, которым вы хотите поделиться с аудиторией, требует работы с текстом. Подчеркивание ключевых данных — это также работа с информацией. Обычный активный пользователь социальных сетей и мессенджеров ежедневно сталкивается с большим количество статей, информационных постов и т. д. Поэтому зачастую «проходит мимо» интересных для него знаний, так как их не замечает. Подчеркивание останавливает пользователя от быстрого листания ленты. И такой метод работает не первый год.

Теперь вам известно, как сделать подчеркнутый текст в Ватсап, других мессенджерах и социальных сетях — элементарная задача благодаря нашему сервису!

Все наши сервисы

Как сделать черту для подписи в word 2010?

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

Как сделать линию в «Ворде» для подписи? Простейший метод

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

Для этого понадобится просто зажать клавишу Shift, а затем – клавишу дефиса («-»). В таком варианте линия может иметь произвольную длину. Главное – не увлечься, а то при переходе на новую строку она автоматически будет преобразована в более жирную и на всю ширину листа.

Использование табуляции

Еще один простой способ, позволяющий решить проблему того, как сделать линию в «Ворде» для подписи, предполагает использование так называемого табулятора, проще говоря, клавиши Tab.

Для создания непрерывной линии сначала следует установить подчеркивание, нажав на соответствующую кнопку на основной панели (она помечена подчеркнутой литерой «Ч» в русскоязычной версии редактора), или использовать сочетание Ctrl + U, что то же самое. Теперь дело за малым. Нужно всего лишь, удерживая клавишу Shift, несколько раз нажать на табулятор и создать линию необходимой длины. Тут стоит заметить, что такая линия имеет фиксированную длину (это зависит от того, какая настройка для табуляции выставлена в параметрах).

Как сделать линию под текстом в «Ворде» с помощью таблицы?

Вышеприведенные методы хоть и позволяют создавать необходимые компоненты в виде линий, тем не менее вводить над ними текст оказывается невозможным.

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

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

Графические инструменты

Наконец, проблему того, как сделать линию в «Ворде» для подписи, можно решить при помощи инструментов рисования, которые имеются в любой версии редактора. Для этого применяется соответствующий раздел, в котором выбирается инструмент прорисовки прямой линии.

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

Вместо итога

В принципе, как уже можно было заметить, создать непрерывную линию для подписи не так уж и сложно. Некоторые, правда, пытаются использовать обычный символ «-» без удерживания клавиши Shift, что приводит только к тому, что линия получается пунктирной, располагается в вертикальном позиционировании строго посередине и просто портит вид документа. Поэтому лучше использовать вышеприведенные методы. Если на пустом пространстве текст вводить не нужно, прекрасно подойдет и клавиатурный символ или табулятор для линий одинаковой длины, но в случае необходимости ввода дополнительных символов или букв без таблицы не обойтись.

Как сделать подчеркивание для подписи в «Word». Подпись – это обязательный практически для всех официальных документов реквизит.

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

Сделать такую черту при создании документа очень просто. Сейчас мы расскажем как.

1. Табуляция
2. Использование границ
3. Фигуры
4. Строка подписи

Табуляция

Табуляция лишь один из способов создания линии для подчеркивания.

Он не так распространен как другие, но легок и не требует особых знаний «Word».

Для начала необходимо включить функцию отображения всех символов. Это делается с помощью одноименной клавиши, расположенной во вкладке меню «Главная» в разделе «Абзац». В тексте появятся метки, которые будут указывать на пустые места в документе.

Отступите пару строк от основного текста документа, нажмите клавишу «Tab» на клавиатуре. Если понадобится, то нажмите несколько раз.

Знак табуляции будет отображаться в виде стрелки вправо. Выделите нужный участок, где будет располагаться черта.

Чтобы получилась обычная черта, нажмите на сочетание клавиш Ctrl и U.

Читайте: Как сделать рамку вокруг текста в документе “Word”.

Использование границ

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

Для начала отступите от основного текста так, чтобы курсор был в начале строчки.

Во вкладке меню «Главная» выберите иконку «Границы». Если вам нужна именно черта для подписи, то кликните по строчке «Горизонтальная линия».

Параметры данной линии редактируется при двойном нажатии левой кнопки мыши.

Фигуры

Данный способ самый распространенный из всех. Он позволяет рисовать разные типы линий и множество других фигур.

Для этого перейдите во вкладку меню «Вставка». В разделе «Иллюстрации» выберите иконку «Фигуры».

В выпавшем перечне выберите нужную вам фигуру, в нашем случае это обычная линия. После этого проводим ее в нужном месте и в нужном направлении.

Читайте также: Как в Word сделать круговую диаграмму с процентами.

Строка подписи

Также есть дополнительная специализированная функция, позволяющая сделать линию для подписи.

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

Для того чтобы создать такую линию, кликните по вкладке меню «Вставка», обратите внимание на раздел «Текст» и выберите «Строка подписи». Во всплывшем окне заполните необходимые данные и нажмите «ОК».

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

Урок: Как в Ворд изменить имя автора документа

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

Создание рукописной подписи

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

Вставка рукописной подписи

1. Возьмите ручку и распишитесь на листе бумаги.

2. Отсканируйте страницу со своей подписью с помощью сканера и сохраните ее на компьютер в одном из распространенных графических форматов (JPG, BMP, PNG).

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

3. Добавьте изображение с подписью в документ. Если вы не знаете, как это сделать, воспользуйтесь нашей инструкцией.

Урок: Вставка изображения в Word

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

Урок: Как в Ворде обрезать картинку

5. Переместите отсканированное, обрезанное и приведенное к необходимым размерам изображение с подписью в нужное место документа.

Если вам необходимо добавить к рукописной подписи машинописный текст, прочтите следующий раздел данной статьи.

Добавление текста к подписи

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

1. Под вставленным изображением или слева от него введите нужный текст.

2. Используя мышку, выделите введенный текст вместе с изображением подписи.

3. Перейдите во вкладку “Вставка” и нажмите кнопку “Экспресс-блоки”, расположенную в группе “Текст”.

4. В выпадающем меню выберите пункт “Сохранить выделенный фрагмент в коллекцию экспресс-блоков”.

5. В открывшемся диалоговом окне введите необходимую информацию:

• Имя;
• Коллекция — выберите пункт “Автотекст”.
• Остальные пункты оставьте без изменений.

6. Нажмите “ОК” для закрытия диалогового окна.

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

Вставка рукописной подписи с машинописным текстом

Для вставки созданной вами рукописной подписи с текстом, необходимо открыть и добавить в документ сохраненный вами экспресс-блок “Автотекст”.

1. Кликните в том месте документа, где должна находиться подпись, и перейдите во вкладку “Вставка”.

2. Нажмите кнопку “Экспресс-блоки”.

3. В выпадающем меню выберите пункт “Автотекст”.

4. Выберите в появившемся списке нужный блок и вставьте его в документ.

5. Рукописная подпись с сопровождающим текстом появится в указанном вами месте документа.

Вставка строки для подписи

Помимо рукописной подписи в документ Microsoft Word можно также добавить и строку для подписи. Последнее можно сделать несколькими способами, каждый из которых будет оптимальным для конкретной ситуации.

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

Добавление строки для подписи путем подчеркивания пробелов в обычном документе

Ранее мы писали о том, как в Ворде подчеркнуть текст и, помимо самих букв и слов, программа позволяет также подчеркивать и пробелы между ними. Непосредственно для создания строки подписи нам понадобится подчеркнуть только пробелы.

Урок: Как в Word подчеркнуть текст

Для упрощения и ускорения решения задача вместо пробелов лучше использовать знаки табуляции.

Урок: Табуляция в Ворде

1. Кликните в том месте документа, где должна находиться строка для подписи.

2. Нажмите клавишу “TAB” один или более раз, в зависимости от того, какой длины строка для подписи вам нужна.

3. Включите режим отображения непечатаемых знаков, нажав на кнопку со знаком “пи” в группе “Абзац”, вкладка “Главная”.

4. Выделите знак или знаки табуляции, которые нужно подчеркнуть. Они будут отображаться в виде небольших стрелок.

5. Выполните необходимое действие:

• Нажмите “CTRL+U” или кнопку “U”, расположенную в группе “Шрифт” во вкладке “Главная”;
• Если стандартный тип подчеркивания (одна линия) вас не устраивает, откройте диалоговое окно “Шрифт”, нажав на небольшую стрелку в правой нижней части группы, и выберите подходящий стиль линии или линий в разделе “Подчеркивание”.

6. На месте установленных вами пробелов (знаков табуляции) появится горизонтальная линия — строка для подписи.

7. Отключите режим отображения непечатаемых знаков.

Добавление строки для подписи путем подчеркивания пробелов в веб-документе

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

Урок: Как сделать таблицу в Word невидимой

В данном случае при вводе текста в документ, добавленная вами линия подчеркивания будет оставаться на своем месте. Линия, добавленная таким образом, может сопровождаться вводным текстом, к примеру, “Дата”, “Подпись”.

Вставка линии

1. Кликните в том месте документа, где нужно добавить строку для подписи.

2. Во вкладке “Вставка” нажмите кнопку “Таблица”.

3. Создайте таблицу размером в одну ячейку.

Урок: Как в Ворде сделать таблицу

4. Переместите добавленную ячейку в нужное место документа и измените ее размер в соответствии с необходимым размером создаваемой строки для подписи.

5. Кликните правой кнопкой мышки по таблице и выберите пункт “Границы и заливка”.

6. В открывшемся окне перейдите во вкладку “Граница”.

7. В разделе “Тип” выберите пункт “Нет”.

8. В разделе “Стиль” выберите необходимый цвет линии строки для подписи, ее тип, толщину.

9. В разделе “Образец” кликните между маркерами отображения нижнего поля на диаграмме, чтобы отобразить только нижнюю границу.

Примечание: Тип границы изменится на “Другая”, вместо ранее выбранного “Нет”.

10. В разделе “Применить к” выберите параметр “Таблица”.

11. Нажмите “ОК” для закрытия окна.

Примечание: Для отображения таблицы без серых линий, которые не будут выведены на бумагу при печати документа, во вкладке “Макет” (раздел “Работа с таблицами”) выберите параметр “Отобразить сетку”, который расположен в разделе “Таблица”.

Урок: Как в Word документ

Вставка линии с сопровождающим текстом для строки подписи

Этот метод рекомендован для тех случаев, когда вам нужно не только добавить строку для подписи, но и указать возле нее пояснительный текст. Таким текстом может быть слово “Подпись”, “Дата”, “ФИО”, занимаемая должность и многое другое. Важно, чтобы этот текст и сама подпись вместе со строкой для нее, находились на одном уровне.

Урок: Вставка подстрочной и надстрочной надписи в Ворде

1. Кликните в том месте документа, где должна находиться строка для подписи.

2. Во вкладке “Вставка” нажмите на кнопку “Таблица”.

3. Добавьте таблицу размером 2 х 1 (два столбца, одна строка).

4. Измените местоположение таблицы, если это необходимо. Измените ее размер, потянув за маркер в правом нижнем углу. Отрегулируйте размер первой ячейки (для пояснительного текста) и второй (строка подписи).

5. Кликните правой кнопкой мышки по таблице, выберите в контекстном меню пункт “Границы и заливка”.

6. В открывшемся диалоговом окне перейдите во вкладку “Граница”.

7.В разделе “Тип” выберите параметр “Нет”.

8. В разделе “Применить к” выберите “Таблица”.

9. Нажмите “ОК” для закрытия диалогового окна.

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

11. Перейдите во вкладку “Граница”.

12. В разделе “Стиль” выберите подходящий тип линии, цвет и толщину.

13. В разделе “Образец” кликните по маркеру, на котором отображено нижнее поле, чтобы сделать видимой только нижнюю границу таблицы — это и будет строка для подписи.

14. В разделе “Применить к” выберите параметр “Ячейка”. Нажмите “ОК” для закрытия окна.

15. Введите необходимый поясняющий текст в первой ячейке таблицы (ее границы, в том числе и нижняя линия, не будут отображаться).

Урок: Как изменить шрифт в Ворд

Примечание: Серая пунктирная граница, обрамляющая ячейки созданной вами таблицы, на печать не выводится. Чтобы скрыть ее или, наоборот, отобразить, если она скрыта, нажмите на кнопку “Границы”, расположенную в группе “Абзац” (вкладка “Главная”) и выберите параметр “Отобразить сетку”.

Вот, собственно, и все, теперь вы знаете обо всех возможных методах поставить подпись в документе Microsoft Word. Это может быть как рукописная подпись, так и строка для добавления подписи вручную на уже распечатанном документе. В обоих случаях подпись или место для подписи могут сопровождаться пояснительным текстом, о способах добавления которого мы вам тоже рассказали.

Мы рады, что смогли помочь Вам в решении проблемы.

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

Помогла ли вам эта статья?

Да Нет


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

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

Способ первый

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

Представим, что вы набрали какой-то текст, и вам необходимо выделить его нижним подчеркиванием. Для этого делаем вот что: выделяем текст, затем во вкладке «Главная» на панели инструментов находим блок «Шрифт». Там есть три кнопки: полужирный, курсив и подчеркнутый, а если еще вам нужен , то это можно сделать уже через другое меню. Соответственно, просто кликните на последнюю кнопку, как это показано на скриншоте ниже.

Способ второй

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

1. На панели инструментов есть вкладка «Вставка», откройте ее.
2. Там имеется блок «Иллюстрации», в котором предусмотрена кнопка «Фигуры».
3. Нажав на нее, отыщите среди предложенных прямую линию. Кликните по ней в тот момент, когда возникнет необходимость вставить линию в текст. Обратите внимание, что вам придется задать две точки: место, где она будет начинать и где заканчиваться.

Способ третий

В данном текстовом редакторе предусмотрен еще один инструмент, который пригодится для быстрого создания линий. Чтобы нарисовать линию, поставьте курсор в нужном месте, после чего нажмите на кнопку «Границы», которая находится, опять-таки, во вкладке «Главная». После этого должна появиться горизонтальная линия по всей ширине листа.

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

Видео в помощь

Данная статья рассматривает периодически возникающую проблему самопроизвольного появления черты в документе. Если вы попали сюда из поисковой системы с вопросом «Как в ворде удалить жирную черту» , «ворд как удалить черту на странице» , «как убрать линию в документе word» или подобными, то вы пришли по адресу. Можете сразу переходить к разделу Удаление. Именно там вы узнаете, как же, наконец, избавиться от этой надоедливой черточки.
А если же вы искали «Как сделать в ворде черту в документе» , «Как сделать длинную сплошную черту» , «Как поставить в ворде нижнюю линию на весь лист» , «Как поставить в ворде черту для подписи» и другие, то в этом вам моя статья также поможет. Чуть ниже в разделе Добавление вы узнаете, как поставить сплошную черту в ворде и не только.

Добавление

Иногда в документе требуется отделять что-либо горизонтальной чертой. Многие ошибочно полагают, что если прочертят на всю строку знак подчеркивания «_» или дефиса «-«, то визуально черта получится, а значит все хорошо. На деле это не так, потому что при изменении размеров шрифта, полей или других видов форматирования, данная псевдочерта изменится и будет либо длинней, либо короче требуемой.

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

Для Word 2003 и ниже:

Зайдите в меню «Сервис» и выберите команду «Параметры автозамены» . В диалоговом окне «Автозамена» выберите вкладку «Автоформат при вводе» . Поставьте галочку с опцией «Линии границ».

Для Word 2007 и выше:

Нажимаем кнопку «Officce » и выбираем «Параметры Word». В появившемся окне пункт «Правописание» и нажимаем кнопку «Параметры автозамены» . В диалоговом окне «Автозамена» выберите вкладку «Автоформат при вводе» . Поставьте галочку с опцией «Линии границ».

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

• Введите три подряд «-» (три дефиса) и нажмите Ввод (Enter) — дефисы преобразуются в неразрывную тонкую линию на всю ширину страницы
• Введите три подряд «=» (три знака равенства) и нажмите Ввод (Enter) — знаки равенства преобразуются в двойную неразрывную черту на всю ширину страницы
• Введите три подряд «_» (знака подчеркивания) и нажмите Ввод (Enter) — знаки подчеркивания преобразуются в неразрывную жирную линию на всю ширину страницы

Но есть и еще один интересный способ, который ставит не сплошную, а пунктирную черту на всю ширину листа.

• Введите три подряд «*» (три звездочки) и нажмите Ввод (Enter) — дефисы преобразуются в пунктирную линию на всю ширину страницы

Удаление

Иногда так происходит, что в документе образуются лишние линии. Убираются они достаточно просто.

Для Word 2003 и ниже:

Поставьте курсор над этой линией, затем зайдите в меню Формат и выберите команду Границы и заливка и во вкладке Граница щелкните по самому верхнему типу границ: нет. Нажмите «ОК». Линия исчезнет.

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

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

Чтобы сделать такое простое подчеркивание текста необходимо на вкладке «Главная» в разделе «Шрифт» найти значок «Подчеркивание текста» , и нажать на него. Выделенный заранее текст станет подчеркнутым, а весь далее набираемый текст также будет подчеркиваться.

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

Следующий способ сделать линию в Word заключается в использовании символа подчеркивания, который имеется на клавиатуре. Для этого необходимо зажать клавишу «Shift» и нажимая значок нижнего подчеркивания «_» рисовать линию необходимой длины. Но такая линия также далека от идеальной. Писать на такой линии в Ворде не получится, и она не совпадает по уровню с обычным подчеркиванием текста.

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

Ну и последний способ нарисовать линию в Ворде, на которой можно будет писать, это просто нарисовать линию, как отдельный объект. Для этого переходим на вкладку «Вставка» и находим пункт «Фигуры» в разделе «Иллюстрации» . В фигурах находим обычную линию, нажимаем на нее и рисуем в нужно месте на листе. Если при рисовании линии удерживать клавишу «Shift» , то линия получится горизонтальной. При необходимости линию можно дополнительно настроить в соответствующем меню.

Добрый день.

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

И так, начнем…

1 Способ

Допустим, вы написали какой-то текст и вам нужно провести под ним прямую линию, т.е. подчеркнуть. В Word для этого есть специальный инструмент подчеркивания. Просто сначала выделите нужные символы, далее выберите на панели инструментов значок с буквой «Ч «. См. скриншот ниже.

2 Способ

На клавиатуре есть специальная кнопка — «тире». Так вот, если зажать кнопку «Cntrl» и затем нажать на «-» — в Word появиться небольшая прямая, как подчеркивание. Если повторить операцию несколько раз — длину линии можно получить на всю страницу. См. картинку ниже.

На картинке показана линия, созданная с помощью кнопок: «Cntrl» и «-«.

3 Способ

Этот способ пригодится в тех случаях, когда вы хотите провести прямую линию (и даже, может быть, не одну) в любом месте на листе: вертикально, горизонтально, поперек, на наискосок и пр. Для этого перейдите в меню в раздел «ВСТАВКА» и выберите функцию вставки «Фигуры». Далее просто щелкаете по значку с прямой линией и вставляете ее в нужное место, задав две точки: начало и конец.

4 Способ

В главном меню есть еще одна специальная кнопка, которую можно использовать для создания линий. Для этого поставьте курсор в нужную вам строчку, а затем выберите кнопку на панельке «Границы» (находится в разделе «ГЛАВНАЯ»). Далее у вас в нужной строчке должна появиться прямая линия во всю ширину листа.

Линии в текстовых документах зачастую используются для подчёркивания, акцентирования каких-либо сведений, создания пустой строки, для заполнения или определения текста. И как нарисовать линию в Wordр — довольно частый вопрос, дать ответ на который сложно. Для начала нужно определиться, что именно вам требуется.

Можно выделить три основных варианта, как сделать прямую в Word, каждый из которых может пригодиться в разных ситуациях. Способы, как убрать прямые, зависят от выбранного пути их создания.

Первый способ

Возможно, возникла ситуация, когда не знаете, как провести линию в Word простую, сплошную, посреди строки. Чаще всего, когда в тексте нужно оставить пустое место, чтобы позже заполнить данные от руки. Это применяется на бланках документов, в договорах и актах.

На клавиатуре находим клавишу «-» и нажимаем её одновременно с клавишей «Ctrl». В результате образуется небольшая прямая. Если повторить эту операцию множество раз, то можно «протянуть» её на ширину всей страницы. Когда достигнете полей , переместитесь на вторую строчку.

Как убрать линию в Word, созданную таким образом? Тоже довольно просто — эксплуатируем клавишу «Backspace».

Второй способ

Вам нужна не горизонтальная черта, а вертикальная либо наклонная? Как сделать линию в Word , какой инструмент утилизировать? Легко выполняется прямая, созданная как фигура.

Нарисовать прямую с помощью второго способа можно абсолютно в любом уголке листа: параллельно и перпендикулярно тексту, под углом. Для этого необходимо сделать несколько шагов:

• Перейдите в специальный раздел «Вставка» , выберите команду «Фигуры».
• Нажмите на значок, изображающий прямую.
• Нажмите мышкой в точку начала на листе, вместо курсора вы увидите крестик.
• Проведите мышкой в нужную вам сторону, удерживая левую кнопку.
• На точке, где линию нужно завершить, отпустите кнопку.

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

Как удалить линию в Word, сделанную как фигура, если она, наоборот, не нужна? Любую фигуру можно убрать, выделив её мышкой, затем нажав клавишу «Delete» либо выбрав кнопку «Вырезать» в панели инструментов. Для выделения достаточно кликнуть на неё в любом месте.

Третий способ

Как сделать линию в Word сразу во всю ширину страницы? В главном меню редактора имеется ещё одна хорошая удобная кнопка. Для того чтобы её использовать, необходимо поместить курсор в подходящем месте, затем найти в панели кнопку «Границы». Удалить лишнюю границу можно, эксплуатируя ту же кнопку, кликнув на неё, чтобы дезактивировать.

просмотров

10 фрагментов CSS для создания потрясающих эффектов анимированного подчеркивания текста

Подчеркивание CSS по умолчанию отлично работает. Кто мог это ненавидеть?

Но всегда есть что улучшить. Вы можете подумать, что с подчеркиванием мало что можно сделать, но если вы углубитесь в CSS-анимацию, вы поймете, насколько много вы действительно можете!

Я отсортировал бесчисленное количество стилей подчеркивания CSS и выбрал свои лучшие варианты для лучших пользовательских подчеркиваний в Интернете. Если что-то из этого привлекло ваше внимание, не стесняйтесь вмешиваться и попробовать поработать с исходным кодом.

Панель инструментов веб-дизайнера

Неограниченное количество скачиваний: более 1 000 000 веб-шаблонов, тем, плагинов, ресурсов дизайна и многое другое!

1. Чередование подчеркивания

Если вы переместите курсор между этими ссылками, вы заметите что-то забавное. Эффект подчеркивания в навигационном меню фактически изменяет стили между ссылками.

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

Вы можете сделать все это самостоятельно с помощью небольшого количества CSS, добавив подчеркнутый блок в элемент HTML.Удивительно просто, учитывая, как мало кода вам нужно (около 60 строк CSS).

2. Составление нескольких строк

Стили разрыва строки CSS сложны, и их нелегко обойти. Но с некоторой изобретательностью разработчик Уилл Кинг построил это перо, создав эффект динамического подчеркивания, который может охватывать несколько строк без каких-либо ошибок.

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

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

3. Подчеркивание

Разработчик

Райан Морс (Ryan Morse) создал этот очень простой эффект скользящего подчеркивания, основанный исключительно на CSS. Это довольно элегантное решение, учитывая, что для него даже не требуется дополнительный элемент HTML.

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

4. Лучшее подчеркивание текста

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

В улучшенном подчеркивании текста Лукаса Хорака вы заметите, что полоса под текстом лучше вписывается в нисходящие элементы. При этом учитываются такие формы букв, как «g» и «p», где строки опускаются ниже обычной высоты строки.

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

5. Анимационные стили

Это уникальное перо обладает несколькими настраиваемыми эффектами подчеркивания, созданными с помощью чистого CSS разработчиком Мэтью Скоттом.

Он может похвастаться четырьмя очень специфическими стилями подчеркивания, основанными на некоторых общих переходах CSS:

• Справа налево
• слева направо
• Анимация вовне
• Анимация внутрь

Вы заметите, что это работает с обычными переходами CSS3, которые работают как при наведении курсора на ссылку, так и при перемещении курсора за пределы ссылки.

Определенно несколько классных эффектов, и все они довольно легко переносятся в свои собственные проекты.

6. Дополнительные стили анимации

Вот еще один набор пользовательских анимаций подчеркивания, созданных разработчиком Ксесо.

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

7. Просто захожу

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

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

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

8. Расширение анимации

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

Обратите внимание, что для создания уникальной анимации при наведении курсора используется функция cubic-bezier () .

Это выполняется немного быстрее, чем «линейный» переход по умолчанию, поэтому дает совсем другой эффект. И вы даже можете попробовать настроить анимацию Безье самостоятельно, чтобы создать уникальный стиль подчеркивания.

9. Пользовательские подчеркивания CSS

Вот еще один стиль, который действительно может работать на любом веб-сайте.Разработчик Тристан Уилсон создал эти простые подчеркивания, которые обрамляют линию на несколько пикселей ниже текста.

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

Если вы хотите, чтобы ваши подчеркивания действительно выделялись среди всего стада, этот набор — отличное место для начала.

10. Установка между спусковыми механизмами

Ранее я упоминал о настройке стилей подчеркивания, чтобы они соответствовали убранным шрифтам.Эта ручка Джонатана Нила именно это и делает, и в ней не используются ничего, кроме HTML5 и CSS3.

Весь эффект зависит от пары свойств CSS3: box-shadow и text-shadow , если быть точным.

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

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

11. Пользовательские градиенты

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

Градиент проходит через CSS3, поэтому вы можете изменить цвета на все, что захотите. И если вы можете в это поверить, эта штука не требует для работы никакого дополнительного HTML . Просто выберите нужные ссылки привязки и скопируйте / вставьте коды CSS, чтобы получить собственные градиентные подчеркивания.

Из всех этих дизайнов я, конечно, надеюсь, что есть один приятный эффект, который вы можете извлечь из этой коллекции.

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

𝙐̲𝙣̲𝙙̲𝙚̲𝙧̲𝙡̲𝙞̲𝙣̲𝙚̲ Генератор | создать, скопировать и вставить подчеркнутый текст

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

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

Как это работает?

Использование диакритических знаков.

К буквам добавляются диакритические знаки, описывающие, как они должны произноситься.Акценты, подобные вышеприведенному é, являются диакритическими знаками.

Существуют сотни тысяч возможных комбинаций букв и диакритических знаков. Итак, Unicode — стандартизированная система компьютерных символов — позволяет нам комбинировать диакритические знаки с любым символом.

Перед добавлением диакритических знаков:

A z! & Ɯ Ԫ ט ጨ ⿔ ♞ 👌

После добавления диакритических знаков:

A͛ z͍! ͆ & ͜ Ɯͫͫ Ԫ̳̳̳ ט̌ ጨ̊̊̊̊̊̊ ⿔ ͡ ♞́ 👌̸̸̸̸͇͇͇͇͇ͤͤ̏̏̏͡

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

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

Это хитрость, но она остается верной корням подчеркивания:

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

Мэтью Баттерик — Практическая типографика Баттерика

Где я могу использовать этот инструмент?

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

Символы, включенные в инструмент, также являются специальными. Они из блока математических буквенно-цифровых символов Unicode — они сохраняют свой стиль, где бы вы их ни использовали.

Это означает, что подчеркивание остается неизменным независимо от того, куда вы его вставляете. 𝚕̲𝚒̲𝚔̲𝚎̲ ̲𝚝̲𝚑̲𝚒̲𝚜̲.

Если вы воспользуетесь этим трюком без этих символов (вы можете сделать это, щелкнув вкладку «Показать больше»), вы можете обнаружить, что он выглядит очень неприятно.

На сайтах социальных сетей есть разные способы отображения диакритических знаков.Я приложил все усилия, чтобы нормализовать их на всех платформах. Двойное подчеркивание плохо работает в Twitter.

Когда следует подчеркнуть?

Никогда.

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

Подчеркивание текста разрешено только тогда, когда вы иронично пишете ретро (или пишете статью о подчеркнутом тексте).

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

Подчеркнутый текст — Fonts.com | Fonts.com

, автор — Илен Стризвер

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

В мире цифрового набора текста подчеркивание редко используется для выделения текста. Это «лечение» — пережиток эпохи пишущей машинки, когда это был единственный способ выделить текст. Сегодня курсив и / или жирный шрифт обычно используются для добавления акцента, в зависимости от контекста и желаемой степени внимания.Но все же есть случаи, когда подчеркивание (также называемое подчеркиванием) является эффективным и привлекательным способом выделить текст. Он может добавить привлекательный элемент дизайна и полезен для шрифтов любого размера, включая верхние и нижние колонтитулы, заголовки и подзаголовки, кавычки и важные выноски в основном тексте.

Хорошая новость заключается в том, что сегодняшнее программное обеспечение для дизайна предлагает широкий контроль над символами подчеркивания. В некоторых случаях вы можете легко и быстро создать индивидуальный стиль и получить к нему доступ.Подчеркивание может быть творческим и привлекательным, поскольку вы можете настроить стиль, толщину, цвет и смещение текста. В некоторых случаях также можно импортировать и экспортировать стили. И в Quark®, и в InDesign® эти возможности несколько скрыты. Их стоит изучить и использовать с удовольствием. Вот как начать:

QuarkXPress

Чтобы создать собственные стили подчеркивания или изменить стиль по умолчанию, перейдите по адресу:

• Правка> Стили подчеркивания.
• Выберите цвет, оттенок, ширину и смещение. Стили подчеркивания также можно экспортировать или импортировать из этого диалогового окна.
• Выберите ОК, затем Сохранить. Чтобы применить стиль подчеркивания, выделите текст и перейдите к:
• Стили> Стили подчеркивания.
• При желании выберите «Предварительный просмотр», затем нажмите «ОК» для сохранения.

InDesign

Параметры подчеркивания InDesign предоставляют больше вариантов, включая множество стилей декоративного подчеркивания, а также возможность раскрашивать промежутки, как показано в нижнем примере.Функция подчеркивания

InDesign предлагает множество вариантов для очень творческих результатов.

• Выберите тип, который нужно подчеркнуть.
• Перейдите в раскрывающееся меню палитры символов> Параметры подчеркивания.
• Выберите стиль (находится в разделе «Тип»), толщину и цвет подчеркивания.
• Если вы выберете более декоративное подчеркивание, вы можете настроить цвет промежутков.
• При желании выберите «Предварительный просмотр», затем нажмите «ОК» для сохранения.

Параметры подчеркивания также можно создать с помощью стилей абзаца и символа.

Посетите нашу страницу статей о типографике, чтобы узнать больше о типографике.

Настроить подчеркивание с помощью оформления текста в CSS

Хотя в этом руководстве содержится контент, который, по нашему мнению, принесет большую пользу нашему сообществу, мы еще не тестировали или отредактировал его, чтобы обеспечить безошибочное обучение. Это в нашем списке, и мы над этим работаем! Вы можете помочь нам, используя кнопку «сообщить о проблеме» в нижней части руководства.

Говорят, хороших вещей приходят к тем, кто ждет , и это оказывается правдой, когда дело доходит до оформления текста в сети. Модуль оформления текста CSS уровня 3 определяет несколько отличных новых способов украшения текста в Интернете, и браузеры, наконец, начинают их хорошо поддерживать. Времена использования border-bottom вместо правильного подчеркивания текста, чтобы получить другой цвет подчеркивания, наконец, могут прийти в норму.

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

текст-оформление

Свойство text-decoration раньше предназначалось только для выбора между значениями none, underline, overline и line-through, но с новой рекомендацией оно становится сокращением для новых text-decoration-color, text-decoration-style и свойства text-decoration-line. Например, вот цветное двойное подчеркивание:

  .fancy {
  -webkit-text-decoration: двойное подчеркивание горячим розовым цветом;
  оформление текста: двойное подчеркивание горячим розовым цветом;
}
  

Необычный подчерк

текст-украшение-цвет

Работает так, как вы можете себе представить.Наконец-то появился способ изменить цвет оформления текста!

стиль оформления текста

text-decoration-style используется для определения типа оформления текста, а новая рекомендация содержит два новых значения: double и wavy:

  .wavy {
  оформление текста: подчеркивание;
  -webkit-text-decoration-color: лосось;
  текст-украшение-цвет: лосось;
  -webkit-text-decoration-style: волнистый;
  стиль оформления текста: волнистый;
}
  

Волнистое украшение

текст-украшение-строка

text-decoration-line принимает значения подчеркивания, overline, line-through и blink (однако мигание устарело):

 .наносить удар {
  -webkit-текст-украшение-цвет: красный;
  цвет оформления текста: красный;
  -webkit-text-decoration-line: сквозная строка;
  текст-украшение-строка: сквозная строка;
}
  

Ударь этот

текст-украшение-пропустить

С помощью text-decoration-skip мы можем избежать того, чтобы украшение проходило через части элемента, к которому оно применяется. Возможные значения: объекты, пробелы, чернила, края и украшение коробки.

• ink: И, наконец, способ предотвратить наложение элементов нижнего положения глифов при оформлении текста:

 .чернила {
  -webkit-text-decoration: темно-бирюзовое сплошное подчеркивание;
  оформление текста: темно-бирюзовое однотонное подчеркивание;
  -webkit-text-decoration-skip: чернила;
  текст-украшение-пропустить: чернила;
}
  

Бегемот

---

• объекты: текстовое оформление пропускает элементы, отображаемые в виде встроенного блока. Это также начальное значение:
.

  

  Становится  очень  модным

  

  .super {
  -webkit-text-decoration: Перу сплошная линия поверх;
  текст-оформление: перу сплошная линия;
  -webkit-text-decoration-skip: объекты;
  текст-украшение-пропуск: объекты;
}
  

Очень необычное

---

Остальные значения еще не поддерживаются браузерами:

• пробелов: в оформлении пропущены пробелы и знаки препинания.
• кромок: создает зазор, когда два элемента с текстовым оформлением находятся рядом друг с другом.
• box-decoration: украшение пропускает любые унаследованные поля, отступы или границы.

текст-подчеркивание-позиция

С помощью text-underline-position у нас есть еще один способ управлять позиционированием оформления текста по отношению к глифам. Возможные значения: auto, under, left и right.

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

 .auto {
  -webkit-text-decoration: синее сплошное подчеркивание;
  оформление текста: грифельно-синее сплошное подчеркивание;
  -webkit-текст-подчеркивание-позиция: авто;
  положение подчеркивания текста: авто;
}
  

Бегемот

… а теперь обратите внимание, как нижняя граница размещается после нижних элементов текста:

  .under {
  -webkit-text-decoration: синее сплошное подчеркивание;
  оформление текста: грифельно-синее сплошное подчеркивание;
  -webkit-text-underline-position: под;
  текст-подчеркивание-позиция: под;
}
  

Бегемот

Левое и правое значения для позиции подчеркивания текста используются для управления оформлением текста в режимах вертикального письма.

А теперь продолжайте и поразите нас необычным оформлением текста!

Поддержка браузера: Могу ли я использовать текстовое оформление с 2020 года? показывает, что 94% браузеров по всему миру хотя бы частично поддерживают это свойство.


82 Текстовые эффекты CSS

Коллекция бесплатных HTML и текстовых эффектов CSS примеров кода. Обновление майской коллекции 2020 года. 11 новинок.

1. Эффекты тени текста CSS
2. CSS эффекты свечения текста
3. CSS 3D текстовые эффекты
4. Анимация текста CSS
5. Эффекты сбоя текста CSS
6. Текстовые эффекты JavaScript

Автор

• Йоав Кадош
• 23 марта 2021 г.

О коде

Эффект ретро текста

Эффект ретро-текста на чистом CSS со свойствами mask-image , text-stroke и background-clip .

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

• Амит Шин
• 13 февраля 2021

О коде

Отображение положения мыши в CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

• Адам Аргайл
• 9 сентября 2020

О коде

Выделение текста CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

• Флориан Шульц
• 8 сентября 2020

О коде

CSS + SVG Эффект размытия текста в движении

Демонстрация использования SVG-фильтров в CSS для создания потрясающих текстовых эффектов.

Совместимые браузеры: Chrome, Edge, Opera, Safari

Адаптивный: нет

Зависимости: —

О коде

Многослойный текст

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

• Стефани Эклс
• 31 июля 2020

О коде

Стикер CSS

Многоразовый .наклейка с переменными CSS для настройки цветов градиента и угла сияния.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

• Адам Аргайл
• 13 июля 2020

О коде

CSS Фиксированная коническая заливка

Совместимые браузеры: Chrome, Edge, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

• Адам Аргайл
• 10 июля 2020

О коде

CSS градиентный текст

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

• Вайбхав Шарма
• 18 июня 2020

О коде

Drop Capital —

:: первая буква

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

• Håvard Brynjulfsen
• 11 мая 2020

О коде

Разделить текст с отсечкой

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

• Håvard Brynjulfsen
• 16 апреля 2020

О коде

3D буквы Sugar Sweet

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

• Джулия Кардиери
• 8 апреля 2020

О коде

CSS в CSS с большим количеством C и S

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

О коде

режим записи

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

• Марван Зибауи
• 15 февраля 2020

О коде

Подчеркнуть Анимация при наведении клипа

Замечательное анимированное подчеркивание с использованием обрезки текста.Текст использует background-clip: text и linear-gradient background, чтобы быть двухцветным. Мы обходим анимацию градиента, вместо этого анимируя background-position . Мы должны использовать элемент оболочки для выделения подчеркивания под текстом, поскольку цвет текста уже является фоном!

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

• Линн Фишер
• 6 февраля 2020

Сделано с

• HTML (мопс) / CSS (стилус)

О коде

CSS Arcade Typography: Snow Bros.(1990)

Неровной шрифт из аркадной игры Snow Bros. Drawn in CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

• Лина Лаванья
• 2 января 2020

О коде

Двадцать двадцать и многоцветные градиенты

Многоцветные градиенты, обрезанные с помощью CSS, смешанные с SVG feGaussianBlur .

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

• Ширин Тадж
• 13 декабря 2019

О коде

Эффект слоистого текста и тени CSS

text-shadow — это забавный небольшой стиль CSS, который может превратить любой простой текст в красивое произведение искусства.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

О коде

тройная опечатка

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

О коде

Многострочный текст жирное подчеркивание при наведении курсора

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

• Себастьян Опперман
• 29 июля 2019

О коде

СОХРАНИТЬ

Необычный баннер CSS с использованием box-shadow s.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

• Бенджамин Солум
• 18 июля 2019

О коде

Многострочное усечение в чистом CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

• Адам Дипинто
• 18 июля 2019

О коде

Скользящая перспектива

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

• Ион Эмиль Негоита
• 5 июля 2019

О коде

Текстовые эффекты шрифтов 80-х годов 4: Текст в киберпространстве

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

• Стас Мельников
• 1 июня 2019

О коде

Эффекты многострочного анимированного подчеркивания текста

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

О коде

Пользовательское подчеркивание многострочного текста с закругленными заглавными буквами

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

О коде

Телефон с большой кнопкой Western Electric

Воссоздание телефона Western Electric Big Button 1970-х годов.Воссоздано с использованием гибкого бокса, сетки, теней и обводок текста. Эта ручка столкнулась с несколькими причудами CSS. Во-первых, установка border-radius и overflow: hidden нарушает сглаживание на border-radius , оставляя неровный вид. Это было немного поработано, добавив очень мягкий свет box-shadow на стороне, которая имеет граничный радиус . Это несколько снимает проблему. Во-вторых, текстовый штрих все еще грубо реализован в браузерах.Все штрихи текста рисуются на внешней стороне глифа, что изменяет форму глифа. Кроме того, размер теней текста изменяется с учетом внутренней части глифа и в конечном итоге становится меньше. Чтобы обойти это, я увеличил размер text-stroke , а затем попытался расположить каждый глиф так, чтобы обводка слегка выходила за пределы контейнера и была обрезана. Это дает более гладкий вид, но неточный и обрезает некоторые символы.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

• Мэнди Майкл
• 8 мая 2019

О коде

Зачеркнутый многострочный текст

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

• Джейми Хэммонд
• 29 апреля 2019

О коде

Эффект контурного текста

Эффект простого контура текста с использованием базового CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

• Дэвид Лилло
• 25 апреля 2019

О коде

Черный цвет

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

• Сара Фоссхайм
• 2 марта 2020

О коде

Текст в неоновом свете

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

• Мишель Баркер
• 4 апреля 2019 г.

О коде

Текст по кругу

Текст в кружке с переменными CSS.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

• Эндрю Спенсер
• 4 марта 2019

О коде

Подчеркнутый текст SVG

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

О коде

Анимированные капли текста

Анимированные капли текста с использованием только CSS.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

• Адам Кун
• 31 января 2019

О коде

Оставайся позитивным: текстовый эффект

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

• Маттиас Отт
• 3 декабря 2018 г.

О коде

Многострочный градиент фона

Многострочный фоновый градиент с смешанным режимом .

Совместимые браузеры: Chrome, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

О коде

Фоновый зажим CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

• Бен Сабо
• 19 ноября 2018

О коде

РАЗРЕШЕНО

Совместимые браузеры: Chrome, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

О коде

Всплывающий текст с тенью фонового изображения

Вырезание текста из фона с последующим его «всплыванием» аналогично тому, как можно использовать тень от текста.Фактически, здесь используется тень текста!

Совместимые браузеры: Chrome, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

• Андрес Санчес
• 25 октября 2018

О коде

Отображение текста CSS

Отображение простого текста с помощью CSS с использованием псевдоэлементов.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

• Юсуке Накая
• 24 октября 2017 г.

О коде

Только CSS: Text Slicer Gradient

Пожалуйста, введите ваше любимое слово и измените размер шрифта, который вам нравится!

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

• Ашиш Ананд
• 30 сентября 2018

О коде

Классный трехмерный текст

Классный трехмерный текст с состоянием наведения только на CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

• Парк Джорджа У.
• 18 сентября 2018

О коде

Эффект преломленного плавающего текста

Этот пример показывает, как чистый CSS можно использовать для создания анимированного эффекта преломленного плавающего текста.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

• Эрин Э. Салливан
• 10 сентября 2018

О коде

Анимированная тень текста

Забавная CSS-анимация, которая создает отскок, имитируя разделение RGB во время процесса.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

О коде

SVG / Анимация обводки

Анимированная цитата дня 🙂 «делай что-нибудь творческое каждый день» с анимацией штрихов.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

О коде

Эффект подчеркивания

Эффект анимированного подчеркивания на чистом CSS на нескольких строках.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

• Майк Голус
• 14 августа 2018

О коде

CSS Gooey Text Transition

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

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

О коде

Мерцающий неоновый текст

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

О коде

Обводка текста + смещение тени

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

О коде

Перекос текста при наведении

Перекос текста при наведении курсора в HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

• Кристофер Уоллис
• 7 июля 2018 г.

О коде

Megaman ГОТОВ!

Воспроизведение знаменитого «READY» из игр Megaman без использования JavaScript. При этом широко используются CSS Grid и переменные css для определения времени.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

• Мэнди Майкл
• 25 июня 2018

О коде

Анимация полосатого текста

Анимация полосатого текста с фоновым клипом и градиентами.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

• Стефано Перелли
• 11 февраля 2018

Сделано с

• HTML
• CSS
• JavaScript (jquery.js)

О коде

Letters Effect

Эффект букв на свитке.

Автор

• Себастьян ДеРосси
• 7 января 2018

Сделано с

• HTML
• CSS
• JavaScript (createjs.js)

О коде

Забавный текст

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

Автор

• Джон Хили
• 25 сентября 2017

Сделано с

• HTML
• CSS / МЕНЬШЕ
• JavaScript (tweenmax.js)

О коде

Анимация текстовой строки

Хорошая анимация текстовых строк с помощью TweenMax.js.

Автор

• Натан Тейлор
• 14 сентября 2017

О коде

Всплывающий текст

Всплывающий текст на чистом CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

• Димитра Василопулу
• 27 июля 2017 г.

О коде

Текстовый эффект для немого кино

Текстовый эффект фильма с холстом .

Автор

• Кэсси Эванс
• 17 июля 2017

Сделано с

• HTML
• CSS
• JavaScript (аним.js)

О коде

Анимация текста SVG

Хорошая текстовая анимация SVG.

Автор

• Артур Седлуха
• 15 июля 2017

Сделано с

• HTML / Мопс
• CSS / SCSS
• JavaScript (tweenmax.js)

О коде

Анимация отображения текста

Анимация отображения текста GSAP.

Демонстрационное изображение: Морфинг текста со снятием шкуры с лука

Морфинг текста со сниманием кожи с лука

Морфинг текста со скинами лука в HTML / CSS / JS.
Сделано Джоном Хили
14 июня 2017 г.

Демонстрационное изображение: закрашенный текст

Закрашенный текст

Закрашенный текст, эксперимент SVG + CSS3 с анимированными тенями. Он не оптимизирован для мобильных устройств … пока.
Сделано Рафаэлем Гонсалесом
16 сентября 2016 г.

Демонстрационное изображение: Вторая тень

Вторая тень

Стилизация текста с помощью SVG.
Сделано в Code School
21 апреля 2016 г.

Демонстрационное изображение: волнистый текст

Волнистый текст

Экспериментируйте с волнистым текстом с фильтрами SVG.
Сделано Лукасом Беббером
22 октября 2015 г.

О коде

Пылающий огонь

Анимированные текстовые эффекты с использованием CSS3 text-shadow для придания заголовкам текста пламени.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

• Натан Тайло
• 15 сентября 2017

О коде

Spring Text Hover Effect

Просто поигрался с эффектами для кнопок и подумал, что это довольно круто.

Автор

• Чарли Маркотт
• 16 августа 2017

О коде

Простой эффект наведения CSS с использованием циклов Sass

Простая небольшая анимация наведения. Циклы Sass делают невероятные задержки анимации действительно легкими … вы можете извлечь из них много полезного.

Автор

• Рагнар Тор Валгейрссон
• 12 июля 2017

О коде

Анимированные подчеркивания

Демонстрация анимированного эффекта подчеркивания.Чистая CSS-анимация.

Демонстрационное изображение: CSS Perspective Text Hover

CSS Perspective Text Hover

Эксперимент с использованием веб-шрифтов в сочетании с инструментами преобразования CSS 3D.
Сделано Джеймсом Босвортом
22 августа 2016 г.

Демонстрационное изображение: анимированный выделенный текст

Анимированный выделенный текст

Идея проста, в ней используются линейный градиент и переход.
Сделано Риан Ариона
19 февраля 2015 г.

Демонстрационное изображение: Счастливый текст

Счастливый текст

Эффект счастливого текста HTML и CSS.
Сделано Bennett Feely
6 декабря 2014 г.

Демонстрационное изображение: очищенный текст преобразуется

очищенный текст преобразуется

Это перо показывает текст, который выглядит так, как будто он отделен от страницы. У него плавная анимация при наведении.
Автор Michiel Bijl
25 ноября 2014 г.

Демонстрационное изображение: Типографский текст Neon

Типографский текст Neon

Текстовый дизайн (типографика) с неоновым эффектом.
Сделано Прима Утама Априансях
6 марта 2014 г.

Демонстрационное изображение: вертикально вращающийся текст

Вертикально вращающийся текст

Вертикально вращающийся текст с HTML и CSS.
Сделано Джейкобом
23 июля 2014 г.

Автор

• Отметка прилипания
• 22 июня 2018

О коде

Попытки CSS на текст со встроенным перекошенным фоном

Использование skew отображается, только если элемент — display: block или inline-block . Некоторые из них выглядят одинаково в широком окне просмотра, но не работают по-другому, поскольку ширина окна просмотра уменьшается.

Автор

• Кэмерон Фицуильям
• 4 марта 2018

О коде

Текст в движущемся облаке

Перемещение текста в облаке с HTML и CSS.

Автор

• Инес Монтани
• 25 декабря 2017 г.

О коде

Клейкий текстовый фон с фильтрами SVG

Пример использования липкого фильтра SVG для создания гладких краев вокруг встроенного текста с фоном.

Автор

• Даниэль Ющик
• 18 августа 2017

О коде

Текст с видео-фоном

Эта демонстрация исследует создание выделенного текста / контуров в SVG и зацикливание видео YouTube в качестве заливки.

О коде

Фон текста

Обрезка фона текста.

Автор

• Беннет Фили
• 22 августа 2015

О коде

Щипковый тип с тенью текста CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Демонстрационное изображение: SVG-текст: анимированный ввод

SVG-текст: анимированный ввод

Анимированная типизация HTML, CSS и SVG.
Сделано Тиффани Рэйсайд
12 февраля 2015 г.

О коде

background-clip: text Эффект CSS

Используйте background-clip: text и fill-text-color: transparent , чтобы применить фон к тексту.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Создание настраиваемого подчеркивания (Microsoft Word)

Обратите внимание: Эта статья написана для пользователей следующих версий Microsoft Word: 97, 2000, 2002 и 2003.Если вы используете более позднюю версию (Word 2007 или более позднюю), этот совет может не подойти вам . Чтобы ознакомиться с версией этого совета, написанного специально для более поздних версий Word, щелкните здесь: Создание настраиваемых подчеркиваний.

Когда приходит время подчеркнуть часть текста в документе, многие люди полагаются на инструмент подчеркивания на панели инструментов форматирования.При этом применяется один тип подчеркивания, но в Word есть несколько типов подчеркивания, которые вы можете использовать. Все, что вам нужно сделать, это выделить текст, который нужно подчеркнуть, а затем выбрать «Шрифт» в меню «Формат». Word отображает вкладку «Шрифт» диалогового окна «Шрифт». (См. Рисунок 1.)

Рисунок 1. Вкладка «Шрифт» диалогового окна «Шрифт».

Обратите внимание, что диалоговое окно включает раскрывающийся список под названием «Стиль подчеркивания». Щелкните список, и вы можете (в зависимости от вашей версии Word) выбрать до 18 способов подчеркивания текста (включая «Нет»).Некоторым людям этого разнообразия может быть недостаточно. Например, вы можете подчеркнуть свой текст мелкими точками, а не пунктирным подчеркиванием или жирным пунктирным подчеркиванием, оба из которых являются параметрами в раскрывающемся списке «Стиль подчеркивания».

Здесь было бы неплохо создать в Word настраиваемые подчеркивания. К сожалению, сделать это невозможно. Вы, конечно, можете использовать инструменты на панели инструментов Рисование, чтобы создать именно тот тип линий, который вам нужен, но вам нужно будет разместить их по отдельности, а затем перемещать их, если ваш текст перемещается.

Лучшее решение, особенно если вы будете делать много-много подчеркивания определенным образом, — это создать свой собственный шрифт, включающий именно тот тип подчеркивания, который вам нужен. Используя редактор шрифтов (их много на рынке), вы можете выбрать любой шрифт, который вы хотите, изменить этот шрифт, чтобы включить подчеркивание, а затем сохранить шрифт под новым именем. Если вам нужно настраиваемое подчеркивание, просто переключите шрифт на выделенный текст.

Конечно, если вы создадите собственный шрифт, а затем поделитесь документом с другими, вам нужно будет либо убедиться, что у других также есть шрифт, либо вам нужно будет встроить шрифт в документ (Инструменты | Параметры | Сохранить вкладка).

WordTips — ваш источник экономичного обучения работе с Microsoft Word. (Microsoft Word — самая популярная программа для обработки текстов в мире.) Этот совет (363) применим к Microsoft Word 97, 2000, 2002 и 2003. Вы можете найти версию этого совета для ленточного интерфейса Word (Word 2007 и более поздних версий) здесь: Создание настраиваемых подчеркиваний .

Автор Биография

Аллен Вятт

Аллен Вятт — всемирно признанный автор, автор более чем 50 научно-популярных книг и многочисленных журнальных статей.Он является президентом Sharon Parq Associates, компании, предоставляющей компьютерные и издательские услуги. Узнать больше о Allen …

Затенение на основе шансов и событий

Вы можете использовать условное форматирование, чтобы добавить затенение к различным ячейкам на листе. Этот совет показывает, как можно растушевать …

Открой для себя больше

Косвенная ссылка на ячейку на другом листе

Excel включает мощную функцию ДВССЫЛ, которую можно использовать для объединения ссылок на другие ячейки в вашей книге….

Открой для себя больше

Определение вашего IP-адреса

Если ваш компьютер обменивается данными по сети или через Интернет, он использует IP-адрес. Этот совет объясняет, что такое IP …

Открой для себя больше

Создание настраиваемого подчеркивания (Microsoft Word)

Обратите внимание: Эта статья написана для пользователей следующих версий Microsoft Word: 2007, 2010, 2013, 2016, 2019 и Word в Office 365.Если вы используете более раннюю версию (Word 2003 или более раннюю), этот совет может не подойти вам . Чтобы ознакомиться с версией этого совета, написанного специально для более ранних версий Word, щелкните здесь: Создание настраиваемых подчеркиваний.

Когда приходит время подчеркнуть часть текста в документе, многие люди полагаются на инструмент «Подчеркивание» на вкладке «Главная» ленты (в группе «Шрифт»).При этом применяется один тип подчеркивания, но в Word есть несколько типов подчеркивания, которые вы можете использовать. Вы можете увидеть некоторые из этих стилей подчеркивания (их восемь), щелкнув стрелку вниз справа от инструмента «Подчеркивание». Если вам нужно еще больше стилей подчеркивания, щелкните стрелку вниз, а затем выберите Дополнительные подчеркивания. Word отображает вкладку «Шрифт» диалогового окна «Шрифт». (См. Рисунок 1.)

Рисунок 1. Вкладка «Шрифт» диалогового окна «Шрифт».

Обратите внимание, что диалоговое окно включает раскрывающийся список под названием «Стиль подчеркивания».Щелкните список, и вы можете выбрать любой из 18 способов подчеркнуть текст (включая «Нет» и «Только слова»). Некоторым людям этого разнообразия может быть недостаточно. Например, вы можете подчеркнуть свой текст мелкими точками, а не пунктирным подчеркиванием или жирным пунктирным подчеркиванием, оба из которых являются параметрами в раскрывающемся списке «Стиль подчеркивания».

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

Лучшее решение, особенно если вы будете делать много-много подчеркивания определенным образом, — это создать свой собственный шрифт, включающий именно тот тип подчеркивания, который вам нужен. Используя редактор шрифтов (их много на рынке), вы можете выбрать любой шрифт, который вы хотите, изменить этот шрифт, чтобы включить подчеркивание, а затем сохранить шрифт под новым именем. Если вам нужно настраиваемое подчеркивание, просто переключите шрифт на выделенный текст.

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

WordTips — ваш источник экономичного обучения работе с Microsoft Word. (Microsoft Word — самая популярная программа для обработки текстов в мире.) Этот совет (9861) применим к Microsoft Word 2007, 2010, 2013, 2016, 2019 и Word в Office 365. Вы можете найти версию этого совета для старого интерфейса меню Word здесь: Создание настраиваемых подчеркиваний .

Автор Биография

Аллен Вятт

Аллен Вятт — всемирно признанный автор, автор более чем 50 научно-популярных книг и многочисленных журнальных статей.Он является президентом Sharon Parq Associates, компании, предоставляющей компьютерные и издательские услуги. Узнать больше о Allen …

Управление сортировкой текста в Word

Word имеет очень упорядоченный способ сортировки информации, но этот упорядоченный метод может не соответствовать тому, что вам нужно …

Открой для себя больше

Общие сведения о закладках и их использовании

Закладки — отличная функция, которую можно использовать для отметки местоположения текста или для отметки положения в документе.Они могут …

Открой для себя больше

Редактирование графических объектов

Хотите изменить способ отображения графического объекта на листе? Вам нужно отредактировать его, используя технику …

Открой для себя больше .

No related posts.