CSS text decoration & text emphasis

chokcoco 2021-04-07 21:48:41
css text decoration text emphasis


stay CSS in , Words are a big category that we deal with every day , With words , It is necessary to decorate some words .

This article will talk about two relatively new concepts of character decoration text-decoration And text-emphasis, In the end , We will also explain how to use it background Simulate some interesting effects of text underline .

text-decoration Text decoration

text-decoration It means to decorate with words , In the early specification CSS Level 2 (Revision 1) -- text-decoration It already exists . For example, we are very familiar with the underline text-decoration: underline.

p {
text-decoration: underline;
}
 Copy code 

image

And to a relatively new CSS Text Decoration Module Level 3 - text-decoration,text-decoration Get a relatively large rich update , Evolved into text-decoration-line, text-decoration-color, text-decoration-style, And not yet standard text-decoration-thickness Equal attribute , It's their abbreviation .

among :

  • text-decoration-line: Controls the type of decoration used to set the text in an element , It's below the text 、 Above or through the text
  • text-decoration-style: It's not just a solid line solid, Be similar to border-style, It also supports double solid lines double、 Point line dotted、 Dotted line dashed And very interesting wavy Wavy lines
  • text-decoration-color: That's easy to understand , Control the color
  • text-decoration-thickness: Control the thickness of the finishing line

Here's a very good picture , Help you understand quickly :

image

CodePen Demo -- Text-decoration Demo

text-decoration-line It can be set at the same time

What's interesting is ,text-decoration-line It can be set at the same time .

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

image

We can get three lines up, middle and down .

text-decoration You can make transitions and animations

text-decoration Each value of can be transited and animated . Reasonable use , Where some of the text emphasizes , Very useful .

<p class="transition">Lorem ipsum dolor</p>
 Copy code 
.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;
}
}
 Copy code 

With another attribute text-underline-offset, We can also achieve the following interesting effect :

Of course , The example above uses text-underline-offset Transformation of , But in itself CSS It is not supported text-underline-offset The transition animation of , Here, with the help of CSS @property Ingeniously achieved text-underline-offset The transition animation of , If you are interested, you can learn more about CSS @property Usage of .

CodePen Demo -- Text underline transition animation effect

text-decoration-color And color Separate

text-decoration-color And color It can be different , Something like this .

.color {
text-decoration-style: wavy;
cursor: pointer;
transition: .5s;
&:hover {
color: transparent;
text-decoration-color: pink;
}
}
 Copy code 

interesting , After this , We actually got a wavy line .

If we put wavy The pseudo elements underlined to the elements , And then in hover Add an animation when you're doing it , Let the waves move , Get a very good emphasis hover effect :

<p class="animation" data-content="Lorem ibsum dolor Lorem ibsum dolor">Lorem ibsum dolor</p>
 Copy code 
.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);
}
}
 Copy code 

We use pseudo elements to add a piece of text longer than the text itself , And the color is transparent , But set the color of the wavy line , then hover When , By moving the pseudo elements of translate Displacement of the wave line , A little debugging translate Value , You can do animation end-to-end , Realize the effect of moving wave line .

CodePen Demo -- text-decoration Demo

text-emphasis Words emphasize

text-emphasis It means to emphasize , yes CSS Text Decoration Module Level 3 Just a new attribute , Used to enhance the effect of text emphasis .

In the early days , If we want to emphasize a few words , Maybe it's more about using In bold , Italics This more conventional type of text style :

{
font-weight: bold; // In bold
font-style: italic; // Italics
}
 Copy code 

Now? , There's an interesting way to emphasize -- text-emphasis.

text-emphasis grammar

text-emphasis Contains text-emphasis and text-emphasis-position, Allows us to add different accents and colors above or below the text .

Look at a simple Demo:

<p>
This is <span>Text-emphasis</span>.
</p>
 Copy code 
p span{
text-emphasis: circle;
}
 Copy code 

text-emphasis: circle The effect is to give the text of the package , Above it , add to circle graphics , That's the circle figure , The effect is as follows :

image

Of course , The default is black , We can do it in circle Add color at the back :

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

image

except circle, There are also many graphics to choose from , You can also customize incoming characters , Even emoji expression :

<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>
 Copy code 
.keyword {
text-emphasis: circle #f00;
}
.word {
text-emphasis: 'x' blue;
}
.emoji {
text-emphasis: '';
}
 Copy code 

image

text-emphasis-position grammar

Except above the text , You can also change the position of the emphasis figure within a certain range , Choose to place above or below the text , utilize text-emphasis-position.

This property takes upper and lower and left and right parameters :

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;
}
 Copy code 

When the writing order of the text typesetting is horizontal typesetting layout , similar writing-mode: lr when , Just use overunder that will do , When the layout mode of text is vertical , similar writing-mode: vertical-lr, Will be used right perhaps left keyword .

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;
}
 Copy code 

image

Use background Simulate underline

except CSS Provided by the native text-decoration And text-emphasis outside , We can also simulate some text decoration effects through other elements .

The most common is to use background It's like .

Look at a simple DEMO, Use background Simulate the underline effect of text :

<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>
 Copy code 
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;
}
 Copy code 

Use background Simulate the underline effect of text , The renderings are as follows :

Or, , Use background Simulate dotted line underline :

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

CodePen Demo -- Use background Simulate underscores and dashed underscores

