Detaillierte Erklärung der CSS-Textdekoration Textdekoration & Texthervorhebung

In CSS ist Text eines der häufigsten Dinge, mit denen wir täglich zu tun haben. Bei Text ist eine gewisse Textdekoration unerlässlich.

In diesem Artikel werden zwei relativ neue Konzepte der Textdekoration besprochen: text-decoration und text-emphasis . Am Ende werden auch einige interessante dynamische Effekte erläutert, die sich aus der Verwendung von background zur Simulation einer Textunterstreichung ergeben.

Textdekoration Textdekoration

text-decoration bedeutet Textdekoration und existierte bereits in der sehr frühen Spezifikation CSS Level 2 (Revision 1) – Textdekoration. Beispielsweise sind wir mit der text-decoration: underline .

P {
    Textdekoration: Unterstreichen;
} 

Im neueren CSS Text Decoration Module Level 3 - text-decoration wurde text-decoration stark erweitert und aktualisiert und hat sich zu Eigenschaften wie text-decoration-line , text-decoration-color , text-decoration-style und text-decoration-thickness entwickelt, die noch nicht zum Standard geworden sind. Dies sind ihre Abkürzungen.

In:

• text-decoration-line : Steuert die Art der Dekoration, die zum Setzen von Text in einem Element verwendet wird, ob sie sich unter, über oder durch den Text befindet.
• text-decoration-style : nicht nur solid Linien, ähnlich dem border-style , sondern unterstützt auch double durchgezogene Linien, dotted Linien, dashed Linien und sehr interessante wavy
• text-decoration-color : Dies ist leicht zu verstehen, steuert die Farbe
• text-decoration-thickness : steuert die Dicke der Dekorationslinie

Hier ist ein sehr gutes Bild, das Ihnen beim schnellen Verständnis hilft:

CodePen-Demo – Demo zur Textdekoration

Text-Dekorationszeile kann gleichzeitig gesetzt werden

Ein interessanter Punkt ist, dass text-decoration-line gleichzeitig festgelegt werden können.

P {
    Textdekorationslinie: Überstreichen, Unterstreichen, durchstreichen;
} 

Wir können drei Linien erhalten: oben, Mitte und unten.

Textdekoration kann überblendet und animiert werden

Jeder Wert der Textdekoration kann überblendet und animiert werden. Bei richtiger Verwendung kann es an Stellen sehr nützlich sein, an denen der Text etwas hervorhebt.

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

.Übergang {
    Textdekorationszeile: Unterstreichen;
    Textdekorationsfarbe: transparent;
    Textdekorationsdicke: 0,1em;
    Cursor: Zeiger;
    Übergang: 0,5 s;

    &:schweben {
        Textdekorationsfarbe: Pink;
        Textdekorationsdicke: 0,15em;
        Farbe: rosa;
    }
} 

Mit einem weiteren Attribut text-underline-offset können wir ebenfalls interessante Effekte wie die folgenden erzielen:

Natürlich verwendet das obige Beispiel die Transformation von text-underline-offset , aber CSS selbst unterstützt die Übergangsanimation von text-underline-offset nicht. Hier wird CSS @property verwendet, um die Übergangsanimation von text-underline-offset Wenn Sie interessiert sind, können Sie mehr über die Verwendung von CSS @property erfahren.

CodePen-Demo – Animationseffekt für den Übergang zur Textunterstreichung

Trennen Sie die Textdekorationsfarbe von der Farbe

text-decoration-color und color können unterschiedlich sein, ähnlich wie hier.

.Farbe {
    Textdekorationsstil: wellig;
    Cursor: Zeiger;
    Übergang: 0,5 s;

    &:schweben {
        Farbe: transparent;
        Textdekorationsfarbe: Pink;
    }
} 

Interessanterweise erhalten wir danach tatsächlich eine Wellenlinie.

Wenn wir dem Pseudoelement des Elements wavy Unterstreichung hinzufügen und dann eine Hover-Animation hinzufügen, um die Wellenlinie zu animieren, erhalten wir einen schönen Hover-Effekt:

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

.animation {
    Position: relativ;
    Textdekoration: keine;
    Überlauf: versteckt;
    Cursor: Zeiger;
    Zeilenhöhe: 2;
    
    &::vor {
        Inhalt: attr(Dateninhalt);
        Position: absolut;
        oben: 0;
        links: 0;
        Farbe: transparent;
        Leerzeichen: Nowrap;
        Textdekorationszeile: Unterstreichen;
        Textdekorationsstil: wellig;
        Textdekorationsfarbe: #000;
        z-Index: -1;
    }
    &:hover::vor {
        Animation: 3 s unendlich linear bewegen;
    }
}
@keyframes verschieben {
    100 % {
        transformieren: übersetzen(-209px, 0);
    }
} 

