Содержание

Стилизация: подчеркивание ссылок | Полезное для разработчика

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

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

Но в Интернете все по-другому. Гиперссылки являются важной частью Интернета; и с самого начала интернета они были подчеркнуты. Это общепризнанное соглашение. Значение кристально ясно — подчеркивание означает ссылку.

Тем не менее, большое количество популярных веб-сайтов убрало подчеркивание: The New York Times, New York Magazine, The Washington Post, Bloomberg, Amazon, Apple, GitHub, Twitter, Wikipedia. Когда в 2014 году Google удалили подчеркивания со страницы результатов поиска, их ведущий дизайнер Джон Уайли заявил, что это создало более чистый вид. Тем не менее, на большинстве этих сайтов сохранилось с небольшими различиями выделение традиционным сине-голубым цветом (#0000EE), который был цветом браузера по умолчанию с самого начала Интернета. Хотя это обеспечивает для большинства пользователей визуальную подсказку, этого может быть недостаточно для обеспечения соответствия доступности WCAG.

Цвет не должен использоваться в качестве единственного визуального средства передачи информации, указания действия, запроса ответа или различения визуального элемента. — WCAG 2.1

WCAG не обязывает строго использовать подчеркивания для ссылок, но рекомендует их. Пользователи-дальтоники должны иметь возможность различать ссылки. Вы можете выделить их другими способами, например, жирным шрифтом font-weight. Или вы могли бы сохранить эту старую визуальную доступность. Но если мы собираемся использовать подчеркивание, мы хотим, чтобы оно выглядело красиво. Марчин Вичари, дизайнер из Medium, описал идеальное подчеркивание как:

[…] видимое, но ненавязчивое — позволяющее людям понять, на что можно нажимать, но не обращающее на себя слишком много внимания. Оно должно располагаться на правильном расстоянии от текста, удобно помещаясь позади текста, когда это же место должны занять выступающие части букв.

Для достижения этого традиционно требовались хитрости CSS.

Хаки, которые мы использовали

С этим трюком должны быть знакомы все разработчики — с помощью :border-bottom. Имитируя подчеркивание с помощью border-bottom, мы получаем контроль над цветом и толщиной. Эти псевдо-подчеркивания имеют одну проблему: слишком большое расстояние от текста. Вы могли бы потенциально решить эту проблему с помощью line-height, но и это имеет свои недостатки.

Аналогичная техника использует box-shadow. Марчин Вичари впервые применил самую сложную технику, которая использовала background-image для имитации подчеркивания. Это были полезные хаки, но, к счастью, они больше не нужны.

Стилизация реальных подчеркиваний

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

text-underline-offset контролирует положение подчеркивания.

text-decoration-thickness контролирует толщину подчеркивания.

Согласно блогу WebKit: Вы также можете указать from-font для обоих этих свойств, что задает получение соответствующего показателя из файла используемого шрифта

.

UX- агентство Clearleft смело использует (псевдо) подчеркивания, четко обозначая ссылки с помощью красочных стилей. Вот один из примеров искусственного подчеркивания:

a {
  text-decoration: none;
  border-bottom: #EA215A 0.125em solid;
}

Обратите внимание, что это псевдо-подчеркивание явно ниже выступающей части буквы «у»:

Вот тот же параграф при использовании DevTools для применения того же стиля к реальному подчеркиванию с новыми свойствами CSS:

a {
  text-decoration-color: #EA215A;
  text-decoration-thickness: .
 
 125em;
  text-underline-offset: 1.5px;
}

Вы заметили, что я использую в этом примере кода единицу em. Спецификация настоятельно рекомендует использовать ее, а не пиксели, чтобы толщина соответствовала шрифту. Эти свойства уже реализованы в Safari и появятся в Firefox 70.

С переходом браузера Microsoft Edge на Chromium мы, наконец, получим кросс-браузерную поддержку для свойства text-decoration-style, которое предлагает варианты: solid (по умолчанию), double, dotted, dashed и wavy. В сочетании эти новые свойства открывают целый ряд возможностей.

Возможно, это самое большое обновление для подчеркивания в Интернете, и при этом разработчикам нет необходимости что-либо делать. В старые добрые времена выступающие части букв бесцеремонно обрезались подчеркиванием, что было далеко не элегантно. Разработчики привыкли обходить этот недостаток, применяя text-shadow соответствующий цвету фона. text-decoration-skip-ink дает лучший способ создать разрывы подчеркивания вокруг выступающих частей.

Значение по умолчанию auto (слева) и значение none (справа)

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

Автор: Ollie Williams

Источник: https://css-tricks.com

Редакция: Команда webformyself.

Источник: https://webformyself.com/stilizaciya-podcherkivanie-ssylok/

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

Нас недавно заинтересовал простой визуальный эффект: при наведении указателя мыши подчеркивание появляется из центра с помощью анимации. Создать такой эффект на удивление просто, не требуется добавление дополнительных элементов 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

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

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

Как работать с текстом в Instagram

Статья обновлена. Первая публикация 28 ноября 2017 года

Любителям лонгридов – посвящается. Уроки редакторской гигиены в Инстаграме.

Редакторская гигиена – оформление текста с заголовками, буллитами, абзацами, втяжками, цветом и другими элементами верстки.

Инстаграм не предоставляет инструментов для верстки, но это не значит, что текст должен быть написан как попало. Базовая задача SMM-щика в Инстаграме – уметь верстать неформатированный текст. Ведь всегда приятнее читать пост, разделенный на абзацы, с выделением важного, а не продираться сквозь дебри единого полотна (как будто смотришь на чек в магазине).

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

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

Подписи в стиле «записываемся на ноготочки». Минимализм хорош не всегда, даже в Инста текстеТекст единым полотном, без намека на редактуру и верстку

Этих крайностей легко избежать. Избавится от первой крайности помогут статьи «Что писать, когда нечего писать» и «30 идей для поста в Инстаграм» в блоге SMMplanner. А для избавления от крайности второй читайте нехитрые приемы в нашей статье.

Деление на абзацы

Первая задача любого текста – поделить его на абзацы. Один абзац должен содержать одну новую мысль. Тему заявляем в начале, внутри абзаца развиваем ее.
Хорошо, если абзац занимает 5-9 строк на экране мобильного телефона. Абзац длиннее 12 строк может показаться перегруженным.

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

Текст с абзацами без пустых строк визуально сливается в единое полотноТекст с пустыми строками между абзацев

Как отбивать текст

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

Видеоурок «Абзацы на Айфоне». Невидимый пробел «⠀» ← тут, в кавычках нужный символ для абзаца на айфоне. Видеоурок «Абзацы на Андроиде»

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

Нашли, где спрятался ненужный пробел?

Заголовки и разделы

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

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

Выглядит немного грязно, зато понятнее, чем с пустыми строками

Не переусердствуйте, дополнительное выделение заголовков загрязняет текст.

Больше про заголовки и правила подписи к фото читайте в статье «Подпись к фото в Инстаграме» в блоге SMMplanner.

Кстати, заметили на фото выше вместо пустых строк три точки? Так иногда делают, когда не умеют ставить пустую строку. Можно, конечно, поставить и одну точку, но три точки вроде как должны сказать «так и было задумано».

Когда хочется отступить побольше, а как – неизвестно, появляются точки и странные полоски. Так часто поступают творческие люди, когда хотят срочно показать что-то миру, а времени на качественную редактуру поста нет

Перечни и примеры

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

→ Выделить перечни тире, стрелкой или эмодзи.

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

→ Перед примерами поставить ключевое слово, главную мысль всего перечисленного ниже.

Простейший пример этого приема – любой рецепт

Если примеры короткие, их можно не отделять пустыми строками.

Длинные примеры в Инста тексте лучше отделить пустыми строками

Выделение отдельных слов или фраз

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

Выделять можно:

  • выделив для фразы отдельный абзац;
  • написать слово ЗАГЛАВНЫМИ буквами;
  • сделать слово жирным;
  • ;ʟɔʞǝʟ qʟʎнdǝʚǝdǝп
  • п̲о̲д̲ч̲е̲р̲к̲н̲у̲в ̲т̲е̲к̲с̲т̲;
  • ‮отзеркаливать текст;
  • у♥к♥р♥а♥ш♥а♥т♥е♥л♥ь♥с♥т♥в♥а♥м♥и♥;
  • ̶п̶е̶р̶е̶ч̶е̶р̶к̶н̶у̶в̶ ̶т̶е̶к̶с̶т̶.

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

Узнайте, как грамотно привлечь подписчиков и поддержать интерес целевой аудитории, на бесплатном курсе SMM с нуля за 6 уроков от SMM. school.

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

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

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

Spectrox.ru

Страница сайта для перечеркивания текста. Ничего лишнего

4txt.ru

Сайт для создания текста с 4 различными эффектами

Stylishtextgenerator

Сайт с красивыми шрифтами и украшательствами. Шрифты предсказуемо только для латиницы

@text4instabot

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

@stthbot

Еще один Телеграм бот для зачеркивания, подчеркивания и переворачивания текста

Space

Программа для App Store и Google Play, говорящая сама за себя – умеет делать абзацы и простые списки

Ссылки

Не работают в Инстаграме ссылки. Вообще. Никак. Вероятность того, что кто-то зайдёт в веб-версию Инстаграма, чтобы перейти по вашей ссылки, стремится к нулю.

Если нужно направить читателя по ссылке на аккаунт, нужно отправить его в описание профиля.

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

Перед тем как отправить человека в описание профиля, объясните куда ведёт ссылка. Где, что, понимает ли читатель зачем кликать?

Указывайте упоминание на свой аккаунт в конце абзаца.

НетДа
@moi_akkaunt →
здесь есть ссылка на книгу		Скачайте книгу, кликнув
по ссылке в моём профиле @moi_akkaunt

Все это мы можем применить при планировании публикаций в Инстаграм с помощью SMMplanner.

Подытожим

Интересный, важный ваш текст, или так себе, читатели решат после прочтения. Чтобы текст был прочитан, а не пролистнут, соблюдайте следующие нехитрые правила:

  1. Отбивайте текст в Инстаграме на абзацы.
  2. Начинайте пост/абзац с заголовка или интриги.
  3. Разбивайте текст в Инстаграме на разделы.
  4. Используйте эмодзи или спецсимволы, чтобы показать перечень.
  5. Выделяйте важное.
  6. Публикуя ссылку, упоминайте свой аккаунт в конце абзаца.
Скорее регистрируйтесь в SMMplanner и планируй посты в Instagram с учетом новых знаний!

Раскрывая тайны Microsoft Office: красивые линии Word

…А вы знаете, что Microsoft Office Word может быстро и эффективно украшать текст красивыми линиями?..

 

• Чтобы получить двойную линию по всей ширине текста, трижды нажмите клавишу с символом «=» (равно), после этого нажмите клавишу Enter.

 

 

 

• Чтобы получить одинарную тонкую линию по всей ширине текста, трижды нажмите клавишу с символом «—» (дефис), после этого нажмите клавишу Enter.

 

 

 

• Чтобы получить одинарную жирную линию по всей ширине текста, трижды нажмите клавишу с символом «_» (нижнее подчёркивание), после этого нажмите клавишу Enter.

 

 

 

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

 

 

 

• Чтобы получить красивую тройную линию по всей ширине текста, переключитесь на английскую раскладку клавиатуры, трижды нажмите клавишу с символом «#» («решётка»), после этого нажмите клавишу Enter.

 

 

 

• Чтобы получить красивую волнистую линию по всей ширине текста, переключитесь на английскую раскладку клавиатуры, трижды нажмите клавишу с символом «~» (тильда), после этого нажмите клавишу Enter.

 

 

 

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

 

Курс CSS. Урок 10. Декорирование текста.

Курс CSS. Урок 10. Декорирование текста.

Курс CSS. Урок 10. Декорирование текста. Под декорацией (декорированием) текста понимается его подчеркивание, надчеркивание и перечеркивание. Часто декорация используется для оформления ссылок с обратной целью: не добавить декорацию, а убрать подчеркивание, которое добавляется в каждую ссылку браузерами по умолчанию. Возможности использования: text-decoration:none; — декорирование отсутствует, text-decoration:underline; — подчеркивание внизу, text-decoration:overline; — надчеркивание сверху, text-decoration:line-through; — перечеркивание. © Перепечатка разрешается с установкой ссылки на ресурс http://kocby.ru

10. Декорирование текста.

Под декорацией (декорированием) текста понимается его подчеркивание, надчеркивание и перечеркивание.

Часто декорация используется для оформления ссылок с обратной целью: не добавить декорацию, а убрать подчеркивание, которое добавляется в каждую ссылку браузерами по умолчанию. Но бывает так нужно, с точки зрения дизайна или, точнее, дизайнера, что как раз подчеркивание в ссылках не нужно. Свойства и значения для декорации текста (в том числе и ссылок):

Декорирование текста:
text-decoration:none; — декорирование отсутствует
text-decoration:underline; — подчеркивание внизу
…
Просто текст без декорирования…
Еще просто текст без декорирования…
…
text-decoration:overline; — надчеркивание сверху
text-decoration:line-through; — перечеркивание


На базе данного теоретического материала попробуем создать соответствующие классы:
.decor_none {
	text-decoration:none;
}
.decor_under {
	text-decoration:underline;
}
.decor_over {
	text-decoration:overline;
}
.decor_through {
	text-decoration:line-through;
}

Теперь созданные классы в файле стилей CSS мы можем использовать в нашем учебном тестовом примере.
css_010_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте…
css_010_001.zip ← скачайте пример, чтобы установить на свой сайт…

***** Машина-Функционал для передвижения по страничкам курса CSS *****

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

Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.

Если вы планируете вернуться сюда позднее…
Пожалуйста, запомните эту страничку —
URL: http://kocby.ru/css/p010.html

Спасибо за посещение этой странички и внимательное отношение к ее контенту и дизайну. Удачи и успеха!

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

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

  • αBс
  • свα
  • [̲̅α̲̅][̲̅в̲̅]
  • ͠α͠в͠c
  • ͕͗a͕͕͗в͕͗с͕͗
  • α̅в̅с
  • α̲в̲с
  • ̶α̶в̶с̶
  • more

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

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

Сначала немного истории за именем 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´¯)♥
.......•.¸.•´
....¸.•´
... (
☻/
/▌♥♥
/ \ ♥♥
  • 🏿🏿🏿🏿🏿🏿🏿🏿
🏿🏿🏿🏿🏿🏿🏿🏿
🏿🏿🏽🏽🏽🏽🏿🏿
🏽🏽🏽🏽🏽🏽🏽🏽
🏽⬜⬛🏽🏽⬛⬜🏽
🏽🏽🏽🏿🏿🏽🏽🏽
🏽🏽🏿🏽🏽🏿🏽🏽
🏽🏽🏿🏿🏿🏿🏽🏽

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

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

  • (╥﹏╥)
  • (っ◔◡◔)っ ♥
  • ¯¯̿̿¯̿̿'̿̿̿̿̿̿̿'̿̿'̿̿̿̿̿'̿̿̿)͇̿̿)̿̿̿̿ '̿̿̿̿̿̿\̵͇̿̿\=(•̪̀●́)=o/̵͇̿̿/'̿̿ ̿ ̿̿
  • ಠﭛಠ
  • (◍•ᴗ•◍)♡ ✧*。
  • (◣_◢)ノ-=≡≡卍
  • ( `^´ )
  • ╭∩╮（︶︿︶）╭∩╮
  • (っ◔◡◔)っ 🍔
  • (._.)
  • ¯\_(ツ)_/¯
  • (　-_･) ︻デ═一 ▸
  • (∩｀-´)⊃━━☆ﾟ.*･｡ﾟ
  • (っ◕‿◕)っ
  • (ღ˘⌣˘)♥ ℒ♡ⓥℯ ㄚ♡ⓤ
  • {ᶫᵒᵛᵉᵧₒᵤ}•..(❤️O❤️)
  • (づ￣ ³￣)づ
  • (ɔˆ ³(ˆ⌣ˆc)
  • ಠ_ಠ
  • (∩｀-´)⊃━━☆ﾟ.*･｡ﾟ
  • ಥ_ಥ
  • ┏(‘▀_▀’)ノ♬♪
  • (╯︵╰,)
  • (｡•́︿•̀｡)
  • (๑•̑з•̑๑)੭ु⁾⁾ ༘
  • （＾ω＾）
  • (⇀‸↼‶)
  • (๑´• .̫ •ू`๑)💓
  • ( ˘ ³˘)❤
  • (>'o')> ♥

