What are the skills of typesetting and beautification of CSS3 practical pages
This article mainly introduces the "CSS3 practical page typesetting beautification skills" related knowledge, the editor through the actual case to show you the operation process, the method of operation is simple and fast, practical, I hope that this "CSS3 practical page typesetting beautification skills" article can help you solve the problem.
1. Black and white image
This code will make your color photos appear as black-and-white photos. Isn't that cool?
Img.desaturate {
Filter: grayscale (100%)
-webkit-filter: grayscale
-moz-filter: grayscale
-ms-filter: grayscale
-o-filter: grayscale
}
two。 Shadow at the top of the page
Here is a simple css3 snippet to add a nice top shadow to a web page:
Body:before {
Content: ""
Position: fixed
Top:-10px
Left: 0
Width: 100%
Height: 10px
-webkit-box-shadow: 0px 0px 10px rgba (0pc0pl 0pr .8)
-moz-box-shadow: 0px 0px 10px rgba (0pc0pl 0pr .8)
Box-shadow: 0px 0px 10px rgba (0pd0j0j0pl .8)
Z-index: 100
}
3. Everything is centered vertically, and it is too easy to center all elements vertically:
Html, body {
Height: 100%
Margin: 0
}
Body {
-webkit-align-items: center
-ms-flex-align: center
Align-items: center
Display:-webkit-flex
Display: flex
}
Note: beware of flexbox in IE11.
4. Text gradient
Text gradients are very popular, and you can easily achieve them with CSS3:
H2 [data-text] {
Position: relative
}
H2 [data-text]:: after {
Content: attr (data-text)
Z-index: 10
Color: # e3e3e3
Position: absolute
Top: 0
Left: 0
-webkit-mask-image:-webkit-gradient (linear, left top, left bottom, from (rgba)
Color-stop (50%, rgba (0pr 0pl 0pl 1))
To (rgba (0re0j0j0pr 0)
}
5. Disable mouse events
CSS3's new pointer-events allows you to disable mouse events for elements, for example, a connection cannot be clicked if it is set to the following style.
.disabled {
Pointer-events: none
}
6. Fuzzy text
Simple but beautiful text blur effect, simple and good-looking!
.blur {
Color: transparent
Text-shadow: 0 5px rgba (0penny 0penny 0.5)
}
This is the end of the content about "what are the typesetting and beautification skills of CSS3 practical pages". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.