Wir verwenden Pseudoelemente, um einen Text hinzuzufügen, der länger als der Text selbst ist, und die Farbe ist transparent, aber die Farbe der Wellenlinie ist festgelegt. Beim Hovern wird die Wellenlinie dann durch Verschieben translate verschoben. Durch leichtes Anpassen des translate können Anfang und Ende der Animation verbunden werden, um den Effekt einer bewegten Wellenlinie zu erzielen.

CodePen-Demo – Textdekorations-Demo

Texthervorhebung

text-emphasis bedeutet Texthervorhebung. Es handelt sich um eine neue Eigenschaft, die im CSS Text Decoration Module Level 3 hinzugefügt wurde. Sie wird verwendet, um die Wirkung der Texthervorhebung zu verstärken.

Wenn wir früher einige Wörter hervorheben wollten, haben wir möglicherweise konventionellere Textstile wie Fettdruck und Kursivschrift verwendet:

{
    font-weight: bold; // fett font-style: italic; // kursiv}

Nun gibt es eine interessante Möglichkeit, Text hervorzuheben – text-emphasis .

Syntax zur Texthervorhebung

text-emphasis umfasst text-emphasis und text-emphasis-position und ermöglicht uns, verschiedene Hervorhebungsdekorationen und verschiedene Farben über oder unter dem Text hinzuzufügen.

Schauen Sie sich eine einfache Demo an:

<p>
   Dies ist eine <span>Texthervorhebung</span>.
</p>

p Spanne {
    Texthervorhebung: Kreis;
}

Der Effekt von text-emphasis: circle besteht darin, dass über dem umbrochenen Text eine Kreisgrafik hinzugefügt wird. Der Effekt ist wie folgt:

Natürlich ist die Standardeinstellung Schwarz, wir können nach dem Kreis Farbe hinzufügen:

p Spanne {
    Texthervorhebung: Kreis #f00;
} 

Neben circle stehen Ihnen viele weitere Grafiken zur Auswahl. Außerdem können Sie die eingegebenen Zeichen anpassen, sogar Emoji-Ausdrücke:

<p>
    ABCD E F
    GH
    Ich J
    KL
    <span class="emoji">M N</span>
</p>

.Schlüsselwort {
    Texthervorhebung: Kreis #f00;
}
.Wort {
    Texthervorhebung: „x“ blau;
}
.emoji {
    Texthervorhebung: „😋“;
} 

Syntax für die Hervorhebungsposition des Textes

Sie können die Position der Hervorhebungsform nicht nur über dem Text, sondern auch innerhalb eines bestimmten Bereichs ändern und sie mit text text-emphasis-position über oder unter dem Text platzieren.

Diese Eigenschaft akzeptiert zwei Parameter: oben und unten sowie links und rechts:

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

.Schlüsselwort {
    Texthervorhebung: Kreis #f00;
}
.Wort {
    Texthervorhebung: „x“ blau;
    Textposition: oben links;
}
.emoji {
    Texthervorhebung: „😋“;
    Textposition: unten links;
}

Wenn die Schreibreihenfolge des Textes horizontal ist, ähnlich wie bei writing-mode: lr , werden nur over und under benötigt. Wenn der Textlayoutmodus vertikal ist, ähnlich wie bei writing-mode: vertical-lr , werden die Schlüsselwörter right oder left verwendet.

P {
    Schreibmodus: vertikal-rl;
}
.Schlüsselwort {
    Texthervorhebung: Kreis #f00;
}
.Wort {
    Texthervorhebung: „x“ blau;
    Textposition: oben links;
}
.emoji {
    Texthervorhebung: „😋“;
    Textposition: unten rechts;
} 

Hintergrund verwenden, um Unterstreichung zu simulieren

Zusätzlich zur text-decoration und text-emphasis , die CSS nativ bereitstellt, können wir einige Textdekorationseffekte auch durch andere Elemente simulieren.

Die gebräuchlichste Methode besteht darin, background zu verwenden, um eine Unterstreichung zu simulieren.

Schauen Sie sich eine einfache DEMO an, bei der background verwendet wird, um den Unterstreichungseffekt von Text zu simulieren:

<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 {
    Breite: 600px;
    Schriftgröße: 24px;
    Farbe: #666;
}
A {
    Hintergrund: linearer Farbverlauf (90 Grad, Nr. 0cc, Nr. 0cc);
    Hintergrundgröße: 100 % 3px;
    Hintergrundwiederholung: keine Wiederholung;
    Hintergrundposition: 100 % 100 %;
    Farbe: #0cc;
}

Verwenden Sie background , um den Unterstreichungseffekt von Text zu simulieren. Der Effekt ist wie folgt:

Alternativ können Sie mit background eine gepunktete Unterstreichung simulieren:

A {
    Hintergrund: linearer Farbverlauf (90 Grad, #0cc 50 %, transparent 50 %, transparent 1 Pixel);
    Hintergrundgröße: 10px 2px;
    Hintergrundwiederholung: Wiederholung-x;
    Hintergrundposition: 100 % 100 %;
} 

CodePen-Demo – Verwenden Sie den Hintergrund, um Unterstreichungen und gestrichelte Unterstreichungen zu simulieren

Dies ist natürlich die einfachste Möglichkeit. Durch geschickte Nutzung der verschiedenen Eigenschaften background können wir verschiedene interessante Effekte erzielen.

Ändern Sie geschickt background-size und background-position um Text-Hover-Effekte zu erzielen

Hier können wir durch geschicktes Ändern background-size und background-position einige sehr interessante Text-Hover-Effekte erzielen.

Schauen wir uns eine Demo wie diese an. Der Kerncode wirkt auf das vom Tag <p> umschlossene Tag <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 {
    Hintergrund: linearer Farbverlauf (90 Grad, #ff3c41, #fc0, #0ebeff);
    Hintergrundgröße: 0 3px;
    Hintergrundwiederholung: keine Wiederholung;
    Hintergrundposition: 0 100 %;
    Übergang: 1s alle;
    Farbe: #0cc;
}

ein:schweben {
    Hintergrundgröße: 100 % 3px;
    Farbe: #000;
}

Obwohl wir background: linear-gradient(90deg, #ff3c41, #fc0, #0ebeff) festlegen, background-size: 0 3px , was bedeutet, dass die Unterstreichung am Anfang nicht sichtbar ist. Ändern Sie beim Schweben background-size: 100% 3px . Zu diesem Zeitpunkt erfolgt eine Transformation von 0 3px auf 100% 3px , was einem Streckungseffekt von nichts zu etwas entspricht.

Schauen Sie sich das Endergebnis an:

Da background-position auf 0 100% eingestellt ist, können wir einen umgekehrten Effekt erzielen, wenn background-position auf 100% 100% eingestellt ist:

// Alles andere bleibt gleich, ändere nur die Hintergrundposition von 0 100 % auf 100 % 100 %
A {
    ...
    Hintergrundposition: 100 % 100 %;
    ...
}

Schauen wir uns den Effekt einmal an. Sie können ihn mit der Animation oben vergleichen, um die spezifischen Unterschiede zu sehen:

CodePen-Demo – Unterstreichungsanimation im Hintergrund

OK, wenn wir background verwenden, um zwei überlappende Unterstreichungen zu implementieren, und dann die beiden oben erwähnten unterschiedlichen background-position verwenden, können wir einen interessanteren Unterstreichungs-Hover-Effekt erzielen.

CSS-Codediagramm. Beachten Sie, dass die background-position der beiden mit Hintergrund simulierten Unterstreichungen unterschiedlich sind:

A {
    Hintergrund: 
        linearer Gradient (90 Grad, #0cc, #0cc),
        linearer Farbverlauf (90 Grad, #ff3c41, #fc0, #8500d8);
    Hintergrundgröße: 100 % 3px, 0 3px;
    Hintergrundwiederholung: keine Wiederholung;
    Hintergrundposition: 100 % 100 %, 0 100 %;
    Übergang: 0,5 s alles;
    Farbe: #0cc;
}
ein:schweben {
    Hintergrundgröße: 0 3px, 100 % 3px;
    Farbe: #000;
}

Sie können einen solchen Effekt erzielen. Tatsächlich bewegen sich jedes Mal, wenn Sie mit der Maus darüber fahren, zwei Unterstriche:

CodePen-Demo – Unterstreichungsanimation im Hintergrund

endlich

Nun, das ist das Ende dieses Artikels. Ich habe einige interessante Eigenschaften und Animationen der Textdekoration vorgestellt. Ich hoffe, es wird Ihnen hilfreich sein 😃

Weitere wunderbare technische CSS-Artikel sind in meinem Github – iCSS – gesammelt. Sie werden ständig aktualisiert. Klicken Sie einfach auf einen Stern, um sich anzumelden und zu sammeln.

Dies ist das Ende dieses Artikels mit einer detaillierten Erklärung der CSS-Textdekoration, Textdekoration und Texthervorhebung. Weitere relevante Inhalte zur CSS-Textdekoration finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!