用CSS写出来的马里奥?成功把box-shadow玩坏了~

本文介绍了如何利用CSS的box-shadow属性创造性地绘制像素风格的马里奥图标,详细解析了 NES.css 框架中的实现原理,包括使用SASS预处理器进行变量和函数管理,以及通过调整box-shadow的偏移量和颜色来构建复杂的像素图案。通过这种方式,可以实现像素画、图标以及动画效果。
摘要由CSDN通过智能技术生成

用 CSS 画个马里奥?box-shadow 的邪道用法~

如果要在网页上画一个像素风的小图标,你都有什么思路呢?用 Canvas 也好,单独制作 svg 也好,感觉办法有的是。那如果把方法限定在只能用 CSS 呢?可能你没想过,用 box-shadow 就能完成这个任务。

给不熟悉 CSS 的朋友介绍一下,box-shadow 的本职工作是给 DOM 加阴影效果,按照 MDN 的话说,就是:

CSS box-shadow 属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果,并用逗号将他们分隔开。该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。—— MDN 文档

一般来说,box-shadow 负责的阴影是负责凸显前方的视图的小配角,这次我们要把它请到前面来做主角。这样的变身只需要 3 步:

  • 把前面的 DOM 固定为正方形,这样每一块阴影也相应变成正方形(下图 example1);
  • 把阴影部分的偏移量设置为前景边长的整数倍,阴影部分就可以完整地显示了(下图 example2);
  • 按照需要在不同的偏移位置画上不同颜色的阴影,就可以像铺地砖一样设计出复杂的图形了(下图 example3);

通过这种方法,我们就可以用 box-shadow 来绘制像素画了。

事实上,github 上很有名的 NES.css,就是这么做的。下面就是 NES.css 中提供的一些像素图标:

为了看看 NES.css 是怎么用 box-shadow 来实现这些可爱的像素画的,我把相关的代码简化后抽离在了 zhuzilin/PIXEL.css。因为这种邪道用法需要我们一个格子一个格子地去涂色(写 x、y 和颜色),对于上面这样的复杂图形,直接写 CSS 肯定又累人又容易出错,所以 NE

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值