Больше смайликов ▸▸

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

У нас есть еще что предложить, потому что мы просто любим все, что связано с текстом!
Как насчет фигур? Или персонажи? Возможно, вы хотите, чтобы ваш текст отражался или, может быть, перевернулся! Или сделайте приятные волны, которые вы можете использовать в качестве разделительных линий в тексте.
Вы можете сделать все это на 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 убрать подчеркивание ссылки


Как на сайте убрать подчеркивание ссылок на CSS?

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

Зачем подчеркивают ссылки?

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

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

Вот так выглядели первые интернет-сайты:

Гиперссылки сразу выделяются на фоне окружающего текста.

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

Выделение ссылок

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

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

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

Изменение стиля гиперссылки

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

Список значений, которые может принимать это свойство:

  • underline – нижнее подчеркивание;
  • overline – верхнее подчеркивание, линия проходит над текстом;
  • line-through – зачеркивание, линия проходит посередине строки;
  • none – отсутствие оформления.

По умолчанию браузеры применяют к гиперссылкам инструкцию text-decoration: underline. Очевидно, что нас интересует значение none. Оно позволяет обнулить ранее примененные стили, а также сбросить оформление по умолчанию.

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

a { text-decoration: none;

}

Как с помощью css убрать подчеркивание ссылки по умолчанию