Of course, this is the most basic , Clever use of background Properties of , We achieve all kinds of interesting effects .

Smart change background-size And background-position Realize text hover Dynamic effect

here , By subtly changing background-size And background-position attribute , We can achieve some very interesting words hover effect .

Let's look at this one first Demo, The core code acts on being <p> Label wrapped <a> On the label :

<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>
 Copy code 
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;
}
 Copy code 

Although we , Set the background: linear-gradient(90deg, #ff3c41, #fc0, #0ebeff), But at the beginning, the default was background-size: 0 3px, That is to say, you can't see the underline at the beginning , When hover When , change background-size: 100% 3px, This is the time , There will be one 0 3px To 100% 3px Transformation of , It's a stretch from scratch .

Look at the final effect :

Because of the set background-position yes 0 100%, If , Set background-position yes 100% 100%, We can get a reverse effect :

// Everything else is consistent , Only change background-position, from 0 100% Change it to 100% 100%
a {
...
background-position: 100% 100%;
...
}
 Copy code 

Let's see what happens , You can compare the above motion chart to see the specific differences :

CodePen Demo -- background underline animation

OK, If we use background Implement two overlapping underscores , Take advantage of the two different background-position value , We can get a more interesting underline hover effect .

CSS Code illustration , Pay attention to two ways to use background Simulated, underlined background-position The values are different :

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;
}
 Copy code 

You can get such an effect , In fact, every time hover, There are two underscores moving :

CodePen Demo -- background underline animation

Last

Okay , This concludes the article , This paper introduces some interesting properties and dynamic effects of character decoration , I hope it helps you :)

Want to Get To the most interesting CSS information , Don't miss my official account -- iCSS Front end anecdotes

More exciting CSS Technical articles summarized in mine Github -- iCSS , Continuous updating , Welcome to point a star Subscribe to the collection .

Any questions or Suggestions , Communicate more , Original article , Writing co., LTD. , Pretty good , If there is anything wrong with the text , All hope to inform .

版权声明
本文为[chokcoco]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/04/20210407213623183c.html

  1. Element tree control: invalid to modify current node key
  2. linux下安装apache(httpd-2.4.3版本)各种坑
  3. How to install Apache (httpd-2.4.3) under Linux
  4. 程序员业余时间写的代码也算公司的?Nginx之父被捕引发争议
  5. Nacos serialize for class [com.alibaba.nacos.common.http.HttpRestResult] failed.
  6. Do programmers write code in their spare time? Controversy over the arrest of nginx's father
  7. Nacos serialize for class [ com.alibaba.nacos . common.http.HttpRestResult ] failed.
  8. Seamless management of API documents using eolink and gitlab
  9. vue 的基础应用(上)
  10. 28岁开始零基础学前端,这些血的教训你一定要避免
  11. Basic application of Vue
  12. Starting at the age of 28, you must avoid these bloody lessons
  13. Ubuntu 16.04 can not connect to the wireless solution and QQ installation
  14. Industry security experts talk about the rapid development of digital economy, how to guarantee the security of data elements?
  15. 利用Vue实现一个简单的购物车功能
  16. Behind the "tireless classroom" and teacher training, can byte education really "work wonders"?
  17. Using Vue to realize a simple shopping cart function
  18. 【css】伪类和伪类元素的区别
  19. 【css效果】实现简单的下拉菜单
  20. 【vue】父子组件传值
  21. The difference between pseudo class and pseudo class elements
  22. [CSS effect] simple drop-down menu
  23. [Vue] value transfer by parent-child component
  24. 【css】设置table表格边框样式
  25. 【css】修改input,textarea中的placeholder样式
  26. vue-router的两种模式(hash和history)及区别
  27. CSS3的滤镜filter属性
  28. [CSS] set table border style
  29. [CSS] modify the placeholder style in input and textarea
  30. Two modes of Vue router (hash and History) and their differences
  31. Filter property of CSS3
  32. 全局安装gulp 报错问题解决
  33. Solution of error report in global installation of gulp
  34. 18个好用的自定义react hook
  35. 你应该知道的常用服务器HTTP状态码?
  36. 18 user defined react hooks
  37. What HTTP status codes should you know about common servers?
  38. 手把手教你打造属于自己团队的前端小报系统
  39. Hand in hand to teach you to build your own front-end tabloid system
  40. In 2021, enterprise SEO actual operation, how to less update, batch ranking regional words?
  41. vue cli4.0 快速搭建项目详解
  42. Vue cli4.0 quick build project
  43. vue-cli脚手架安装
  44. Installation of Vue cli scaffold
  45. [JS knowledge] method of getting elements from DOM
  46. 【jQuery效果】文字滚动
  47. [jQuery effect] text scrolling
  48. [front end] live broadcast of user experience optimization series, real-life sharing of front-line celebrities
  49. React native introduces third party Android SDK
  50. Using html2canvas to generate shared images, CDN images do not show the problem
  51. Using hooks to write react components
  52. Explain the module hot replacement function of webpack in detail
  53. An incomplete guide to writing a simple native wechat applet
  54. How JavaScript calculates 1 + 1 - Part 1 creates a source string
  55. Jsonp method to solve cross domain problems
  56. Canvas animation demo (from zero to one)
  57. El dialog of elementui component encapsulation
  58. Transition group of Vue source code
  59. When encountering bracket validity, next larger element, specific minimum value, try stack
  60. Vue3 virtual DOM