Свойства текста css: 5 интересных свойств, которые могут пригодиться
Поиск

Свойства текста css: 5 интересных свойств, которые могут пригодиться

Nikel, 27.03.2019

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

1. CSS градиент текста

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

Добиться градиента текста на чистом CSS можно с помощью двух свойств:  -webkit-text-fill-color  и -webkit-background-clip. 

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

Transparent делает прозрачными буквы текста, так что через них виден фон. Это все что нам нужно от свойства webkit-text-fill-color.

Более важным для нас является -webkit-background-clip, который, собственно и обрезает фон по границе текста. Теперь достаточно задать градиент фона или картинку, чтобы получить нужные нам эффекты.

Предположим, мы задаем стили для заголовков h1 и h2, первый из них сделаем с градиентом, а второй — с фоновым рисунком. Рассмотрим, как будет выглядеть весь код:

Поясним некоторые моменты.

В стилях для h1, h2 мы указали свойства для текста: размер, жирность и большие буквы, чтобы улучшить его внешний вид. Для h1 мы задали линейный градиент, а для h2 — путь к картинке в background и добавили обводку букв, с помощью text-stroke (в этом свойстве требуется указать толщину линии в пикселах и ее цвет).

Обратите внимание, что background-clip обязательно стоит после background, иначе обрезки не будет, и вы увидите просто фон.

Посмотрим на результат, в Firefox и Chrome результат просто отличный.

Но, к сожалению, в IE ничего не работает, и вы увидите картину наподобие этой. Да и сами свойства -webkit-text-fill-color  и -webkit-background-clip не являются стандартными и относятся к браузерам wekit (Chrome и т.д.), хоть и понимаются браузером Firefox.

Единственный возможный вариант, это задать для IE просто цвет текста. Поскольку Explorer не поддерживает свойство background-clip:text этим можно воспользоваться и применить Modernizr. На официальном сайте Модернизра находим background-clip:text в поиске и скачиваем сборку с проверкой этого свойства.

Подключаем скрипт к html-странице

Он будет добавлять к тегу html страницы класс .no-backgroundcliptext, если это свойство не поддерживается. Теперь достаточно добавить для IE такие стили

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

2. Тext-overflow для создания на css троеточия в конце текста

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

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

Overflow:hidden тесно связано с малоизвестным свойством text-overflow, задающим поведение текста при обрезке.

Это свойство может принимать всего два значения — elipsis или clip. Последнее значение, clip, принято по умолчанию — обычно при обрезке с помощью overflow с текстом ничего не происходит. Но также у text-overflow может быть значение elipsis, добавляющее троеточие в конце обрезанного текста. Очевидные преимущества:  так гораздо красивее, поскольку текст не будет резко обрываться и не нужно использовать какие-то дополнительные скрипты.

Текст с применением text-overflow

Какова же сфера применения text-overflow?

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

Для запрета переноса текста используют  свойство white-space:nowrap, так как если его не использовать, текст обрезаться не будет (он должен именно выходить за рамки).

В итоге получаем такой код:

 

3. First-letter — css псевдоэлемент, добавляющий стили к первой букве строки

Благодаря ::first-letter можно задавать форматирование первой буквы в тексте, подобно тому как это было раньше в старинных книгах. Используя его, мы можем создавать буквицу, подобную этой.

Синтаксис ::first-letter сходен с синтаксисом других псевдоэлементов — он применяется к нужному html-элементу с помощью двойного двоеточия, также допускается одинарное двоеточие по стандартам CSS2.

Попробуем оформить первую букву в тексте с помощью ::first-letter — сделаем ее большую и ярко-синего цвета.

Как мы можем видеть на первой картинке ниже, наша первая буква занимает только одну строчку. Это не очень красиво и не похоже на буквицу, но исправить это очень легко, достаточно добавить в стили float:left. Тогда текст справа будет обтекать букву L, как показано на второй картинке внизу.

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

4. First-line — css псевдоэлемент, стилизующий целую строку текста

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

Допустим у нас есть абзацы (p) и мы хотим каждую первую строчку этих абзацев выделить жирным текстом, тогда код будет таким:

Абзацы с применением ::first-line

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

Если применить этот псевдоэлемент блоку содержащему дочерние элементы, он также будет работать. Допустим если у нас есть родительский div содержащий список ul, стили будут применены к первому элементу li списка.

Однако, если присутствует перевод строки (например
) и в верхней строчке ничего не содержится, ::first-line не сработает.

Существует ограниченный список стилей, которые можно использовать с псевдоэлементом ::first-line:

  • Свойства, связанные с текстом (сюда входят свойства font, высота строки line-height, расстояния между буквами и словами word-spacing и letter-spacing, text-transform и text-decoration);
  • Цвет текста color;
  • Цвет фона и фоновые изображения background.

5. Стилизация подчеркиваний текста с использованием css: text-decoration

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

Оказывается text-decoration не простое, а составное и включает в себя целый набор свойств

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

  • text-decoration-line — задает положение этой линии. Тут и объяснять нечего, так как фактически это text-decoration, которым мы привыкли пользоваться каждый день. Помимо text-decoration-line:underline, text-decoration-line:none, соответственно задающих нижнее подчеркивание и отсутствие его, существуют  положения line-through(перечеркнутый текст), overline(линия над текстом). Вместо text-decoration-line лучше использовать именно text-decoration, так как оно на 100% поддерживается браузерами

  • text-decoration-style — указывает на то, какой должен быть стиль заданной линии. Это очень напоминает стили, применяемые к  border, рамке элемента:  solid (непрерывная), dotted(точечная), dashed(в виде пунктира), double (двойная). Из интересного есть также значение wavy, создающее волнистую линию.

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

Положение линии

 

 

 

 

 

 

 

 

 

 

 

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

Не смотря на то, что  text-decoration очень старое свойство, его вышеупомянутые дочерние свойства появились не так давно, с CSS3, и до сих пор неидеально поддерживаются браузерами. Как всегда ситуацию испорил  Internet Explorer, который не поддерживает его совсем. В остальных браузерах(если не считать Сафари) ситуация более-менее нормальная, хотя есть небольшие отличия в отображении.