Приветствую вас на страницах этого сайта. Ссылки в html имеют определенные стили по умолчанию – обычно они синего цвета и с подчеркиванием. Так будет, если не настроить для них свои стили. Поэтому я предлагаю рассмотреть вопрос, как в css убрать подчеркивание ссылки по умолчанию, потому что это не всегда нужно.

Убираем подчеркивание

Итак, для этого нам нужно ссылкам прописать такое правило:

A{ Text-decoration: none; }

Свойство text-decoration отвечает за то, будет ли к тексту применено подчеркивание. Чтобы подчеркнуть информацию снизу нужно написать значение underline, подчеркнуть сверху – overline и даже зачеркнуть – line-through.

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

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

A{ Text-decoration: none; } A:hover{ Text-decoration: underline; }

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

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

Как убрать подчеркивание ссылок? CSS свойство text-decoration

Ссылки – неотъемлемая часть любой веб-страницы. Они могут быть как текстовыми, так и в виде кнопок. В этой статье будут рассмотрены только текстовые ссылки.

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

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

Создание ссылки

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

Чтобы создать ссылку, нужно использовать парный тег «a», который не является блочным. Поэтому, чтобы размещать ссылки на отдельных строчках, необходимо заключать их в теги параграфа (p). Можно воспользоваться и альтернативным способом – задать свойство display: block для каждой ссылки.

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

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

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

