vscode css提示_lt;css-doodle/gt;让你成为CSS艺术家

2024-05-11 01:56:28

说到css-doodle，那要追回到第五届CSS大会，那是袁川大佬在css大会首秀，属实惊艳。

袁川大佬当时演讲的PPT：https://yuanchuan.dev/talk/generative-art-with-css

PPT源码地址：https://github.com/yuanchuan/talk/tree/gh-pages/generative-art-with-css

中国第五届CSS大会集锦：https://www.yuque.com/cssconf/5th/hyku3f

下面是当时现场的画面：

看到这里，你可能会问css-doodle到底是啥？

官网的一句话是这么介绍 <css-doodle /> ：A web component for drawing patterns with CSS （一个通过CSS绘制图案的Web组件）。css-doodle 是通于Shadow DOM V1和Custom Elements V1来构建的。

css-doodle 可以帮助轻松的使用Custom Elements、Shadow DOM和CSS Grid创建任何你想要的图案（CSS 图案）。

注意：css-doodle组件到目前为止只在最新的Chrome和Safari浏览器上可以正常的运行。

官网地址：https://css-doodle.com

其实我是最近才关注到了css-doodle，我觉得css-doodle的创作有惊艳到了我。为了让更多像我一样的人便于去学习了解它，我自己开发了一款vscode插件：vscode-css-doodle

Github 地址：https://github.com/lisiyizu/vscode-css-doodle

插件下载地址：https://marketplace.visualstudio.com/items?itemName=kummy.vscode-css-doodle

下面介绍一下 vscode-css-doodle 功能：

收集整理了css-doodle的99个案例（）
css-doodle 悬浮提示 (点击选中关键字：悬浮提示)
css-doodle 自动完成提示 (输入：@)
css-doodle 实时预览 (mac: command + shift + p，选择：css-doodle:preview)

1.收集整理了css-doodle的99个案例（如下图所示）

2.css-doodle 悬浮提示 (点击选中关键字：悬浮提示)

3.css-doodle 自动完成提示 (输入：@)

4.css-doodle 实时预览 (mac: command + shift + p，选择：css-doodle:preview)

参考资料

https://codepen.io/yuanchuan

https://codepen.io/search/pens?q=css+doodle

https://observablehq.com/@yuanchuan/stripe-function-in-css-doodle?collection=@yuanchuan/css-doodle

vscode css提示_lt;css-doodle/gt;让你成为CSS艺术家相关推荐

vscode css提示_锋利码农武器之vscode
俗话说,工欲善其事必先利其器,我们码农的器是什么尼?没错,就是我们亲爱的IDE,前端开发者最爱的编辑器应该是vscode了吧.但是我们要怎么去锋利它尼?不外乎就是熟悉它的使用方法.快捷键以及第三方的插 ...
html5 tooltip,HTML5 教程之CSS 提示工具(Tooltip)
CSS 提示工具(Tooltip) 本文我们为大家介绍如何使用 HTML 与 CSS 来创建提示工具. 提示工具在鼠标移动到指定元素后触发,先看以下四个实例: 头部显示右边显示底部显示左边显示 ...
使用 VSCode 编辑器来编译 Sass，自动生成对应的css
1.首先在vscode商店中搜索easysass,然后安装 2.在 VSCode 菜单栏依次点击"文件首选项设置",打开 settings.json 全局配置文件.搜索&quo ...
html+css提示框/弹窗公告实例【记录】
简介 html+css提示框/弹窗公告实例演示实例代码  <div class="web_notice" style=" ...
计算机底纹不起作用,CSS - 背景颜色在IE11中不起作用(CSS - background-color not working in IE11)...
CSS - 背景颜色在IE11中不起作用(CSS - background-color not working in IE11) 我有以下代码: .skills_column { padding: 5 ...
css 设置表格右边有图片_我写CSS常用的方法
在这里想与你分享一个由各大CSS网站总结推荐的20个有用的规则和实践经验集合.有一些是面向CSS初学者的,有一些知识点是进阶型的.希望每个人通过这篇文章都能学到对自己有用的知识. 1.注意外边距折叠 ...
html引入本地css样式无效,vue在index.html里面引入css文件样式加载失败
问题描述我在vue的index.html里面引入本地的第三方CSS文件,浏览器会出现一个提示,同时样式也没有生效问题出现的环境背景及自己尝试过哪些方法网上搜索了一下说是什么拦截器的问题,但没有找 ...
CSS基础知识(表单标签、事件、CSS介绍、选择器、伪类选择器案例、样式、盒子模型、定位)...
一. 表单标签 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
css的几种使用方式有哪些,引入CSS的方式有几种？
CSS可以将样式定义在HTML元素的style属性中,也可以将其定义在HTML文档的header部分,也可以将样式声明在一个专门的CSS文件中,以供HTML页面引用.总之,CSS样式表可以将所有的样式 ...

最新文章

热门文章