CSS оформление текста text-decoration & text-emphasis

внешний интерфейс CSS
CSS оформление текста text-decoration & text-emphasis

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

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

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

text-decorationОзначает украшение текста в очень ранней спецификации.CSS Level 2 (Revision 1) -- text-decorationуже существует. Например, знакомое нам подчеркиваниеtext-decoration: underline.

p {
    text-decoration: underline;
}

image

И к более новомуCSS Text Decoration Module Level 3 - text-decoration,text-decorationОн получил относительно большое и богатое обновление и эволюционировалtext-decoration-line, text-decoration-color, text-decoration-style, и еще не стал стандартомtext-decoration-thicknessРавные свойства, являются их сокращениями.

в:

  • text-decoration-line: Управляет типом оформления, используемого для установки текста в элементе, будь то ниже, выше или через текст.
  • text-decoration-style: не просто сплошная линияsolid, похожий наborder-style, также поддерживает двойные сплошные линииdouble,Пунктирная линияdotted,пунктирная линияdashedи очень интересноwavyволнистая линия
  • text-decoration-color: Это легко понять, управлять цветом
  • text-decoration-thickness: Контролирует толщину линии ухода.

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

image

CodePen Demo -- Text-decoration Demo

text-decoration-line может быть установлен одновременно

Интересно,text-decoration-lineможно установить одновременно.

p {
    text-decoration-line: overline underline line-through;
}

image

Мы можем получить верхнюю, среднюю и нижнюю линии.

text-decoration может переходить и анимировать

Каждое значение text-decoration можно перемещать и анимировать. Разумное использование, в некоторых местах, где текст делает акцент, очень полезно.

<p class="transition">Lorem ipsum dolor</p>

.transition {
    text-decoration-line: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 0.1em;
    cursor: pointer;
    transition: .5s;

    &:hover {
        text-decoration-color: pink;
        text-decoration-thickness: 0.15em;
        color: pink;
    }
}

с другим имуществомtext-underline-offset, мы также можем добиться интересных эффектов, как показано ниже:

Конечно, в приведенном выше примере используетсяtext-underline-offsetтрансформировать, но сам CSS не поддерживаетсяtext-underline-offsetАнимация перехода, здесь с помощьюCSS @propertyДобиться умногоtext-underline-offsetАнимация перехода, если вам интересно, вы можете узнать о ней подробнееCSS @propertyПрименение.

CodePen Demo — анимация перехода с подчеркиванием текста

text-decoration-color отделен от цвета

text-decoration-colorа такжеcolorЭто может быть по-разному, как-то так.

.color {
    text-decoration-style: wavy;
    cursor: pointer;
    transition: .5s;

    &:hover {
        color: transparent;
        text-decoration-color: pink;
    }
}

Интересно, что после этого мы действительно получим волнистую линию.

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

<p class="animation" data-content="Lorem ibsum dolor Lorem ibsum dolor">Lorem ibsum dolor</p>

.animation {
    position: relative;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    line-height: 2;
    
    &::before {
        content: attr(data-content);
        position: absolute;
        top: 0;
        left: 0;
        color: transparent;
        white-space: nowrap;
        text-decoration-line: underline;
        text-decoration-style: wavy;
        text-decoration-color: #000;
        z-index: -1;
    }
    &:hover::before {
        animation: move 3s infinite linear;
    }
}
@keyframes move {
    100% {
        transform: translate(-209px, 0);
    }
}

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

CodePen Demo -- text-decoration Demo

выделение текста выделение текста

text-emphasisПодчеркнутый текст означает, чтоCSS Text Decoration Module Level 3Недавно добавленное свойство используется для повышения влияния текста акцента.

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

{
    font-weight: bold;   // 加粗
    font-style: italic;  // 斜体
}

Теперь есть интересный способ подчеркнуть...text-emphasis.

синтаксис выделения текста

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

Взгляните на простую демонстрацию:

<p>
   This is <span>Text-emphasis</span>.
</p>

p span{
    text-emphasis: circle;
}

text-emphasis: circleЭффект состоит в том, чтобы добавить графический круг, то есть графический круг, к обернутую текст над ним. Эффект выглядит следующим образом:

image

Конечно, по умолчанию черный, мы можем добавить цвет после круга:

p span{
    text-emphasis: circle #f00;
}

image

Кромеcircle, также предоставляет широкий выбор графики, вы также можете настроить входящие символы, даже выражения эмодзи:

<p>
    A B C D  
    <span class="keyword">E F</span>
    G H
    <span class="word">I J</span>
    K L
    <span class="emoji">M N</span>
</p>

.keyword {
    text-emphasis: circle #f00;
}
.word {
    text-emphasis: 'x' blue;
}
.emoji {
    text-emphasis: '😋';
}