Ссылка создана, теперь ее нужно стилизовать. Существует несколько способов убрать подчеркивание ссылки в CSS:

  1. Атрибут style (располагается внутри тега).
  2. Тег style (располагается в блоке head).
  3. Внешнее подключение стилей с помощью тега link.

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

Совет: при стилизации веб-страницы отдавайте предпочтение внешним ссылкам.

Стилизация ссылки в CSS

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

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

Записываем селектор «a», в котором будет прописано свойство text-decoration: none;

Одно простое свойство text-decoration используется для того, чтобы с помощью CSS убрать подчеркивание ссылки.

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

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

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

Главное — не расписывать такими способами всю HTML страницу. В таком коде можно очень легко запутаться.

Изменение наведенной ссылки в CSS

Допустим, вы захотели сделать так, чтобы в обычном состоянии ссылки подчеркивание осталось, а при наведении исчезло. Чтобы убрать или задать подчеркивание для ссылки при наведении, в CSS используется псевдокласс «:hover». Вот пример:

Стили можно применять не только к наведенной ссылке, но и к активированной или посещенной. Для этого нужно использовать псевдоклассы «:active» и «:visited».

Как убрать подчеркивание ссылок? CSS свойство text-decoration на 1DriveNews.ru.

Поделитесь ссылкой и ваши друзья узнают, что вы знаете ответы на все вопросы. Спасибо ツ

