Mario écrit en CSS? Brisé avec succès l'ombre de la boîte ~

Dessiner Mario avec CSS? L'usage maléfique de box-shadow ~

Si vous souhaitez dessiner une petite icône en forme de pixel sur une page Web, quelles idées avez-vous? Par CanvasYe Hao, Ye Hao a fait du svg seul, se sentant d'une certaine manière. Et si la méthode est limitée uniquement au CSS? Peut-être avez-vous pensé, avec box-shadowsera en mesure de terminer cette tâche.

box-shadowPermettez- moi de vous présenter des amis qui ne sont pas familiers avec CSS. Mon travail consiste à ajouter des effets d'ombre au DOM. Selon MDN, c'est:

La propriété CSS box-shadow est utilisée pour ajouter un effet d'ombre au cadre de l'élément. Vous pouvez définir plusieurs effets d'ombre sur le même élément et les séparer par des virgules. Les valeurs qui peuvent être définies pour cet attribut incluent le décalage de l'axe X, le décalage de l'axe Y, le rayon de flou, le rayon de diffusion et la couleur de l'ombre. —— Documentation MDN

De manière générale, l' box-shadowombre responsable est le petit rôle de soutien qui se charge de mettre en valeur la vue de face, cette fois nous l'inviterons au front pour être le protagoniste. Cette transformation ne nécessite que 3 étapes:

• Fixez le DOM frontal comme un carré, de sorte que chaque ombre devienne également un carré (exemple1 dans la figure ci-dessous);
• Définissez le décalage de la partie d'ombre sur un multiple entier de la longueur du côté de premier plan, et la partie d'ombre peut être affichée complètement (exemple2 dans la figure ci-dessous);
• Dessinez des ombres de différentes couleurs à différentes positions de décalage selon les besoins, et vous pouvez concevoir des graphiques complexes comme des carreaux de sol (exemple3 dans la figure ci-dessous);

De cette façon, nous pouvons utiliser box-shadowpour dessiner un pixel art.

En fait, c'est exactement ce que fait le fameux NES.css sur github . Voici quelques icônes de pixels fournies dans NES.css:

NES.css est de voir comment utiliser box-shadowpour réaliser ces beaux pixel art, j'ai mis le code associé pour simplifier tiré dans le Zhuzilin / PIXEL.css . Parce que ce genre d'utilisation maléfique nous oblige à peindre (écrire x, y et couleur) un par un, pour les graphiques complexes ci-dessus, il est certainement fatiguant et sujet aux erreurs d'écrire directement du CSS, donc NES.css utilise SASS. introduire des variables, contrôler le flux, les fonctions et autres fonctions Pour dessiner un Mario:

@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);
  }
}

Pour ne pas familier avec les amis SASS expliquer, @usesimilaire en javascript import, utilisé pour introduire d'autres .scssvariables définies dans le fichier ah, ah quelle fonction. Lorsqu'ils sont utilisés, ils utiliseront @includeindique que l'appel est une fonction définie ailleurs. L'endroit clé dans ce code SASS est cet appel de fonction:

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

Avant de regarder en détail ce que fait cette fonction, jetons un coup d'œil à ses paramètres et à l'utilisation des autres CSS auxiliaires.

Pour dessiner une peinture au pixel, il faut 3 choses: la taille, le motif et la couleur. $size, $marioEt $mario-colorsque ces trois variables correspondent. Il y a un point de grammaire, dans SASS, tout au $début de toutes les variables. $sizeChaque réseau représente combien; $marioest un tableau à 2 dimensions, utilisé pour représenter chaque position de pixel de la figure Mario doit appliquer les premières couleurs, où 0 indique la transparence; $mario-colorest spécifié $mariodans le nombre correspondant à quelle couleur, par exemple, 1le Oui correspondant #f81c2f.

Après ces trois bien définis, NES.css en construisant ::beforesur box-shadowpour dessiner le motif de pixels. Les éléments factices du DOM parent n'ont besoin que de définir la taille globale de la bonne ligne de motif global, ici un certain nombre de l'intérieur des fonctions du tableau SASS, ce qui signifie qu'une largeur de $mariola longueur de la ligne par la grille devient longue, une hauteur de $mariole nombre de lignes multiplié par la longueur du côté du treillis:

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

Les fonctions utilisées ici seront mentionnées plus tard, je n'entrerai donc pas dans les détails ici.

Dans le pseudo élément, certaines informations de positionnement sont fondamentalement définies, puis le contenu du pseudo élément est défini sur une chaîne vide et la couleur est transparente, afin de garantir qu'il n'y a pas d'occlusion devant l'ombre colorée. &SASS est la syntaxe du support CSS imbriqué, c'est &::beforeéquivalent .pixel-mario::before.

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

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

Après ces préparatifs, nous prenons trois paramètres passés au pixelizefonctionnement pour se construire box-shadow. Voici un aperçu de pixelizece qui a été fait:

@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);
}

@mixinCela peut être compris comme une fonction dans SASS, mais il ne retournera pas de paramètres, mais générera directement du CSS interne en fonction de l'entrée. Pour les amis qui ne sont pas familiers avec SASS, cette fonction peut sembler un peu étourdie. En fait, elle implique quelques opérations simples de flux de contrôle et de tableau. Si elle est traduite en javascript, c'est à peu près:

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};`
}

A deux codes correspondent, SASS est facile de voir la signification d'une fonction, par exemple, en nth(a, k)fait a[k]. pixelizeEn fait, le motif est le tableau et la couleur passés, chaque cycle calcule l'ombre correspondante ensemble, CSS, puis épissé dans les box-shadowpropriétés finales .

Avec ces CSS, vous pouvez ajouter des icônes dans la page Web de cette manière:

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

Après avoir maîtrisé l'utilisation ci-dessus, nous pouvons également ajouter du CSS lorsque la souris survole, c'est-à-dire utiliser différentes peintures de pixels lors du survol, et même créer des effets d'animation:

(Si cette petite animation vous intéresse, vous pouvez la regarder ici ~)

Ceci est la fin de cet article ~ Si vous trouvez cette utilisation intéressante, vous pourriez aussi bien lui donner un coup de pouce ~

 

Enfin, si vous avez besoin de ces matériaux, vous pouvez cliquer ici pour les obtenir