When it comes to CSS-doodle, it goes back to the fifth CSS conference, which was yuan Chuan’s debut in the CSS conference.
Yuan Chuan bosses when speech PPT: yuanchuan dev/talk/genera…
PPT source address: github.com/yuanchuan/t…
The fifth CSS conference of China highlights: www.yuque.com/cssconf/5th…
👇 Below is the scene of the scene:
What exactly is CSS-doodle, you might ask?
A Web Component for drawing Patterns with CSS (A Web component that draws patterns using CSS) Css-doodle is built using Shadow DOM V1 and Custom Elements V1.
Css-doodle makes it easy to create any pattern you want (CSS pattern) using Custom Elements, Shadow DOM, and CSS Grid.
Note: The CSS-doodle component so far only works on the latest Chrome and Safari browsers.
Css-doodle.com
In fact, I’ve only recently noticed CSS-Doodle, and I think THE creation of CSS-Doodle really blows my mind. In order to make it easy for people like me to learn and understand it, I developed a vscode plug-in: VScode-CSS-doodle
Github address: github.com/lisiyizu/vs…
The plug-in download address: * * * * marketplace.visualstudio.com/items?itemN…
Here’s how vscode-CSS-doodle works:
- Collected 99 cases of CSS-Doodle
- Css-doodle Hover prompt (click to select keyword: hover prompt)
- Css-doodle autocomplete prompt (enter: @)
- Css-doodle Live Preview (MAC: Command + Shift + P, select CSS-doodle: Preview)
1. Collected 99 cases of CSS-Doodle (as shown in the picture below)
2. Css-doodle Hover prompt (click to select keyword: hover prompt)
3. Css-doodle autocomplete prompt (enter: @)
4. Css-doodle Live Preview (MAC: Command + Shift + P, select CSS-doodle: Preview)
If you think it is ok, welcome to like it, thank you.
The resources
codepen.io/yuanchuan
Codepen. IO/search/pens…
observablehq.com/@yuanchuan/…