经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » CSS » 查看文章
发现了一个膨胀样式的css库
来源:cnblogs  作者:前端web3  时间:2024/5/31 17:50:48  对本文有异议

众所周知,对于前端来说css是最难的了,如果你遇到了一个脑洞大奇思妙想的产品,那就更难了。

很不巧,了不起就经受过这样的痛苦,产品经理看了HarmonyOS4的发布会,脑子一热就让设计师出了一套膨胀蓬松的UI

了不起经过调研,查找了上百个样式组件库,终于找到了一款合适的样式库——clay.css

clay.css

clay.css是一种可扩展和可配置的微 CSS util 类,它具有膨胀蓬松的 3D 元素,与通常的扁平设计相比,看起来很迷人,并引入了更具活力的外观。

 

特点

Clay.css支持自定义主题,允许开发者轻松地改变颜色、字体和其他视觉元素,只需调整源代码中的变量,就可以生成新的CSS文件。

  • 快速原型制作:如果你需要快速创建网页原型,Clay.css的预定义组件可以节省大量的时间和精力。
  • 简单易用:Clay.css 的API直观,学习曲线平缓,使新用户也能快速上手。
  • 可定制性:通过Sass和模块化结构,Clay.css鼓励高度定制,以满足特定需求。

安装

Clay.css有三种使用方式

方法一:cdn引入

<link
  rel="stylesheet"
  href="https://unpkg.com/claymorphism-css/dist/clay.css"
/>

 

方法二:NPM 安装 直接使用npm进行下载

npm i claymorphism-css

 

*方法三:下载css 文件 直接下载clay.css文件把他放到项目里

使用

<div class="clay">
  Fluffy ipsum dolor sit amet consectetur...
</div>

 

这是一个最小的单类 CSS 实用程序,仅应用基本的 claymorphism 样式

这个 CSS 类允许通过 CSS 属性轻松更改样式。

<div class="clay card">
  Fluffy ipsum dolor sit amet consectetur...
</div>

.card{
  /* Modify clay.css properties */
  --clay-background: #f76d6d;
  --clay-border-radius: 48px;

  /* Extended styles */
  color: #f1f1f1;
  padding: 48px;
}

Clay.css是一个非常强大的样式库,还有很多有趣的属性和使用方式,如果你的项目中需要用到这样风格的样式,可以尝试一下使用它

原文链接:https://www.cnblogs.com/frontendweb3/p/18225037

 友情链接:直通硅谷  点职佳