9 причудливых дизайнов заголовков в CSS, которые нужно изучить прямо сейчас | автор JW | Frontend Weekly
Опубликовано в·
Чтение: 9 мин.·
22 июня 2020 г.Узнайте, как ЛЕГКО создать красивый заголовок, используя только CSS
9001 4Типографика — важная часть веб-дизайна. Использование подходящего стиля текста может очень помочь передать сообщение вашему зрителю. Эта статья научит вас, как легко создавать различные стили текста на вашем веб-сайте, используя только CSS и ровно ОДИН html-элемент div!
Весь дизайн взят из изображения Google, я реализовал его в коде с помощью CSSЦитата, подобная этой, является чем-то дополнительным, например объяснением кода и предложением по улучшению
Всего я создал 9 различных стилей текста (идея дизайна из Google), окончательный результат:
Для поиска статьи: 1.
Строковый текст 2. Неоновый текст 3. S рубец текстДля поиска статьи: 4. Вырезанный текст 5. Кибертекст 6. Древесный текстДля поиска статьи: 7. C omic текст 8. H горизонтальный разрез- text 9. D ouble-border- textCodepen demo:
HTML, CSS и SCSS/SASS (любой препроцессор CSS)
JS не требуется , поэтому выберите любой фреймворк, который вам нравится
Стиль 1: Линейный текст
Первый стиль, который мы создадим, — это контурный текст с трехмерной текстовой формой позади него. Чтобы создать «контур» для текста, нам нужно использовать свойство CSS: -webkit-text-stroke-width и -webkit-text-stroke-color . Эти два свойства позволяют нам создать контур и придать ему нужный цвет.
Для трехмерной формы текста мы могли бы использовать несколько слоев свойства text-shadow . Поскольку text-shadow можно накладывать друг на друга, в этом примере мы могли бы добавить много слоев розовой тени, где каждый слой смещает предыдущий на 1 пиксель в направлении x и y.
Придание всей текстовой тени «3D» формы.
Давайте перейдем к коду.
HTML (как обещано, один div):
чужая терраса
SCSS:
Я создаю глобальную переменную для хранения цвета и размера, $extra-large — 110px. Чтобы узнать о цвете, проверьте мой codepen
Это довольно простой стиль, нам даже не нужно использовать псевдоэлементы «до» или «после». Это хорошее место для начала, поскольку оно учит нас двум очень важным свойствам в стилизации текста: text-stroke-width и text-shadow . Допустим, вы хотите, чтобы текст выглядел более «трехмерным», вы можете легко добавить к нему больше слоя тени, например:
Стиль 2: Неоновый текст
Следующий стиль, который мы создадим, — неоновый. Текст имитирует неоновую вывеску, создавая световой эффект, а также используя более «письменный» стиль шрифта.
Первое, что нужно сделать, это выбрать подходящий шрифт для неонового текста.
Я выбрал «Pacifico» (бесплатный шрифт в Google Font), так как он имеет красивую закругленную рамку и непрерывный стиль штриха. Очень похоже на вывеску из неоновой трубки.
Я думаю, вы уже догадались, мы будем применять -webkit-text-stroke-width и -webkit-text-stroke-color снова в качестве нашей основы для «неона», text-shadow снова будет использоваться для «светящегося» света вокруг неона. Если присмотреться, за неоном есть еще один набор «контурного текста» черного цвета. Это тень от неоновой лампы. И мы использовали бы псевдоэлемент :after для его создания.
HTML:
основной провод
SCSS:
раздражает одна вещь: нам нужно вручную установить содержимое псевдоэлемента. Я пытался использовать содержимое
: наследовать, но это кажется возможным только тогда, когда вы устанавливаете содержимое в своем родителе. Поскольку я хочу, чтобы в HTML был текст (для демонстрационных целей), это не очень полезно для меня.
В этот раз я не занимаюсь анимацией, но если вы хотите, вы могли бы сделать какой-нибудь классный трюк, например включить и выключить свет, градиентно изменить его цвет и так далее.
Стиль 3: полосатый текст
Этот стиль имеет много общего с первым стилем. Во-первых, он также имеет белую окантовку. А во-вторых, у него есть трехмерная текстовая тень. Мы уже знаем, как использовать -webkit-text-stroke-width , -webkit-text-stroke-color и text-shadow для создания такого шаблона. Одно отличие — это красочный полосатый рисунок текста.
Для текста нет «линейного градиента» (по состоянию на июнь 2020 года, дайте мне знать, если это актуально сейчас!), поэтому нам нужен обходной путь. Вместо того, чтобы сделать сам текст цветным, мы сначала создадим фон, а затем воспользуемся background-clip: text свойство. Это свойство «обрезает» div по форме вашего текста, в сочетании с прозрачным цветом текста вы получите текст, окрашенный любым фоном, который вы используете.
Мы также использовали бы другое семейство шрифтов, чтобы дополнить общий стиль. Я выбрал «Катамаран» (также бесплатный для шрифта Google).
HTML:
быстрый оборот
SCSS:
Вы могли заметить, что я поместил background и
background-clip: textв элемент :after вместо родителя. Причиной этого является клип «background-clip» ВСЕ внутри элемента , включая элементы :before и :after . Таким образом, применение его там приведет к обрезанию 3D-тени . На самом деле в HTML вообще не обязательно должен быть текст. Я просто добавляю его туда для лучшего размера (поскольку и после, и до элемента абсолютно позиционированы относительно родителя) и для демонстрационных целей.
Стиль 4: Вырезать текст
Из всех стилей этот мой любимый. Он сильно отличается от других стилей, и наш старый друг -webkit-text-stroke-width , -webkit-text-stroke-color и text-shadow на этот раз нам не поможет (извините за что).
В этом стиле у нас есть «разрез» в тексте, в результате чего верхняя часть текста скользит вниз под углом среза. Весь дизайн также очень чистый и резкий.
Концепция создания этого стиля очень проста: мы делаем два псевдоэлемента (до и после) и даем им два пути клипа , где два пути клипа вместе образуют полный прямоугольник:
И затем мы просто добавьте немного смещения для элемента верхней части вправо и вниз, чтобы текст скользил вниз в направлении «вырезания».
HTML:
Украденный час
SCSS:
По той же причине, упомянутой в последнем стиле, мы не можем напрямую обрезать путь к родителю. и вы также можете заметить, что в clip-path я использовал 110% вместо 100%. Причина в том, что текст обрезается в самом конце из-за использования «курсивного» стиля. это решается изменением границы клипа со 100% на большее число.
Стиль 5: Кибертекст
Несмотря на причудливое название, этот стиль самый простой.
Мы будем использовать псевдоэлементы :before и :after, а также наложение прозрачного цвета текста друг на друга, чтобы создать этот «причудливый» эффект. Текст выглядит немного размытым, но на самом деле он совершенно прямой, если присмотреться, это смесь цвета и небольшого смещения, придающая ему такое поведение.
HTML:
цифровое шоссе
SCSS:
Функция SCSS rgba() позволяет нам быстро получить менее непрозрачную версию вашего основного цвета и упрощает эксперименты с различными сочетаниями цветов. (Есть также darken()/lighten()/adjust-hue() и многое другое)
Стиль 6: Wood-text
Этот стиль в основном такой же, как стиль «полосатый текст», поскольку мы снова используем свойство background-clip: text . Как уже упоминалось, с помощью свойства background-clip вы можете легко создать любой шаблон и текстуру текста, если у вас есть фоновое изображение.
Маленькая особенность этого стиля — внутренняя «тень» текста.
На самом деле он создается с помощью элемента after со свойством (снова) -webkit-text-stroke-width , -webkit-text-stroke-color .
HTML:
подходящая вилла
SCSS:
Оглядываясь назад, я понимаю, что это мой наименее любимый вариант. В основном из-за того, что фоновое изображение, которое я выбрал, не очень похоже на дерево. (на самом деле подсветка и затенение делают его более похожим на металлический). Для этого типа стиля текста фоновое изображение является его душой и может довольно легко испортить его. Не совершайте ту же ошибку, что и я, и не торопитесь, чтобы выбрать идеальную картинку.
Стиль 7: Комический текст
Этот комический текст напоминает старомодный комический текст. Все сильно обведено, а штрихи чрезмерно украшены. Для начала нам понадобится шрифт для этого стиля. Я выбрал «Molle», снова (думаю, вы уже поняли шаблон) бесплатный шрифт Google.
Для самого стиля мы будем использовать наше старое знакомое свойство -webkit-text-stroke-width , -webkit-text-stroke-color (с возвращением!). Мы будем использовать все наши доступные элементы HTML для стиля родительский элемент div, до и после псевдоэлемента.
HTML:
квадратная трубка!
SCSS:
Я ограничиваю себя тем, что делаю это только в одном div, но вы определенно можете добавить больше слоев, если хотите, просто сложите элементы друг над другом
Стиль 8: horizontal-cut-text
В этом стиле также есть слово cut, но мы не будем его вырезать. Вместо этого мы снова будем использовать фоновый градиент и свойство background-clip: text . Мы сложим два фона, один с цветом вверху 50%, прозрачный внизу 50%, а другой фон с белой и прозрачной полосой.
Поверх текста мы также добавили бы текстовую тень, чтобы придать ему больше формы.
Использование тени поверх текста с темным фоном, в результате чего получается фальшивая «изюминка», которая является исходным цветом текста.
HTML:
неопределенное меньшинство
SCSS:
Опять же, еще один без каких-либо элементов после и до. Если вы еще не знаете, вы можете складывать цвет фона столько, сколько хотите. Использование одного только свойства background уже может дать нам много потрясающих узоров. Если вам интересно и вы хотите узнать больше, вы можете просмотреть эту галерею шаблонов CSS3: https://leaverou.github.io/css3patterns/
Стиль 9: Double-border-text
Последний стиль, как вы уже догадались, представляет собой комбинацию -webkit-text-stroke-width и псевдоэлемента. Это в основном то же самое, что и стиль комиксов, только с другим шрифтом, более последовательным и выровненным текстом и цветовой темой.
Так как это очень похоже, я перейду к коду прямо сейчас.
HTML:
весь объем
SCSS:
край идет от средней черты буквы «Е»Одно примечание относительно
text-stroke-width, кажется всесильным, но имеет свои ограничения. Если шрифт, который вы используете, не имеет красивого и непрерывного штриха, вы получите «сломанный» штрих от свойства. Кроме того, имейте в виду, что если вы установите слишком большую ширину обводки, может появиться неожиданный «край» от обводки текста, как показано ниже:
У меня есть очень весело создавать этот стиль текста. Вы можете видеть, сколько стилей мы могли бы создать, просто используя какое-то базовое свойство CSS и только с одним div. Лучше всего использовать HTML и CSS для стилизации текста, а не просто создавать изображение, — это то, что вы можете легко изменить текстовое содержимое позже или сделать его интерактивным для пользователя, придав ему анимацию или эффект наведения.
Если вам понравилась эта статья, не стесняйтесь хлопнуть меня и оставить комментарий!
Элементы заголовка HTML
❮ Назад Далее ❯
Элемент HTML является контейнером для следующих элементов: <название> , <стиль> , <мета> , <ссылка> , <скрипт> и <база> .
Элемент HTML
Элемент является контейнером для метаданных (данные
о данных) и помещается между тегом и тегом .
Метаданные HTML — это данные о документе HTML. Метаданные не отображаются.
Метаданные обычно определяют заголовок документа, набор символов, стили, скрипты и другую метаинформацию.
HTML-элемент
Содержание документа.
…..
HTML-элемент
Попробуйте сами »HTML-элемент
Элемент определяет
отношения между текущим документом и внешним ресурсом.
<ссылка> чаще всего используется для ссылки на внешние таблицы стилей:
Пример
Попробуйте сами »Совет: Чтобы узнать все о CSS, посетите наш учебник по CSS.
HTML-элемент
Обычно используется элемент указать набор символов, описание страницы, ключевые слова, автора документа,
и настройки видового экрана.
Метаданные не будут отображаться на странице, но используются браузерами (как отображать содержимое или перезагрузить страницу) поисковыми системами (ключевыми словами) и другими веб-сервисами.
Примеры
Определение используемого набора символов:
Определение ключевых слов для поисковых систем:
Определите описание вашей веб-страницы:
Определить автора страницы:
Обновлять документ каждые 30 секунд:
Настройка области просмотра, чтобы ваш сайт хорошо отображался на всех устройствах:
Пример тегов:
Пример
Настройка области просмотра
Область просмотра — это видимая пользователем область веб-страницы.
Она зависит от устройства
- на мобильном телефоне он будет меньше, чем на экране компьютера.
Вы должны включать следующий элемент на все свои веб-страницы:
Это дает браузеру инструкции о том, как для управления размерами страницы и масштабированием.
Часть width=device-width устанавливает ширину страницы в соответствии с шириной экрана устройства (которая зависит от устройства).
Начальная шкала
Вот пример веб-страницы без метатега области просмотра и той же веб-страницы с метатегом области просмотра :
Совет: Если вы просматриваете эту страницу с помощью телефона или планшета, Вы можете нажать на две ссылки ниже, чтобы увидеть разницу.
Без метатег области просмотра
метатег окна просмотра
HTML-элемент
Попробуйте сами »Совет: Чтобы узнать все о JavaScript, посетите наш учебник по JavaScript.
HTML-элемент
Элемент
Тег
Может быть только один единственный
Пример
Укажите URL по умолчанию и цель по умолчанию для всех ссылок на странице:
<голова>
