This is the 17th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Hi, I’m Banxia 👴, a sand sculptor who has just started writing. If you like my article, you can follow ➕ like 👍 plus my wechat: FrontendPicker, invite you to join the group, learn to communicate frontend, become a better engineer ~ follow the public number: Banxia words frontend, learn more frontend knowledge! Click me to explore a new world!

preface

When developing a personal blog, always try to be as fancy as possible! The background of the site was originally the same color as nuggets, but was changed to linear-gradient

That’s about it. It looks very comfortable. However, I thought it was still not painting, so I started to Google, all kinds of website design. Finally let me find a artifact!

css-doodle

Translated into Chinese, it means graffiti. Css-doodle is based on Shadow DOM V1 and Custom Elements V1. This is the first time I have seen these two things. I searched several articles and felt that Shadow DOM is similar to function encapsulation in other languages, which encapsulates structural style behavior and separates it from the rest of the page. Custom Elements is a feature that Web Components allows developers to customize tags.

Css-doodle is essentially a div grid generated from CSS.

The installation

There are two official installation methods:

  1. < script SRC = "https://unpkg.com/[email protected]/css-doodle.min.js" > < / script >

  2.  npm install css-doodle
 
 /* import it */
 import 'css-doodle';
Copy the code

usage

Css-doodle is based on the SYNTAX of CSS and provides many other property values of its own. Includes properties, selectors, functions, and JS apis.

The sample

Take this official example:

The custom tag for CSS-doodle is < CSS-doodle >. Click-to-update is the built-in JS method, which knows by reading that when clicked, the doodle will be updated. The style tag can be written directly inside the tag, which is also supported in HTML. Use the built-in attributes in style via :doodle. You can also write CSS native properties.

<css-doodle click-to-updatee>
  <style>
    :doodle {
      @grid: 18 / 100vmax;
      background: #0a0c27;
    }
    --hue: calc(180 + 1.5 * @row * @col);
    background: hsl(var(--hue), 50%, 70%);
    margin: -.5px;
    transition: @r(.5s) ease;
  </style>
</css-doodle>
Copy the code

The detailed steps

  1. Define the < CSS-doodle > element and add a :doodle selector to which we can add various attributes.

    <css-doodle> 
    :doodle {} 
</css-doodle>
Copy the code

  2. Define the grid

    :doodle { 
   @grid: 5x5;     
} 
Copy the code

    You can also define the size of the grid and so on. For example, define width and height

    width: 8em; height: 8em; You can also use @sizeCopy the code

3. Use other built-in methods,

For example, @rand(.1,.9)

You can create a fancy background by setting a simple color with a random zoom in and out of scale.

<css-doodle>
    :doodle {
        @grid: 10x10;
        @size: 100vmax;
        grid-gap: 1px;
    }
   background-color: hsla(@r(360), 85%, @r(70%, 90%), @r(.9));
  transform: scale(@rand(.1,.9));
</css-doodle>
Copy the code

  1. Custom shape

You can also use custom shapes in CSS-doodle.

clip-path: @shape( points: 300; r: cos(4t); ) ;Copy the code

A few simple lines of code are a flower.