Shulou(Shulou.com)05/31 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.