Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

1 Change the cursor color of the input box

MDN: caret – color attribute is used to define the color of the insertion cursor (caret), said the insertion cursor here, is that can be in the editor area of the website, used to indicate where the user input will be inserted into the specific of the flash is shaped like a vertical bar |.

For example, let’s set the cursor to blue

input{

caret-color:blue;
}

Copy the code

Two lines of code prohibit the user from selecting text

  user-select: none;

Copy the code

3 Effect of content selection

I’m going to set the color of the text to green

.div::selection {
  background-color: green;
  color: #fff;
}
Copy the code

4 The best three lines of code to center

display: flex;
          align-items: center;
          justify-content: center;

Copy the code

Example:

 .father{
      width: 200px;
      height: 200px;
      border: solid #000 2px;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  .child{
      width: 50px;
      height: 50px;
      border: solid red 2px;
  }
Copy the code

5 Smooth scrolling

scroll-behavior: smooth;
Copy the code

6 Users can adjust the size of elements

 resize: both;

Copy the code

Note: Resize does nothing except set the overflow property to a value other than visible, which is the default for most elements.

 .father{
          width: 200px;
          height: 200px;
          border: solid #000 2px;
          display: flex;
          align-items: center;
          justify-content: center;
          resize: both;
          overflow: auto;

      }
Copy the code

7 Picture as cursor

cursor: url(), auto;

Copy the code

8 Typewriter Effects

.container {
        height: 500px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .typing {
        width: 220px;
        animation: typing 2s steps(8), blink 0.5s step-end infinite alternate;
        white-space: nowrap;
        overflow: hidden;
        border-right: 3px solid;
        font-family: monospace;
        font-size: 2em;
      }

      @keyframes typing {
        from {
          width: 0;
        }
      }

      @keyframes blink {
        50% {
          border-color: transparent;
        }
      }

Copy the code
<div class="container"> <div class="typing"> I use typewriter effects </div> </div>Copy the code