What is the application of before and: after and box-shadow in CSS pseudo-elements
What this article shares with you is about the application of before and: after and box-shadow in the pseudo-elements of CSS. The editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article.
Using CSS pseudo elements: before and: after can insert content before and after the document without changing the original structure of the document, combined with box-shadow can achieve a very cool effect.
Here are three examples:
1. Use: before and: after to add background, such as putting quotation marks before and after a paragraph
2. Use: before,: after, box-shadow to achieve 3D shadow effect.
3. Use: before,: after, box-shadow to achieve photo overlay effect.
The code is as follows:
Pseudo Demo
Body {background-color:#ccd3d7;padding:40px;}
H3 {display:block;border-bottom:1px solid # ddd;padding:15px;}
P.myquote {padding:1em;font-size:16px;margin:8px 1m positional position relative to colorvision linelineheightRod 1.7em;}
P.myquote:before,p.myquote:after {font-size:40px;position:absolute;padding:0;margin:0;color:green;}
P.myquote:hover:before,p.myquote:hover:after {color:red;font-size:50px;}
P.myquote:before {content: ""; left:0;left:-10px;}
P.myquote:after {content: ""; padding-left:15px;bottom:4px;}
.shbox {
Background:#fff
Padding:10px
Width:90%
Margin:40px auto
Height:auto
Margin:40px auto
}
.sh-down-lr {position:relative;}
.sh-down-lr:before,.sh-down-lr:after {
Z-index:-1
Position: absolute
Content: ""
Bottom: 15px
Left: 10px
Width: 50%
Top: 80%
Max-width:300px
Background: # 777
-webkit-box-shadow: 0 15px 10px # 777
-moz-box-shadow: 0 15px 10px # 777
Box-shadow: 0 15px 10px # 777
-webkit-transform: rotate (- 3deg)
-moz-transform: rotate (- 3deg)
-o-transform: rotate (- 3deg)
-ms-transform: rotate (- 3deg)
Transform: rotate (- 3deg)
}
.sh-down-lr:after {
-webkit-transform: rotate (3deg)
-moz-transform: rotate (3deg)
-o-transform: rotate (3deg)
-ms-transform: rotate (3deg)
Transform: rotate (3deg)
Right:10px
Left:auto
}
.stackone {
Border: 6px solid # fff
Width: 400px
Height:225px
Margin: 50px
Position: relative
-webkit-box-shadow: 2px 2px 5px rgba (0pc0pl 0pl 0.3)
-moz-box-shadow: 2px 2px 5px rgba (0pc0pl 0pl 0.3)
Box-shadow: 2px 2px 5px rgba (0. 0. 0. 0. 0. 3)
}
.stackone img {width:100%;heigth:100%;}
.stackone: before,.stackone:after {
Content: ""
Width: 400px
Height:225px
Background: # aaa
Border: 6px solid # fff
Position:absolute
Z-index:-1
Top:0
Left:-10px
-webkit-box-shadow: 2px 2px 5px rgba (0pc0pl 0pl 0.3)
-moz-box-shadow: 2px 2px 5px rgba (0pc0pl 0pl 0.3)
Box-shadow: 2px 2px 5px rgba (0. 0. 0. 0. 0. 3)
-webkit-transform: rotate (- 5deg)
-moz-transform: rotate (- 5deg)
-o-transform: rotate (- 5deg)
-ms-transform: rotate (- 5deg)
Transform: rotate (- 5deg)
}
.stackone: after {
Top:5px
Left:0
-webkit-transform: rotate (3deg)
-moz-transform: rotate (3deg)
-o-transform: rotate (3deg)
-ms-transform: rotate (3deg)
Transform: rotate (3deg)
}
CSS Demo: before,: after, box-shadow
The most precious thing of man is life. Life belongs to people only once. A man's life should be spent like this: when he recalls the past, he will not regret wasting his time, nor will he be ashamed of mediocrity.
Steel is made by burning in a hot fire and highly cooled, so it is very strong. Our generation is also tempered in struggles and hardships, and has learned never to be discouraged in life.
Achieve results:
These are the before and: after and box-shadow applications in CSS pseudo-elements. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.
