CSS text effect, css text

CSS text effect, css text
Previous

This article describes the CSS text effect in detail.

 

Convex print effect

This effect is especially suitable for scenarios with medium-brightness backgrounds and dark texts. However, it can also be used in scenarios with dark background and light-colored characters, as long as the text is not black and the background is not pure black or pure white.

[Dark text with light background]

  background:hsl(210,13%,60%);  color:hsl(210,13%,30%);  text-shadow:0 .03em .03em hsla(0,0%,100%,.8);

[Dark background light text]

  background:hsl(210,13%,40%);  color:hsl(210,13%,75%);  text-shadow:0 -1px 1px black;

 

Hollow word Effect

  color:white;  text-shadow:1px 1px black,-1px -1px black,1px -1px black,-1px 1px black;

 

Luminous effect

  background:#203;  color:#ffc;  text-shadow:0 0 .1em,0 0 .3em;

 

Blur Effect

div{  width:200px;  background:#203;  color:transparent;  text-shadow:0 0 .1em white,0 0 .3em white;  transition:.5s;}div:hover{  color:white;}  

After the mouse moves in, the text changes from fuzzy to clear

 

Highlights

The main idea of the text highlight (pseudo 3D) effect is to use a long string of accumulated projection without blurring and gradually stagger with a span of 1 px to gradually darken the color, then, a strong fuzzy dark projection is added to the bottom to simulate the complete three-dimensional effect.

  background:#58a;  color:white;  text-shadow:0 1px hsl(0,0%,85%),0 2px hsl(0,0%,80%),0 3px hsl(0,0%,75%),0 4px hsl(0,0%,70%),0 5px hsl(0,0%,65%),0 5px 10px black;

 

Flashing Effect

@keyframes blink-smooth{50%{color:transparent;}}div{  animation:.5s blink-smooth infinite alternate linear;}

 

Typing Effect

Sometimes, it is expected that characters in a piece of text are displayed one by one to simulate a typing effect. This effect is particularly popular in technical websites. Using an equal-width font can create a sense of terminal command line.

The core idea is to make the width of the container the main body of the animation and wrap all the text in the container, then let its width expand from 0 to the expected width in a step-by-step Animation Mode with a word

This method is limited and does not apply to multiple lines of text.

@keyframes typing{0%{width:0;}}@keyframes caret{50%{border-color:transparent;}}div{  width:9em;  animation:typing 4s steps(9) infinite ,caret .5s steps(1) infinite;  white-space: nowrap;  overflow: hidden;  border-right:1px solid;}

 

Circular text

[SVG]

It is relatively simple to use SVG to Implement Circular text

<Style> div {width: 100px; height: 100px; border: 1px solid black;} svg {margin-left:-20px ;} </style> <div> <svg height = "100" version = "1.1" xmlns = "http://www.w3.org/2000/svg"> <path id = "my_path" d = "M 50 50 a 20 20, 0, 1, 1, 0 1 Z "fill =" none "/> <text> <textPath xlink: href = "# my_path"> blue ideal of a match </textPath> </text> </svg> </div>