[转][城会玩]用 CSS 画个马里奥?box-shadow 的邪道用法~

[转][城会玩]用 CSS 画个马里奥?box-shadow 的邪道用法~

box-shadow 也算常见属性了,原理也挺简单,就是利用 box-shadow 的偏移和着色达到方块儿的效果。
链接:juejin.cn/post/6934898831909715998
作者:zhuzilin

如果要在网页上画一个像素风的小图标,你都有什么思路呢?用 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 肯定又累人又容易出错,所以 NES.css 采用了 SASS 这个预处理器来引入变量、控制流、函数等功能。对于画一个马里奥来说:

@use 'pixelize.scss';

.pixel-mario {
  // 指定好马里奥需要的颜色有哪些
  $mario-colors: (#f81c2f, #65352b, #ffbb8e, #000, #1530ad, #aeaeac, #fef102);
  // 马里奥的每个格子上需要哪个颜色
  $mario: (
    (0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0),
    (0,0,0,0,1,1,1,1,1,1,1,1,1,0,0,0),
    (0,0,0,0,2,2,2,3,3,4,3,0,0,0,0,0),
    (0,0,0,2,3,2,3,3,3,4,3,3,3,0,0,0),
    (0,0,0,2,3,2,2,3,3,3,4,3,3,3,0,0),
    (0,0,0,2,2,3,3,3,3,4,4,4,4,0,0,0),
    (0,0,0,0,0,3,3,3,3,3,3,3,0,0,0,0),
    (0,0,0,0,0,1,5,1,1,5,1,0,0,0,0,0),
    (0,0,0,1,1,1,5,1,1,5,1,1,1,0,0,0),
    (0,0,1,1,1,1,5,5,5,5,1,1,1,1,0,0),
    (0,0,3,3,1,5,7,5,5,7,5,1,3,3,0,0),
    (0,0,3,3,3,5,5,5,5,5,5,3,3,3,0,0),
    (0,0,3,3,5,5,5,5,5,5,5,5,3,3,0,0),
    (0,0,0,0,5,5,5,0,0,5,5,5,0,0,0,0),
    (0,0,0,2,2,2,0,0,0,0,2,2,2,0,0,0),
    (0,0,2,2,2,2,0,0,0,0,2,2,2,2,0,0)
  );
  // 单个格子的大小
  $size: 20px;

  position: relative;
  display: inline-block;
  // 整体的大小
  width: $size * length(nth($mario, 1));
  height: $size * length($mario);

  &::before {
    position: absolute;
    top: -$size;
    left: -$size;
    content: "";
    background: transparent;

    @include pixelize.pixelize($size, $mario, $mario-colors);
  }
}

给不熟悉 SASS 的朋友解释一下,@use 类似 javascript 中的 import,用来引入在其他 .scss 文件中定义的变量呀,函数呀什么的。在具体使用的时候会用 @include 表明是在调用别处定义的函数。这段 SASS 代码中关键的地方就是这个函数调用:

@include pixelize.pixelize($size, $mario, $mario-colors);

在具体看这个函数是在做什么之前,先来看看它的参数以及其他的一些辅助性 CSS 是干什么用的。

画一个像素画需要 3 样东西:大小、图案和颜色。$size$mario$mario-colors 就是对应的这三样的变量。这里有一个语法点,在 SASS 中,所有以 $ 开头的都是变量。$size 表示每个格子有多大;$mario 是一个 2 维数组,用来表示马里奥的像素图的每个位置应该选用第几种颜色,其中 0 表示透明;$mario-color 则是指明 $mario 中的数字对应的什么颜色,例如 1 对应的是 #f81c2f

定义好这三样之后,NES.css 通过构造 ::before 上的 box-shadow 来绘制像素图案。伪元素的父 DOM 只需要设定好整体图案的整体大小就行,这里用了一些 SASS 内部的数组函数,意思上就是宽为 $mario 的行的长度乘格子变长,高为 $mario 的行数乘格子边长:

width: $size * length(nth($mario, 1));
height: $size * length($mario);

这里用到的函数我们会在后面再提到,这里就不赘述了。

伪元素里面,基本就是设定好一些定位信息,然后就是把伪元素的内容设置为空字符串,颜色为透明,从而保证彩色阴影前面没有遮挡。& 也是 SASS 的语法,用于支持 CSS 的嵌套,所以 &::before 相当于 .pixel-mario::before

  &::before {
    position: absolute;
    top: -$size;
    left: -$size;
    content: "";
    background: transparent;

    @include pixelize.pixelize($size, $mario, $mario-colors);
  }

完成这些准备后,我们就要把三个参数传给 pixelize 函数来构造 box-shadow 了。下面来看看 pixelize 里面做了什么:

@mixin pixelize($size, $matrix, $colors, $default-color: null) {
  $ret: "";
  @if ($default-color == null) {
    // 把出现次数最多的颜色作为 default-color
    $matrix-colors: ();
    $counts: ();
    @each $row in $matrix {
      @each $item in $row {
        @if $item != 0 {
          $index: index($matrix-colors, $item);
          @if not $index {
            $matrix-colors: append($matrix-colors, $item);
            $counts: append($counts, 1);
          } @else {
            $count: nth($counts, $index) + 1;
            $counts: set-nth($counts, $index, $count);
          }
        }
      }
    }
    $default-color: nth($colors, nth($matrix-colors, index($counts, max($counts...))));
  }
  // 根据位置拼接 box-shadow 中的位移和颜色
  @for $i from 1 through length($matrix) {
    $row: nth($matrix, $i);

    @for $j from 1 through length($row) {
      $dot: nth($row, $j);
      @if $dot != 0 {
        @if $ret != "" {
          $ret: $ret + ",";
        }
        $color: nth($colors, $dot);
        @if $color == $default-color {
          $ret: $ret + ($j * $size) + " " + ($i * $size);
        } @else {
          $ret: $ret + ($j * $size) + " " + ($i * $size) + " " + $color;
        }
      }
    }
  }

  width: $size;
  height: $size;
  color: $default-color;
  box-shadow: unquote($ret);
}

@mixin 可以理解成 SASS 中的函数,不过不会返回参数,而是会直接根据输入生成内部的 CSS 了。对于不熟悉 SASS 的朋友来说,这个函数可能看着有些晕,其实这里面涉及的就是一些简单的控制流和数组操作,如果翻译成 javascript 的话大致是:

function pixelize(size, matrix, colors, default_color = null) {
  ret = "";
  if (default_color === null) {
    // 把出现次数最多的颜色作为 default_color
    matrix_colors = [];
    counts = [];
    for (row in $matrix) {
      for (item in row) {
        if item != 0 {
          index = matrix_colors.indexOf($item);
          if index == -1 {
            matrix_colors.push(item);
            counts.push(1)
          } else {
            count = counts[index] + 1;
            counts[index] = count;
          }
        }
      }
    }
    default_color = colors[matrix_colors[counts.indexOf(Math.max(...counts))]];
  }
  // 根据位置拼接 box-shadow 中的位移和颜色
  for (i = 1; i <= matrix.length; i++) {
    row = matrix[i];
    for (j = 1; j <= row.length; j++) {
      dot = row[j];
      if dot != 0 {
        if ret != "" {
          ret = ret + ",";
        }
        color = colors[dot];
        if color == default_color {
          ret = ret + (j * size) + " " + (i * size);
        } else {
          ret = ret + (j * $size) + " " + (i * size) + " " + color;
        }
      }
    }
  }

  return `width: ${size};
          height: ${size};
          color: ${default_color};
          box-shadow: ${ret};`
}

两段代码一对应,很容易看出 SASS 中的函数的意思,例如 nth(a, k) 其实就是 a[k]pixelize 其实就是根据传入的图案数组和颜色,循环计算出每一块儿阴影对应的 CSS,再拼接成最后的 box-shadow 属性。

有了这些 CSS 后,在网页中用这样的方式就可以加入图标了:

<i class="pixel-mario"></i>

掌握了上面这种用法,我们还可以加上鼠标悬浮时的 CSS,也就是在 hover 的时候用不同的像素画,甚至还能做出动画效果:

(如果对这个小动画感兴趣,可以看这里~)

到这里本文就结束了~ 如果觉得这个用法有趣的话,不妨点个赞哦~

css
讨论数量: 1

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!