image

синтаксис позиции выделения текста

Помимо размещения над текстом, вы также можете изменить положение выделенного изображения в определенном диапазоне, выбрать размещение над или под текстом, а также использоватьtext-emphasis-position.

Этот атрибут принимает вверх и вниз и влево и правильные параметры:

text-emphasis-position: [ over | under ] && [ right | left ]?

.keyword {
    text-emphasis: circle #f00;
}
.word {
    text-emphasis: 'x' blue;
    text-position: over left;
}
.emoji {
    text-emphasis: '😋';
    text-position: under left;
}

Когда порядок написания набора текста представляет собой горизонтальный наборный макет, что-то вродеwriting-mode: lr, только нужно использоватьover,underТо есть при наборном режиме раскладки текста вертикальный режим, что-то вродеwriting-mode: vertical-lr, будет использованоrightилиleftключевые слова.

p {
    writing-mode: vertical-rl;
}
.keyword {
    text-emphasis: circle #f00;
}
.word {
    text-emphasis: 'x' blue;
    text-position: over left;
}
.emoji {
    text-emphasis: '😋';
    text-position: under right;
}

image

Имитация подчеркивания с фоном

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

Наиболее распространенным является использованиеbackgroundИмитирует подчеркивание.

Посмотрите на простой DEMO, используйтеbackgroundИмитация эффекта подчеркивания текста:

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <a>Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam</a>, molestiae laboriosam sit repellendus sed sapiente quidem quod accusantium vero.</p>

p {
    width: 600px;
    font-size: 24px;
    color: #666;
}
a {
    background: linear-gradient(90deg, #0cc, #0cc);
    background-size: 100% 3px;
    background-repeat: no-repeat;
    background-position: 100% 100%;
    color: #0cc;
}

использоватьbackgroundИмитация эффекта подчеркивания текста, эффект выглядит следующим образом:

В качестве альтернативы используйтеbackgroundИмитация пунктирного подчеркивания:

a {
    background: linear-gradient(90deg, #0cc 50%, transparent 50%, transparent 1px);
    background-size: 10px 2px;
    background-repeat: repeat-x;
    background-position: 100% 100%;
}

Демонстрация CodePen — используйте фон для имитации подчеркивания и пунктирного подчеркивания

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

тонкое изменениеbackground-sizeа такжеbackground-positionРеализовать анимацию при наведении текста

Здесь, слегка изменивbackground-sizeа такжеbackground-positionсвойства, мы можем добиться очень интересных эффектов наведения текста.

Сначала посмотрите на такую ​​демонстрацию, основной код действует на<p>этикетка завернута<a>На этикетке:

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <a>Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam</a>, molestiae laboriosam sit repellendus sed sapiente quidem quod accusantium vero.</p>

a {
    background: linear-gradient(90deg, #ff3c41, #fc0, #0ebeff);
    background-size: 0 3px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: 1s all;
    color: #0cc;
}

a:hover {
    background-size: 100% 3px;
    color: #000;
}

Хотя мы установилиbackground: linear-gradient(90deg, #ff3c41, #fc0, #0ebeff), но изначально по умолчаниюbackground-size: 0 3px, то есть сначала не видно подчеркивания, при наведении меняетсяbackground-size: 100% 3px, на этот раз будет0 3pxприбыть100% 3pxТрансформация, то есть эффект растяжения с нуля.

Посмотрите на окончательный эффект:

из-за набораbackground-positionда0 100%, если установленоbackground-positionда100% 100%, мы можем получить обратный эффект:

// 其他都保持一致，只改变 background-position，从 0 100% 改为 100% 100%
a {
    ...
    background-position: 100% 100%;
    ...
}

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

CodePen Demo -- background underline animation

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

Схема кода CSS, обратите внимание на два подчеркивания, смоделированные фономbackground-positionЗначения не совпадают:

a {
    background: 
        linear-gradient(90deg, #0cc, #0cc),
        linear-gradient(90deg, #ff3c41, #fc0, #8500d8);
    background-size: 100% 3px, 0 3px;
    background-repeat: no-repeat;
    background-position: 100% 100%, 0 100%;
    transition: 0.5s all;
    color: #0cc;
}
a:hover {
    background-size: 0 3px, 100% 3px;
    color: #000;
}

У вас может получиться такой эффект, ведь при каждом наведении двигаются два подчёркивания:

CodePen Demo -- background underline animation

наконец

Ну вот и подошла к концу эта статья, знакомящая с некоторыми интересными свойствами и динамическими эффектами оформления текста, надеюсь, она вам поможет :)

Если вы хотите получить самую интересную информацию о CSS, не пропустите мой официальный аккаунт --Интересные факты о внешнем интерфейсе iCSS😄

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

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

Категории