CSS can also be played like this in Chapter 2 of CSS Revealed

I was bored during my fishing. I read this CSS reveal and found that CSS has so many novel uses, so I wanted to record them. The author talks about 47 CSS techniques, all very interesting and clever, I have to sigh, I dare not say I know CSS anymore!

1 Background and border

1.1 Translucent Frame

p {

    margin: 0;

    padding: 0;

   }



   body {

    background: url(./img/background.jpg) no-repeat;

    background-size: cover;

   }



   .content {

    position: relative;

    margin: 100px auto;

    width: 200px;

    height: 200px;

    border: 20px solid hsla(0, 10%, 100%, .5);

    background-color: #fff;

    background-clip: padding-box;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 10px;

   }

      

      <section class="content">

<p> Every suitor yearns for success. Under the traction of success, people can be inspired, spur, work up, to the better goal. </p>

  </section>

Copy the code

Results the following

1.2 Multiple Borders

div {

    width: 100px;

    height: 100px;

    margin: 20px;

    background: yellowgreen;

/ * * / box - shadow method

    box-shadow: 0 0 0 10px # 655,

     0 0 0 15px deeppink,

     0 2px 5px 15px rgba(0, 0, 0, .6);

/* Outline method */

    /* border: 10px solid # 655;

outline: 5px solid deeppink; * /

   }

Copy the code

1.3 Flexible background positioning

Extended syntax scheme for background-position

div {

    height: 100vh;

    background: url(./img/dong.png) no-repeat bottom right #58a;

    background-position: right 20px bottom 20px;

   }

Copy the code

Background – origin scheme

div{

    padding: 20px;

    background: url(./img/dong.png) no-repeat #58a;

    bottom right; 

    background-origin: content-box;

}

       

Copy the code

Calc () solution

div{

    background: url(./img/dong.png) no-repeat #58a;

    background-position: calc(100% - 20px) calc(100% - 10px);

}

Copy the code

1.4 Rounded corners in the frame

div {

    background: tan;

    border-radius: .8em;

    padding: 1em;

    box-shadow: 0 0 0 .6em # 655;

    outline: .6em solid # 655;

   }

Copy the code

1.5 Fringe Background

div {

    height: 100vh;

    background: linear-gradient(#fb3 50%, #58a 50%);

    background-size: 100% 30px;

   }

Copy the code

We can also use the same method to create unequal stripes by adjusting the position of the color label

div {

    height: 100vh;

    background: linear-gradient(#fb3 60%, #58a 60%);

    background-size: 100% 30px;

   }

Copy the code

There’s an easier way

background: linear-gradient(#fb3 30%, #58a 0);

background-size: 100% 30px;

Copy the code

Three colors. Same thing

div {

    height: 100vh;

    background: linear-gradient(# fb3 33.3%,

    #58a 0, # 58A 66.6%, yellowgreen 0);

    background-size: 100% 45px;

   }

Copy the code

Vertical stripes

div {

    height: 100vh;

Background: Linear-gradient (to right, /* or 90deg */

    #fb3 50%, #58a 0);

    background-size: 30px 100%;

   }

Copy the code

The diagonal stripes

div {

    height: 100vh;

    background: repeating-linear-gradient(60deg,

    #fb3, #fb3 15px, #58a 0, #58a 30px);

   }

Copy the code

Same color stripe

div {

    height: 100vh;

    background: #58a;

    background-image: repeating-linear-gradient(30deg,

Hsla (% 0, 0, 100%, 1),

Hsla (% 0, 0, 100%, 1) 15 px.

    transparent 0, transparent 30px);

   }

Copy the code

1.6 Complex background patterns

The grid

div {

    height: 100vh;

    background: #58a;

    background-image:

    linear-gradient(white 2px, transparent 0),

    linear-gradient(90deg, white 2px, transparent 0),

Linear - gradient (hsla (. % 0, 0, 100%, 3) 1 px,

    transparent 0),

Linear - gradient (90 deg, hsla (. % 0, 0, 100%, 3) 1 px,

    transparent 0);

    background-size: 75px 75px, 75px 75px,

    15px 15px, 15px 15px;

   }

Copy the code

Wave point

div {

    height: 100vh;

    background: # 655;

    background-image: radial-gradient(tan 30%, transparent 0),

    radial-gradient(tan 30%, transparent 0);

    background-size: 30px 30px;

    background-position: 0 0, 15px 15px;

   }

Copy the code

The board

div {

    height: 100vh;

    background: #eee;

    background-image: linear-gradient(45deg,

      rgba(0, 0, 0, .25) 25%, transparent 0,

      transparent 75%, rgba(0, 0, 0, .25) 0),

     linear-gradient(45deg,

      rgba(0, 0, 0, .25) 25%, transparent 0,

      transparent 75%, rgba(0, 0, 0, .25) 0);

    background-position: 0 0, 15px 15px;

    background-size: 30px 30px;

   }

Copy the code

1.7 Pseudo-random background

div {

    height: 100vh;

    background: hsl(20, 40%, 90%);

    background-image:

    linear-gradient(90deg, #fb3 11px, transparent 0),

    linear-gradient(90deg, #ab4 23px, transparent 0),

    linear-gradient(90deg, #655 41px, transparent 0);

    background-size: 41px 100%, 61px 100%, 83px 100%;

   }

Copy the code

1.8 Continuous image borders

div {

    height: 30vh;

    padding: 1em;

    border: 16px solid transparent;

    border-image: 16 repeating-linear-gradient(-45deg,

    red 0, red 1em,

    transparent 0, transparent 2em,

    #58a 0, #58a 3em,

    transparent 0, transparent 4em);

   }

Copy the code