The front-end | 20 common CSS skills

© design by HeyRain

1, the statement

This article is only for forward learning to use, if violated your rights and interests, please contact me immediately delete!

The original link: http://www.phpxs.com/code/1009945/

Black and white image

This code will show your color photos as black and white photos, isn’t that cool?

img.desaturate {

    filter: grayscale(100%).

    -webkit-filter: grayscale(100%).

    -moz-filter: grayscale(100%).

    -ms-filter: grayscale(100%).

    -o-filter: grayscale(100%).

}

Copy the code

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

Start by adding a border to each menu item

/* add border */

.nav li {

    border-right: 1px solid # 666;

}

Copy the code

And then we get rid of the last element

// remove border /

.nav li:last-child {

    border-right: none;

}

Copy the code

Elements can be applied directly using the: Not () pseudo-class:

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

    border-right: 1px solid # 666;

}

Copy the code

This makes the code clean, easy to read, and easy to understand.

Of course, if your new element has sibling elements, you can also use the generic sibling selector (~) :

.nav li:first-child~li {

    border-left: 1px solid # 666;

}

Copy the code

3. Shadows at the top of the page

Here’s a simple CSS snippet to add a nice top shadow effect to a web page:

body:before {

    content: "";

    position: fixed;

    top: -10px;

    left: 0;

    width: 100%;

    height: 10px;

    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 8).

    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 8).

    box-shadow: 0px 0px 10px rgba(0, 0, 0, 8).

    z-index: 100;

}

Copy the code

4. Add a line height to the body

You don’t need to add line-height to each p,h, etc. Just add it to body:

body {

    line-height: 1;

}

Copy the code

This allows text elements to be easily inherited from the body.

Everything is vertically centered

It’s 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;

}

Copy the code

Look, isn’t that easy? Note: Watch out for Flexbox in IE11.

6. Comma-separated lists

Make an HTML list item look like a real, comma-separated list:

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

    content: ",";

}

Copy the code

Use the: NOT () pseudo class for the last list item.

7 Use negative nth-child to select items

Use negative nTH-Child to select items 1 through n in CSS.

li {

    display: none;

}



/*select items through and display them*/

li:nth-child(-n+3) {

    display: block;

}

Copy the code

8. Use SVG for ICONS

There is no reason not to use SVG for ICONS:

logo {

    background: url("logo.svg");

}

Copy the code

SVG scales well for all resolution types and supports regression to IE9 for all browsers. This avoids.png,.jpg, or.gif files.

9. Optimize display text

Sometimes fonts don’t work best on all devices, so let the device browser help you:

html {

    -moz-osx-font-smoothing: grayscale;

    -webkit-font-smoothing: antialiased;

    text-rendering: optimizeLegibility;

}

Copy the code

Note: Please use optimizeLegibility responsibly. In addition, IE/Edge doesn’t have text-rendering support.

10. Use max-height for pure CSS sliders

Use max-height and overflow hiding to implement CSS-only sliders:

slider ul {

    max-height: 0;

    overflow: hidden;

}



slider:hover ul {

    max-height: 1000px;

    transition:.3s ease;

}

Copy the code

Inherit box-sizing

Box-sizing inherits HTML:

html {

    box-sizing: border-box;

}



*,

*:before.

*:after {

    box-sizing: inherit;

}

Copy the code

This makes it easier to change box-sizing in plugins or other components of the lever’s other behavior.

12. Table cells are equally wide

Tables are cumbersome to work with, so be sure to use table-layout:fixed to keep cells the same width:

calendar {

    table-layout: fixed;

}

Copy the code

Get rid of margin hacks with Flexbox

When column separators are needed, you can get rid of NTH -, first-, and last-child hacks with flexbox’s space-between property:

list {

    display: flex;

    justify-content: space-between;

}



list.person {

    flex-basis: 23%;

}

Copy the code

The list separator will now appear at evenly spaced positions.

14. Use property pickers for empty links

Display a link when the a element has no text value but the href attribute has a link:

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

    content: attr(href);

}

Copy the code

Quite convenient.

15. Detect the double click of the mouse

HTML, 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: transparent;

    border: 0;

    cursor: pointer;

    position: absolute;

    top: -1px;

    left: 0;

    width: 101%;

    /*Hacky*/

    height: 301%;

    /*Hacky*/

    20.z-index: 3;

}



test span input:focus {

    background: transparent;

    border: 0;

    z-index: 1;

}

Copy the code

16, CSS write triangles

Use border to write triangle code, and IE6 compatible.

/* create an arrow that points up */

div.arrow-up {

    width: 0px;

    height: 0px;

    border-left: 5px solid transparent;

    /* left arrow slant */

    border-right: 5px solid transparent;

    /* right arrow slant */

    border-bottom: 5px solid #2f2f2f;

    /* bottom, add background color here */

    font-size: 0px;

    line-height: 0px;

}



/* create an arrow that points down */

div.arrow-down {

    width: 0px;

    height: 0px;

    border-left: 5px solid transparent;

    border-right: 5px solid transparent;

    border-top: 5px solid #2f2f2f;

    font-size: 0px;

    line-height: 0px;

}



/* create an arrow that points left */

div.arrow-left {

    width: 0px;

    height: 0px;

    border-bottom: 5px solid transparent;

    /* left arrow slant */

    border-top: 5px solid transparent;

    /* right arrow slant */

    border-right: 5px solid #2f2f2f;

    /* bottom, add background color here */

    font-size: 0px;

    line-height: 0px;

}



/* create an arrow that points right */

div.arrow-right {

    width: 0px;

    height: 0px;

    border-bottom: 5px solid transparent;

    /* left arrow slant */

    border-top: 5px solid transparent;

    /* right arrow slant */

    border-left: 5px solid #2f2f2f;

    /* bottom, add background color here */

    font-size: 0px;

    line-height: 0px;

}

Copy the code

17. Use of CSScalc()

Calc () is used like a function to assign dynamic values to elements:

/* basic calc */

.simpleBlock {

    width: calc(100% - 100px);

}

/* calc in calc */

.complexBlock {

    width: calc(100%-50% / 3);

    padding: 5px calc(3% - 2px);

    margin-left: calc(10% + 10px);

}

Copy the code

18. Text gradient

Text gradient effects are very popular and can be easily implemented using CSS:

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(0, 0, 0, 0)), color-stop(50%, rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));

}

Copy the code

19. Disable mouse events

The new pointer-Events feature in CSS allows you to disable mouse events for elements, for example, a link that cannot be clicked if it is set to the following style.

disabled {

    pointer-events: none;

}

Copy the code

20. Obscure text

Simple but very beautiful text blur effect, simple and good-looking!

blur {

    color: transparent;

Text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);

}

Copy the code

About me