Убрать подчеркивание ссылки в HTML

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

Это убрать подчеркивание в css, или же, если вы пишите стили в прямо код html или php, то вам надо следующее (это убирает подчеркивание полностью):

подчеркивания стиля в Интернете

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

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

Тонкая черная линия подчеркивания с пространством вокруг нижних элементов — через Marcin Wichary, ссылка Crafting подчеркивается на Medium

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

Голы

Что плохого в использовании text-decoration: underline ? Если мы говорим об идеальном сценарии, подчеркивание должно уметь делать следующее:

  • Позиция ниже базовой линии
  • Пропускные устройства
  • Изменить цвет, толщину и стиль
  • Повторить обернутый текст
  • Работа на любом фоне

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

Подходит к

Итак, какими разными способами мы можем подчеркнуть текст в Интернете?

Вот те, о которых я могу думать:

  • текст-оформление
  • край нижний
  • тень коробки
  • фоновое изображение
  • SVG фильтры
  • Underline.js (холст)
  • текст-украшение- *

Давайте пройдемся по списку один за другим и поговорим о хороших и плохих сторонах каждого подхода.

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

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

См. Демонстрацию.

Самая большая проблема с text-decoration — это отсутствие возможности настройки. Он использует цвет и размер шрифта любого текста, к которому он применен, и нет кросс-браузерного способа изменить стиль.Подробнее об этом позже.

