Shulou(Shulou.com)06/01 Report--

This article mainly introduces "CSS how to display a color picture as a black-and-white photo". In daily operation, I believe many people have doubts about how to display a color picture as a black-and-white photo in CSS. The editor consulted all kinds of materials and sorted out a simple and easy-to-use method of operation. I hope it will be helpful to answer the question of "how CSS makes a color picture display as a black-and-white photo". Next, please follow the editor to study!

1. Black and white image

When you need to show a color picture as a black-and-white picture, you can use the following code.

Img.desaturate {

Filter: grayscale (100%)

-webkit-filter: grayscale

-moz-filter: grayscale

-ms-filter: grayscale

-o-filter: grayscale

}

Use: not () to apply / unapply borders on the menu

Add a border to each menu item first

.nav li {

Border-right: 1px solid # 666

}

And then remove the last element.

.nav li:last-child {

Border-right: none

}

You can also apply elements directly using the: not () pseudo class

.nav li:not (: last-child) {

Border-right: 1px solid # 666

}

If your element has a sibling element, you can also use the universal sibling selector (~).

.nav li:first-child ~ li {

Border-left: 1px solid # 666

}

Third, shadow at the top of the page

Add a beautiful top shadow effect to the 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

}

Add line height to body

There is no need to add line heights to other things such as pforce h, just:

Body {

Line-height: 1

}

Everything is vertically centered

Html,body {

Height: 100%

Margin: 0

}

Body {

-webkit-align-items: center

-ms-flex-align: center

Align-items: center

Display:-webkit-flex

Display: flex

}

Need to pay attention to flexbox in IE11

VI. Comma separated list

Make the HTML list items look like they are being delimited by a real, delimited list

Ul > li:not (: last-child):: after {

Content: ",

}

Use negative nth-child to select items

Use negative nth-child in css to select items 1 to n

Li {

Display: none

}

Li:nth-child (- nasty 3) {

Display: block

}

Use SVG for icons

.logo {

Background: url ("logo.svg")

}

IX. Optimize the display of text

Sometimes fonts don't work best on all devices, so you can ask the device browser to help you.

Html {

-moz-osx-font-smoothing: grayscale

-webkit-font-smoothing: antialiased

Text-rendering: optimizelegibility

}

10. Use max-height for pure css sliders

Use max-height and overflow hiding to implement a css-only slider

.slider ul {

Max-height: 0

Overflow: hidden

}

.slider: hover ul {

Max-height: 1000px

Transition: .3s ease

}

Inherit box-sizing

Let box-sizing inherit html

Html {

Box-sizing: border-box

}

*, *: before, *: after {

Box-sizing: inherit

}

XII. Table cells of equal width

.table {

Table-layout: fixed

}

Use Flexbox to get rid of all kinds of hack with outer margin

When you need to use column delimiters, you can get rid of the hack of nth- first- last-chlid through the space-between property of flexbox

.list {

Display: flex

Justify-content: space-between

}

.list .person {

Flex-basis: 23%

}

Use the attribute selector for empty links

Displays a link when the an element has no text value, but the href attribute has a link

A [href ^ = "http"]: empty::before {

Content: attr (href)

}

Detect double click of mouse

HTML:

Double click me

CSS:.test span {

Position: relative

}

.test span a {

Position: relative

Z-index: 2

}

.test span a:hover,.test span a:active {

Z-index: 4

}

.test span input {

Background-color: transparent

Border: 0

Cursor: pointer

Position: absolute

Top:-1px

Left: 0

Width: 101%

Height: 301%

Z-index: 3

}

.test span input:focus {

Background-color: transparent

Border: 0

Z-index: 1

}

16. CSS writes out triangles

Div.arrow-up {

Width: 0px

Height: 0px

Border-left: 5px solid transparent

Border-right: 5px solid transparent

Border-bottom: 5px solid # ccc

Font-size: 0px

Line-height: 0px

}

Div.arrow-down {

Width: 0px

Height: 0px

Border-bottom: 5px solid transparent

Border-top: 5px solid transparent

Border-right: 5px solid # ccc

Font-size: 0px

Line-height: 0px

}

Div.arrow-left {

Width: 0px

Height: 0px

Border-bottom: 5px solid transparent

Border-top: 5px solid transparent

Border-left: 5px solid # ccc

Font-size: 0px

Line-height: 0px

}

Div.arrow-right {

Width: 0px

Height: 0px

Border-bottom: 5px solid transparent

Border-top: 5px solid transparent

Border-left: 5px solid # ccc

Font-size: 0px

Line-height: 0px

}

XVII. Use of CSS calc ()

The use of calc () is similar to a function, which can set dynamic values for elements.

.simpleBlock {

Width: calc (100%-100px)

}

.complexBlock {

Width: calc (100%-50% / 3)

Padding: 5px calc (3%-2px)

Margin-left: calc (10% + 10px)

}

XVIII. Text gradual change

H3 [data-text] {

Position: relative

}

H3 [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% recorder rgba), to (rgba)

}

XIX. Disable mouse events

.disabled {

Pointer-events: none

}

20. Ambiguous text

.blur {

Color: transparent

Text-shadow: 0 5px rgba (0penol 0penny .5)

}

At this point, the study on "how to display a color picture as a black-and-white photo by CSS" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.