Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "what is css doodle in Web". In the operation of actual cases, many people will encounter such a dilemma. Then let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

It is common to use some patterns as background patterns in Web, which is usually done through pictures in the early days. Until some new features of CSS become more mature and stable, some complex and beautiful Web patterns will be made through the related technologies of CSS, such as the gradient properties of CSS with background-size and so on, which will be used in background-image. With the continuous innovation of front-end technology, not long ago I saw a component that generates Web images:-- Web components that draw patterns using CSS!

What is css-doodle?

This is a very powerful Web component. When you see it for the first time, you will think it is very magical and powerful. As for why? If you spend the rest of the day reading, you will know why. What is

Is a Web component. It is based on ShadowDOMV1 and CustomElementsV1. This component can help you easily create any pattern you want (CSS pattern) using CustomElements, ShadowDOM and CSSGrid. The created patterns can be applied to Web pages.

When you see CustomElements, ShadowDOM and CSSGrid, you will be aware that browsers can support these things. In fact, your concern is normal, because the component so far only works on the latest Chrome and Safari browsers. If you want to use it in other browsers, you need the relevant Polyfilling.

How to use css-doodle

This component generates a series of div-built CSSGrid through its internal rules (pure CSS). You can use CSS to easily manipulate these div (cells, each div is a cell) to generate patterns. The resulting pattern can be either static or dynamic. The limitations are limited to the limitations of CSS itself.

Start using

Using components to create patterns is easy, of course, if you know something about API and how to use it. Here's a look at how to use this component in your project.

There are two ways to use a component, the first is a more primitive way, which is to introduce the JS and CSS files needed for the component in your HTML file. The easiest way is to reference cdnjs directly.

This is the end of the content of "what is css doodle in Web". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.