Хорошо
  • Простота использования
  • Расположен ниже базовой линии
  • Пропускает дескрипторы по умолчанию в Safari и iOS
  • Обтекание строк
  • Работает на любом фоне
Плохо
  • Не удается пропустить нисходящие элементы в других браузерах
  • Невозможно изменить цвет, толщину или стиль
край нижний

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

Так выглядит border-bottom на inline элементах:

См. Демонстрацию.

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

См. Демонстрацию.

На данный момент имеется четырех свойств, стилизованных под одно подчеркивание. Это намного больше, чем text-decoration .

Хорошо
  • Можно пропустить нижние элементы с использованием text-shadow
  • Может изменять цвет, толщину и стиль
  • Может переходить и анимировать цвет и толщину
  • Обертывает по умолчанию, если это не встроенный блок
  • Работает на любом фоне, если не используется text-shadow
Плохо
  • Расположен далеко и трудно переставить
  • Множество не связанных свойств в самый раз
  • Неровное выделение текста при использовании text-shadow
тень коробки

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

См. Подчеркивание пера 5: тень блока от Джона Д. Джеймсона (@johndjameson) на CodePen.

Вы можете использовать тот же трюк text-shadow для имитации промежутков между подчеркиванием и нижними элементами текста. Но если линия отличается по цвету от текста — или даже достаточно тонкая — она ​​на самом деле не конфликтует, как text-decoration .

Хорошо
  • Может располагаться ниже базовой линии
  • Может пропускать нижние элементы с использованием text-shadow
  • Может менять цвет и толщину
  • Обтекание строк
Плохо
  • Невозможно изменить стиль
  • Не работает ни на одном фоне
фоновое изображение

background-image ближе всего ко всему, что мы хотим, и с наименьшим количеством подводных камней.Идея состоит в том, что вы используете linear-gradient и background-position для создания изображения, которое повторяется горизонтально по строкам текста.

Вам потребуется display: inline; тоже такой подход.

См. Демонстрацию.

В этом подходе не обязательно использовать linear-gradient . Вы можете принести свое собственное фоновое изображение для некоторых интересных эффектов.

См. Демонстрацию.

Хорошо
  • Может располагаться ниже базовой линии
  • Может пропускать нижние элементы с использованием text-shadow
  • Может изменять цвет, толщину (позволяет половину пикселей) и стиль
  • Работает с пользовательскими изображениями
  • Обертывание по строкам
  • Работает на любом фоне, если не используется text-shadow
Плохо
  • Размер изображения может изменяться по-разному в зависимости от разрешения, браузера и уровня масштабирования
SVG фильтры

