What is CSS?

Cascading style sheets (CSS) is a style sheet language used to describe the style of documents written in a markup language such as HTML. CSS is one of the major technologies of the World Wide Web, along with HTML and JavaScript.

CSS is designed to achieve the separation of style and content, including layout, colors, and fonts. This separation improves the accessibility of content, provides more flexibility and control in the specification of style features, enables multiple pages to share styles by specifying related CSS in a separate.css file, and reduces the complexity and repeatability of structured content.

1. Typing effect

Do you know? You can actually use zero JavaScript to create typing effects.

Click the display code 👇 
<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
    <style>
      .wrapper {
        height: 100vh;
        /*This part is important for centering*/
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .typing-demo {
        width: 22ch;
        animation: typing 2s steps(22), blink 0.5 s 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; }}</style>
  </head>
  <body>
    <div class="wrapper">
      <div class="typing-demo">This is a typing demonstration.</div>
    </div>
  </body>
</html>
Copy the code

2. Add a shadow to the non-transparent area of the picture

When using a transparent image, you can use the drop-shadow() filter function to create a shadow on the content of the image instead of using the box-shadow attribute to create a rectangular shadow behind the entire box of the element: filter: drop-shadow(2px 4px 8px #585858);

Click the display code 👇 
<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
    <style>
      .wrapper {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .mr-2 {
        margin-right: 2em;
      }

      .mb-1 {
        margin-bottom: 1em;
      }

      .text-center {
        text-align: center;
      }

      .box-shadow {
        box-shadow: 2px 4px 8px # 585858;
      }

      .drop-shadow {
        filter: drop-shadow(2px 4px 8px # 585858);
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="mr-2">
        <div class="mb-1 text-center">box-shadow</div>

        <img
          class="box-shadow"
          src="https://markodenic.com/man_working.png"
          alt="Image with box-shadow"
        />
      </div>

      <div>
        <div class="mb-1 text-center">drop-shadow</div>

        <img
          class="drop-shadow"
          src="https://markodenic.com/man_working.png"
          alt="Image with drop-shadow"
        />
      </div>
    </div>
  </body>
</html>
Copy the code

3. Smooth roll

You don’t need JavaScript for smooth scrolling, just a single line of CSS.

Click the display code 👇 
/* If you like it, you must like it. * /<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
    <style>
      html {
        scroll-behavior: smooth;
      }

      nav {
        position: fixed;
        left: calc(50vw - 115px);
        top: 0;
        width: 200px;
        text-align: center;
        padding: 15px;
        background: #fff;
        box-shadow: 0 2px 5px 1px rgba(0.0.0.0.2);
      }

      nav .link {
        padding: 5px;
        color: white;
      }

      .section {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 5em;
        text-shadow: 0px 2px 0px #b2a98f.0px 4px 3px rgba(0.0.0.0.15),
          0px 8px 1px rgba(0.0.0.0.1);
      }

      .bg-red {
        background: #de5448;
      }

      .bg-blue {
        background: #4267b2;
      }

      .bg-green {
        background: #4caf50;
      }
    </style>
  </head>
  <body>
    <nav>
      Scroll to:
      <a href="#sectionA" class="link bg-red">A</a>
      <a href="#sectionB" class="link bg-blue">B</a>
      <a href="#sectionC" class="link bg-green">C</a>
    </nav>

    <div class="wrapper">
      <div id="sectionA" class="section bg-red">A</div>
      <div id="sectionB" class="section bg-blue">B</div>
      <div id="sectionC" class="section bg-green">C</div>
    </div>
  </body>
</html>
Copy the code

4. The cursor

Do you know how to use your own image, or even an emoji, as a cursor?

Click the display code 👇 
/* If you like it, you must like it. * /<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
    <style>
      .wrapper {
        display: flex;
        height: 100vh;
        align-items: center;
        justify-content: center;
        background: #4776e6;
        background: -webkit-linear-gradient(to right, #4776e6.#8e54e9);
        background: linear-gradient(to right, #4776e6.#8e54e9);
        padding: 0 10px;
      }

      .tile {
        width: 200px;
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #de5448;
        margin-right: 10px;
        color: #fff;
        font-size: 1.4 em;
        text-align: center;
      }

      .tile--image-cursor {
        background-color: #1da1f2;
        cursor: url(https://picsum.photos/20/20), auto;
      }

      .tile--emoji-cursor {
        background-color: #4267b2;
        cursor: url("data:image/svg+xml; utf8,
        
          < text y =' 50% '🚀 < / text > < / SVG >"
        ),
          auto;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="tile">Default</div>
      <div class="tile tile--image-cursor">Image Cursor</div>
      <div class="tile tile--emoji-cursor">Emoji Cursor</div>
    </div>
  </body>
</html>
Copy the code

5. Keep a certain number of lines of text and omit the rest

You can use the “-webkit-line-clamp” attribute to truncate text to a specific number of lines. The point where the text is clipped will display an ellipsis.

Click the display code 👇 
<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
    <style>
      body {
        padding: 20px;
        font-family: "Open Sans", sans-serif;
      }

      .tile {
        background: linear-gradient(to right, #2b32b2.#1488cc);
        padding: 15px;
        margin-bottom: 15px;
        padding: 15px;
        width: 300px;
        color: #fff;
      }

      .line-clamp {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3; /* Change this line if you want. In this case it trimmed the text to 3 lines. */
        overflow: hidden;
      }

      .line-clamp--four {
        -webkit-line-clamp: 4; /* Trimmed the second tile to four lines. */
      }
    </style>
  </head>
  <body>Keep 3 lines of text<div class="tile">
      <p class="line-clamp">You can use<code>-webkit-line-clamp</code>Property to truncate text to a specific number of lines. The screen 3 lines are incomplete and will display the ellipsis. Like the students must point to like, forward, collect ah! Like the students must point to like, forward, collect ah!</p>
    </div>Keep 4 lines of text<div class="tile">
      <p class="line-clamp line-clamp--four">You can use<code>-webkit-line-clamp</code>Property to truncate text to a specific number of lines. Line 4 of the screen is incomplete and will show ellipses. Like the students must point to like, forward, collect ah! Like the students must point to like, forward, collect ah!</p>
    </div>Full text display<div class="tile">
      <p>You can use<code>-webkit-line-clamp</code>Property to truncate text to a specific number of lines. Line 4 of the screen is incomplete and will show ellipses. Like the students must point to like, forward, collect ah! Like the students must point to like, forward, collect ah!</p>
    </div>
  </body>
</html>

Copy the code

6. ::selectionCSS pseudo-elements

:: Selection CSS pseudo-elements can be used to customize the style of the selected content.

Click the display code 👇 
<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
    <style>
      .wrapper {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      p {
        font-size: 2rem;
        font-family: sans-serif;
      }

      .custom-highlighting::selection {
        background-color: #8e44ad;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div>
        <p>This is highlighted by default. Mouse select try.</p>
        <p class="custom-highlighting">This is custom highlighting. Mouse select try.</p>
      </div>
    </div>
  </body>
</html>
Copy the code

7. Everything is scalable

Did you know that any element can be resized like a

Click the display code 👇 
<! DOCTYPEhtml>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Document</title>
    <style>
      div {
        border: 2px solid;
        padding: 10px 40px;
        width: 300px;
        /* Core code */
        resize: both;
        overflow: auto;
      }
    </style>
  </head>
  <body>
    <p><b>Note:</b>Firefox, Safari, and Chrome are compatible with the resize property.</p>
    <div>The resizing attribute specifies whether an element is resizable by the user.</div>
  </body>
</html>
Copy the code

8. CSS mode box

You can use the: Target pseudo-class to create a zero JavaScript mode.

Click the display code 👇 
<! DOCTYPEhtml>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Document</title>
    <style>
      .wrapper {
        height: 100vh;
        /* This part is important for centering the content */
        display: flex;
        align-items: center;
        justify-content: center;
        /* End center */
        background: -webkit-linear-gradient(to right, #834d9b.#d04ed6);
        background: linear-gradient(to right, #834d9b.#d04ed6);
      }

      .wrapper a {
        display: inline-block;
        text-decoration: none;
        padding: 15px;
        background-color: #fff;
        border-radius: 3px;
        text-transform: uppercase;
        color: # 585858;
        font-family: "Roboto", sans-serif;
      }

      .modal {
        visibility: hidden;
        opacity: 0;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(77.77.77.0.7);
        transition: all 0.4 s;
      }

      .modal:target {
        visibility: visible;
        opacity: 1;
      }

      .modal__content {
        border-radius: 4px;
        position: relative;
        width: 500px;
        max-width: 90%;
        background: #fff;
        padding: 1em 2em;
      }

      .modal__footer {
        text-align: right;
      }
      .modal__close {
        position: absolute;
        top: 10px;
        right: 10px;
        color: # 585858;
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <a href="#demo-modal">Open the mode box</a>
    </div>

    <div id="demo-modal" class="modal">
      <div class="modal__content">
        <h1>The CSS implements a modal box</h1>
        <p>You can use the: Target pseudo-class to create a modal box with zero JavaScript. Hurry to play together!</p>
        <div class="modal__footer">
          Made with <i class="fa fa-heart"></i>, by
          <a href="https://juejin.cn/user/958429872534056/posts" target="_blank"
            >@gyx_ The killer is not very calm </a ></div>
        <a href="#" class="modal__close">&times;</a>
      </div>
    </div>
  </body>
</html>
Copy the code

9. You can create custom style scrollbars

Click the display code 👇 
<! DOCTYPEhtml>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Document</title>
    <style>
      .wrapper {
        height: 100vh;
        /*This part is important for centering*/
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .mr-1 {
        margin-right: 1em;
      }

      .tile {
        overflow: auto;
        display: inline-block;
        background-color: #ccc;
        height: 200px;
        width: 180px;
      }

      .tile--custom-scrollbar::-webkit-scrollbar {
        width: 12px;
        background-color: #eff1f5;
      }

      .tile--custom-scrollbar::-webkit-scrollbar-track {
        border-radius: 3px;
        background-color: transparent;
      }

      .tile--custom-scrollbar::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background-color: # 515769;
        border: 2px solid #eff1f5;
      }

      .tile-content {
        padding: 20px;
        height: 500px;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div>
        <div class="tile mr-1">
          <div class="tile-content">Default scroll bar</div>
        </div>
        <div class="tile tile--custom-scrollbar">
          <div class="tile-content">Custom scrollbars</div>
        </div>
      </div>
    </div>
  </body>
</html>
Copy the code

10. Position: sticky top effect

You can use two rows of CSS to achieve the top effect of the navigation bar.

Click the display code 👇 
<! DOCTYPEhtml>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Document</title>
    <style>
      .section {
        font-size: 1.4 em;
        letter-spacing: 0.05 em;
        line-height: 1.5 em;
      }

      .section h2..section h3 {
        text-align: center;
        margin: 0;
        font-weight: normal;
      }

      .section__header {
        position: sticky;
        top: 0;
        padding: 1em;
        color: #a99160;
        background: # 171717;
      }

      .section__content {
        padding: 1em;
        display: flex;
        justify-content: center;
      }

      .section__content > div {
        max-width: 992px;
      }
    </style>
  </head>
  <body>
    <section class="section">
      <div class="section__header">
        <h2>Chapter 1 Navigation bar</h2>
      </div>
      <div class="section__content">
        <div>
          <h3>Chapter 1</h3>
          <p>The element is located according to the normal document flow, and then relative to its nearest scrolling ancestor and containing block, Includes the table-related element, offset based on the values of top, right, bottom, and left. The offset value does not affect the position of any other elements.</p>
          <p>This value always creates a new stacking context. Note that a sticky element is "pinned" to its nearest ancestor with a "scroll mechanism" (when that ancestor's overflow is hidden, Scroll, auto, or overlay), even if that ancestor is not the closest true scroll ancestor. This effectively discourges any "sticky" behavior (see the Github issue on W3C CSSWG for details).</p>
        </div>
      </div>
    </section>
    <section class="section">
      <div class="section__header">
        <h2>Chapter 2 Navigation bar</h2>
      </div>
      <div class="section__content">
        <div>
          <h3>Chapter 2</h3>
          <p>The element is located according to the normal document flow, and then relative to its nearest scrolling ancestor and containing block, Includes the table-related element, offset based on the values of top, right, bottom, and left. The offset value does not affect the position of any other elements.</p>
          <p>This value always creates a new stacking context. Note that a sticky element is "pinned" to its nearest ancestor with a "scroll mechanism" (when that ancestor's overflow is hidden, Scroll, auto, or overlay), even if that ancestor is not the closest true scroll ancestor. This effectively discourges any "sticky" behavior (see the Github issue on W3C CSSWG for details).</p>
        </div>
      </div>
    </section>
    <section class="section">
      <div class="section__header">
        <h2>Chapter 3 Navigation bar</h2>
      </div>
      <div class="section__content">
        <div>
          <h3>Chapter 3</h3>
          <p>The element is located according to the normal document flow, and then relative to its nearest scrolling ancestor and containing block, Includes the table-related element, offset based on the values of top, right, bottom, and left. The offset value does not affect the position of any other elements.</p>
          <p>This value always creates a new stacking context. Note that a sticky element is "pinned" to its nearest ancestor with a "scroll mechanism" (when that ancestor's overflow is hidden, Scroll, auto, or overlay), even if that ancestor is not the closest true scroll ancestor. This effectively discourges any "sticky" behavior (see the Github issue on W3C CSSWG for details).</p>
        </div>
      </div>
    </section>
    <section class="section">
      <div class="section__header">
        <h2>Chapter 4 Navigation bar</h2>
      </div>
      <div class="section__content">
        <div>
          <h3>Chapter 4</h3>
          <p>The element is located according to the normal document flow, and then relative to its nearest scrolling ancestor and containing block, Includes the table-related element, offset based on the values of top, right, bottom, and left. The offset value does not affect the position of any other elements.</p>
          <p>This value always creates a new stacking context. Note that a sticky element is "pinned" to its nearest ancestor with a "scroll mechanism" (when that ancestor's overflow is hidden, Scroll, auto, or overlay), even if that ancestor is not the closest true scroll ancestor. This effectively discourges any "sticky" behavior (see the Github issue on W3C CSSWG for details).</p>
        </div>
      </div>
    </section>
  </body>
</html>
Copy the code

11. CSS Scroll capture to optimize the scroll experience

You can control the scroll-type value for a good scrolling experience:

This may have to experience in person, scroll the mouse, can feel the effect!

Click the display code 👇 
<! DOCTYPEhtml>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Document</title>
    <style>
      body {
        margin: 0;
        padding: 0;
      }

      .wrapper {
        height: 100vh;
        overflow: auto;
        scroll-snap-type: y mandatory;
      }

      .section {
        scroll-snap-align: center;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #de5448;
        color: #fff;
        font-size: 3em;
      }

      .bg-blue {
        background: #4267b2;
      }

      .bg-green {
        background: #4caf50;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="section">Content 1</div>
      <div class="section bg-blue">Content 2</div>
      <div class="section bg-green">Content 3</div>
      <div class="section">Content 4</div>
      <div class="section bg-blue">Content 5</div>
    </div>
  </body>
</html>
Copy the code

12. CSS dynamic text prompt

Use the attr() CSS function to create dynamic csS-only text prompts.

Click the display code 👇 
<! DOCTYPEhtml>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Document</title>
    <style>
      body {
        padding: 20px;
      }

      .tooltip {
        position: relative;
        border-bottom: 1px dotted black;
      }

      /* Tooltip box */
      .tooltip:before {
        content: attr(data-tooltip);
        position: absolute;
        width: 100px;
        background-color: #062b45;
        color: #fff;
        text-align: center;
        padding: 10px;
        line-height: 1.2;
        border-radius: 6px;
        z-index: 1;
        opacity: 0;
        transition: opacity 0.6 s;
        bottom: 125%;
        left: 50%;
        margin-left: -60px;
        font-size: 0.75 em;
        visibility: hidden;
      }

      /* Tooltip arrow */
      .tooltip:after {
        content: "";
        position: absolute;
        bottom: 75%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        opacity: 0;
        transition: opacity 0.6 s;
        border-color: #062b45 transparent transparent transparent;
        visibility: hidden;
      }

      .tooltip:hover:before,
      .tooltip:hover:after {
        opacity: 1;
        visibility: visible;
      }
    </style>
  </head>
  <body>
    <h1>HTML/CSS text prompts</h1>
    <p>The mouse moving<span class="tooltip" data-tooltip="This is a text prompt.">< span style = "max-width: 100%; clear: both;</p>
    <p>You can also move in<span class="tooltip" data-tooltip="Here's another text tip."
        >Here </span > displays another text prompt.</p>
  </body>
</html>
Copy the code

13. Enter the color of the cursor

You can change the color of the text input box cursor.

Click the display code 👇 
<! DOCTYPEhtml>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Document</title>
    <style>
      input {
        caret-color: red;
      }
    </style>
  </head>
  <body>
    <input type="text" />
  </body>
</html>
Copy the code

14. ::in-range 和 ::out-of-rangepseudo-classes

Use the ::in-range and ::out-of-range pseudo-classes to set the style of input whose current value exceeds the range limits specified by the min and Max attributes.

Click the display code 👇 
<! DOCTYPEhtml>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Document</title>
    <style>
      input:in-range {
        background-color: rgba(0.255.0.0.25);
        border: 1px solid green;
      }

      input:out-of-range {
        background-color: rgba(255.0.0.0.25);
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <form>
      <label for="one">Enter a number between 1 and 10</label>
      <input type="number" id="one" name="one" min="1" max="10" />
      <br />
      <label for="two">Enter a number between 1 and 10</label>
      <input type="number" id="two" name="two" min="1" max="10" />
    </form>
  </body>
</html>
Copy the code

15. Fancy writing

Use the background-clip property to create a nice title.

Click the display code 👇 
<! DOCTYPEhtml>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Document</title>
    <style>
      h1 {
        background: blue url("https://picsum.photos/id/1015/200/300");
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        margin-top: 20px;
        font-size: 120px;
      }

      @media (max-width: 600px) {
        h1 {
          font-size: 45px; }}</style>
  </head>
  <body>
    <h1>Reveal the CSS</h1>
  </body>
</html>
Copy the code

Code can be copied to the editor to run directly oh ~ 😘

Related to recommend

  • Little-known HTML tips 🔥
  • Little-known JavaScript tips 🔥

Refer to the article

  • CSS Tips