CSS3 text effect


May 04, 2021 03:00 CSS3


Table of contents


CSS3 text effect


CSS3 text effect

CSS3 contains several new text features.

In this section, you'll learn about the following text properties:

  • text-shadow

  • box-shadow

  • text-overflow

  • word-wrap

  • word-break


Browser support

属性
text-shadow 4.0 10.0 3.5 4.0 9.5
box-shadow 10.0
4.0 -webkit-
9.0 4.0
3.5 -moz-
5.1
3.1 -webkit-
10.5
text-overflow 4.0 6.0 7.0 3.1 11.0
9.0 -o-
word-wrap 23.0 5.5 3.5 6.1 12.1
word-break 4.0 5.5 15.0 3.1 15.0

Text shadow for CSS3

In CSS3, the text-shadow property applies to text shadows.

CSS3 text effect

You specify horizontal shadows, vertical shadows, blurred distances, and the color of shadows:

CSS3 text effect CSS3 text effect CSS3 text effect CSS3 text effect CSS3 text effect

Cast a shadow over the title:

h1
{
text-shadow: 5px 5px 5px #FF0000;
}

Try it out . . .

CSS3 box-shadow property

The CSS3 box-shadow property in CSS3 applies to box shadows

div { box-shadow: 10 px 10 px ; }

Try it out . . .

Next, color the shadows

div { box-shadow: 10 px 10 px grey ; }

Try it out . . .

Next, add a blur effect to the shadow

div { box-shadow: 10 px 10 px 5 px grey ; }

Try it out . . .

You can also add a shadow effect to the ::before and ::after pseudo-elements

# boxshadow {
position: relative ;
b ox-shadow: 1 px 2 px 4 px rgba ( 0 , 0 , 0 , .5 ) ;
pa dding: 10 px ; bac kground: white ;
}
#boxshadow img {
width: 100 % ;
border: 1 px solid #8a4419 ;
border-style: inset ;
}
#b oxshadow : :after {
content: '' ;
position: absolute ;
z-index: - 1 ; /* hide shadow behind image */
box-shadow: 0 15 px 20 px rgba ( 0 , 0 , 0 , 0.3 ) ;
width: 70 % ;
left: 15 % ; /* one half of the remaining 30% */
height: 100 px ;
bottom: 0 ;
}

Try it out . . .

阴影的一个使用特例是卡片效果

div .card {
width: 250 px ;
box-shadow: 0 4 px 8 px 0 rgba ( 0 , 0 , 0 , 0.2 ), 0 6 px 20 px 0 rgba ( 0 , 0 , 0 , 0.19 ) ;
text-align: center ;
}

Text cards . . . Try it out . . .

CSS3 Text Overflow properties

The CSS3 text overflow property specifies how the overflow content should be displayed to the user

p .test1 {
white-space: nowrap ;
width: 200 px ;
border: 1 px solid #000000 ;
overflow: hidden ;
text-overflow: clip ;
}
p .test2 {
white-space: nowrap ;
width: 200 px ;
border: 1 px solid #000000 ;
overflow: hidden ;
text-overflow: ellipsis ;
}

Try it out . . .

Line-up for CSS3

If a word is too long to fit in an area, it extends to the outside:

In CSS3, the line break property allows you to force text to break - even if that means splitting a word in the middle of it:

The CSS code is as follows:

CSS3 text effect CSS3 text effect CSS3 text effect CSS3 text effect CSS3 text effect

Allow long text to line up:

p {word-wrap:break-word;}

Try it out . . .

The CSS3 word splits the line break

The CSS3 word split line break property specifies a line break rule:

The CSS code is as follows:

p .test1 {
word-break: keep-all ;
}
p .test2 {
word-break: break-all ;
}

Try it out . . .

New Text Properties

Property Describe Css
hanging-punctuation Specify whether the punctuation character is outside the wireframe. 3
punctuation-trim Specifies whether punctuation characters are trimmed. 3
text-align-last Sets how to align the last line or line immediately before the forced line break. 3
text-emphasis Apply a focus marker and the fore forech color of the focus marker to the text of the element. 3
text-justify Specifies the alignment method used when text-align is set to "justify". 3
text-outline Specify the outline of the text. 3
text-overflow Specifies what happens when text overflows to contain elements. 3
text-shadow Add a shadow to the text. 3
text-wrap Provides new line-by-line rules for text. 3
word-break Provides line-changing rules for non-Chinese, Japanese and Korean texts. 3
word-wrap Allows long, indivisible words to be split and lined to the next line. 3