Вот подход, который я использовал: фильтры SVG.Вы можете создать встроенный элемент SVG filter , который рисует линию, а затем расширяет текст, чтобы замаскировать части строки, которые мы хотим сделать прозрачными. Затем вы можете присвоить фильтру идентификатор и ссылаться на него в CSS с помощью чего-то вроде filter: url (‘# svg-underline’) .

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

См. Демонстрацию.

Вот как это выглядит в Chrome и Firefox:

Поддержка браузера в IE, Edge и Safari проблематична. Трудно проверить поддержку фильтра SVG в CSS. Вы можете использовать @supports с фильтром , но это проверяет только, работает ли ссылка , а не сам примененный фильтр. Мой подход заканчивается довольно грубым обнюхиванием браузера, так что удвойте и это.

Плюсы
  • Расположен ниже базового уровня
  • Пропускные устройства
  • Возможность изменения цвета, толщины и стиля
  • Работает на любом фоне
Минусы
  • Не переносит строки
  • Не работает в IE, Edge или Safari, но вы можете вернуться к text-decoration .Подчеркивания в Safari в любом случае выглядят хорошо.
Underline.js (холст)

Underline.js завораживает. Я думаю, это очень впечатляет, что Вэньдин Чжан смог сделать с JavaScript и с некоторым вниманием к деталям. Если вы раньше не видели техническую демонстрацию Underline.js, определенно перестаньте читать на минуту и ​​посмотрите ее. Есть захватывающий девятиминутный доклад о том, как это работает, но я дам вам короткую версию: он подчеркивает элементов .Это новый подход, который на удивление хорошо работает.

Несмотря на броское название, Underline.js — это техническая демонстрация только . Это означает, что вы не сможете вставить его в какие-либо проекты, не изменив сначала целую кучу.

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

text-decoration- * свойства

Помните фразу «об этом позже»? Ну вот и мы.

text-decoration отлично работает сам по себе, но вы можете добавить несколько экспериментальных свойств, чтобы настроить его внешний вид:

  • цвет текстового оформления
  • текст-украшение-пропустить
  • стиль оформления текста

Только не волнуйтесь. Вы знаете, браузер поддерживает .

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

text-decoration-color позволяет изменять цвет подчеркивания отдельно от цвета текста.Это свойство даже имеет лучшую, чем ожидалось, поддержку браузера — оно работает в Firefox и имеет префикс в Safari. Вот в чем загвоздка: если вы не очищаете нижние элементы, Safari помещает строку поверх текста . 🙃

Firefox:

Safari:

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

text-decoration-skip включает пропуск нижних элементов в подчеркнутом тексте.

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

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

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

text-decoration-style предлагает те же типы линий, которые вы ожидаете от border-style , но также добавляет в волнистые линии .

Вот различные значения, которые вы можете использовать:

  • штриховая
  • с точками
  • двойной
  • цельный
  • волнистый

Сейчас text-decoration-style работает только в Firefox, поэтому вот скриншот:

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

Знакомо?

Что не хватает?

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

Проведя небольшое исследование, я обнаружил эти два свойства:

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

Похоже, они были включены в более ранние черновые версии CSS, но так и не были реализованы из-за отсутствия интереса. Эй, не вини меня.

Еда на вынос

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

Это зависит.

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

Для основного текста, вероятно, используйте подход background-image .Он работает, выглядит отлично, и для этого есть примеси Sass. Вы, вероятно, можете опустить text-shadow it, если подчеркивание тонкое или отличается от цвета текста.

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

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

В будущем, когда поддержка браузеров улучшится, ответ будет text-decoration- * полностью.

См. Также сообщение Бенджамина Вудраффа «CSS Underlines Suck», в котором по совпадению поступают аналогичным образом.

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 — они сохраняют свой стиль, где бы вы их ни использовали.

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

Если вы воспользуетесь этим трюком без этих символов (вы можете сделать это, щелкнув вкладку «Показать больше»), вы можете обнаружить, что он выглядит s̲o̲m̲e̲t̲h̲i̲n̲g̲ ̲l̲i̲k̲e̲ ̲t̲h̲i̲s̲ — не очень хорошо.

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

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

Никогда.

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

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

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

Подчеркивания красивы | Адриан Роселли

; 0 комментариев

Подчеркивание, стандартный встроенный индикатор гиперссылок, основная функция Интернета, красивы.

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

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

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

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

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

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

Изображение Mikey Stilts, использовано с разрешения. Загрузите гораздо большую версию.

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

Они так же близки к совершенству, как лицо обладателя His Noodly Appendage.

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

Тим Бернерс-Ли

Подчеркивания являются проявлением этого видения.

Теги

доступность, дизайн, удобство использования, UX

Другие сообщения

Предыдущий пост: Анонсируем a11y.reviews

Более свежий пост: Письмо с сильными формулировками

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

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

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

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

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

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

 .изысканный {
  -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: под;
  текст-подчеркивание-позиция: под;
}

Бегемот

Значения left и right для text-underline-position используются для управления оформлением текста в режимах вертикального письма.

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

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

Создание настраиваемого подчеркивания (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 предоставляет сочетания клавиш для множества вещей, но не позволяет переключиться на рабочий стол и вернуться к …

Открой для себя больше

Создание настраиваемого подчеркивания (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 и получаете пустые этикетки на распечатке в Word, велика вероятность, что …

Открой для себя больше .

No related posts.