単一の div_html/css_WEB-ITnose に基づく CSS 描画

原文: Single Div Drawings with CSS

翻訳: CSS drawing based on a single div

翻訳者: Front-end external Journal Review

翻訳注: この記事を読んで、テクノロジーとアートの組み合わせを強く感じました！著者のこの一文が気に入っています。「利用可能なオプションを制限すると、すでに持っているツールを再評価する必要があります。」

なぜ 1 つの Div だけを使用するのでしょうか?

2013 年 5 月、私は CSSConf に出席し、境界半径に関する Lea Verou のスピーチを見ました。このプロパティは非常に目立たないと思われるかもしれません。しかし、この講演により、CSS には私が理解していなかった動作が他にもたくさんあるという事実に気づきました。美大生だった頃のことを思い出すと、自分が選んだ媒体の専門家になるよう私を駆り立てることができます。 Web デザイナーとして、CSS は私にとって媒体であるため、できることはすべて学び、その限界を探求します。

なぜ 1 つの Div だけなのでしょうか?

私が絵を習っていたとき、授業で赤、黄、青の三原色を使って他の色のスペクトルを作る実験もしたことを思い出します。この実験の目的は色の特性について学ぶことですが、この制限は混合の力についても教えてくれます。もちろん緑色のペンを購入することもできますが、青と黄色を使って緑色を作ることもできます。選択肢を制限すると、すでに手元にあるツールを再評価することになります。

CSS 描画を使用してプロジェクトを開始することにしました。しばらくして、CSS のみを使用して描画した新しいものを思いつきます。より大きな課題に取り組み、CSS の可能性を探求するために、私は自分自身に制限を設定し、Div を使用しました。 (Div を追加するために) 単に緑色のペンを購入するのではなく、目的を達成するために CSS プロパティを可能な限り組み合わせるだけです。

ツールボックス

Div とブラウザーでサポートされている CSS プロパティでは、利用できるツールが少なすぎるようです。しかし、問題はどれだけのものを使っているかではなく、自分が使っているものについてどう考えるかであることがわかりました。

疑似要素

CSS には疑似クラスがあるため、Div は 1 つしかありませんが、実際には 3 つの要素を使用できます。したがって、div、div:before、div:after を使用すると、次のことができます。

div { background: red; }div:before { background: yellow; }div:after { background: blue; }

これら 3 つの要素を並べて 3 つの積層レイヤーにできることは容易に想像できます。私の頭の中では、次のようになります。

シェイプ

CSS と 1 つの要素を使用して、作成できる基本的なシェイプが 3 つあります。 width プロパティと height プロパティを使用して正方形/長方形を作成し、border-radius を使用して円/楕円を作成し、border を使用して三角形/台形を作成します。

CSS を使用して他のグラフィックを作成することもできますが、それらのほとんどは、これらの基本的なグラフィックを組み合わせるだけで実現できます。これらのシンプルなグラフィックは、作成も変更も最も簡単です。

複数の同一形状

オーバーレイボックスシャドウを使用すると、異なるサイズ、色、ぼかし効果を持つ複数の同一形状を作成できます。これらの形状を X 軸または Y 軸上で移動できるため、ほぼ無限の形状を描画できます。

div {    box-shadow: 170px 0 10px yellow,                330px 0 0 -20px blue,                330px 5px 5px -20px black;}

box-shadow に box-shadow を追加することもできます。宣言される順序に注意してください。繰り返しますが、レイヤーとして理解する方が簡単です。

グラデーション

グラデーションを使用すると、光源を与えることで光と影の効果を作成でき、単純な平面グラフィックスをよりリアルに見せることができます。複数の背景画像を組み合わせることで、多くのグラデーション レイヤーを使用して、より複雑な光と影、さらにはより多くのグラフィックスを実現できます。

div {    background-image: linear-gradient(to right, gray, white, gray, black);}div:after {    background-image: radial-gradient(circle, yellow 50%, transparent 50%), linear-gradient(to right, blue, red); }

ビジョン

ビジョンは最も難しい部分であり、これらの形状をどのようにつなぎ合わせて知覚可能な図面にするかです。絵を描く技術にますます集中するようになると、視覚的な発見のステップが重要になりました。これを行うために、私は被写体に関連する画像をじっと見つめ、目に見える部分に切り取ることがよくあります。それらはすべて形と色です。画像全体をいくつかの小さな色付きの図形またはブロックに縮小し、CSS を使用してそれらを実装する方法を (一般的に) 知っていました。

例

2 つの図面を詳しく見て、それらを異なるブロックに分割して 1 つの大きな形状に結合する方法を学びましょう。 1つ目は緑色のクレヨンです。

クレヨンは、長方形の本体と三角形の先端という 2 つの基本的な形状で構成されます。

本物のクレヨンの感触を捉えるために、次のポイントを実装する必要がありました:

紙のパッケージに異なる色

パッケージに印刷された形状と文字

クレヨンが丸いことを示すストライプ

光と暗い効果、ヒント 丸いクレヨンと光源

まず、div と背景色を使用してクレヨンの本体部分を作成し、上から下にグラデーションを付け、ボックスシャドウを使用して立体感を出しました。

div {    background: #237449;    background-image: linear-gradient(to bottom,                                  transparent 62%,                                  black(.3) 100%);    box-shadow: 2px 2px 3px black(.3);}

次に、左を使用して、右の線形グラデーションを使用して紙パッケージを作成します。アルファ値は .6 なので、前のグラデーションが透けて表示されます。

div {    background-image: linear-gradient(to right,                                  transparent 12px,                                  rgba(41,237,133,.6) 12px,                                  rgba(41,237,133,.6) 235px,                                  transparent 235px);}

接下来，我继续使用同样的方式，从左到右渐变，制作蜡笔上的条纹。

div {    background-image: linear-gradient(to right,                                  transparent 25px,                                  black(.6) 25px,                                  black(.6) 30px,                                  transparent 30px,                                  transparent 35px,                                  black(.6) 35px,                                  black(.6) 40px,                                  transparent 40px,                                  transparent 210px,                                  black(.6) 210px,                                  black(.6) 215px,                                  transparent 215px,                                  transparent 220px,                                  black(.6) 220px,                                  black(.6) 225px,                                  transparent 225px);}

纸包装上印刷的椭圆，使用一个 radial-gradient 轻松搞定！

div {    background-image: radial-gradient(ellipse at top,                                  black(.6) 50px,                                  transparent 54px);}

我刚才单独展示了各个部分，不过别忘了 background-image 看起来是这样的：

div {                      // ellipse printed on wrapper    background-image: radial-gradient(ellipse at top,                                  black(.6) 50px,                                  transparent 54px),                      // printed stripes                      linear-gradient(to right,                                  transparent 25px,                                  black(.6) 25px,                                  black(.6) 30px,                                  transparent 30px,                                  transparent 35px,                                  black(.6) 35px,                                  black(.6) 40px,                                  transparent 40px,                                  transparent 210px,                                  black(.6) 210px,                                  black(.6) 215px,                                  transparent 215px,                                  transparent 220px,                                  black(.6) 220px,                                  black(.6) 225px,                                  transparent 225px),                      // wrapper                      linear-gradient(to right,                                  transparent 12px,                                  rgba(41,237,133,.6) 12px,                                  rgba(41,237,133,.6) 235px,                                  transparent 235px),                      // crayon body shading                      linear-gradient(to bottom,                                  transparent 62%,                                  black(.3) 100%)}

完成了 div，我们把注意力转移到 :before 伪类元素上，创建蜡笔的笔头。使用实心和透明的边框，我制作了一个三角形，把它和我之前绘制的 div 放到一起。

div:before {    height: 10px;    border-right: 48px solid #237449;    border-bottom: 13px solid transparent;    border-top: 13px solid transparent;}

比起蜡笔笔杆，笔头看起来有点平，我们可以使用 :after 伪类元素来修复这个问题。我添加一个从顶部到底部的 linear-gradient，制作了一个反光效果，贯穿整只蜡笔。

div:after {    background-image: linear-gradient(to bottom,                                    white(0) 12px,                                    white(.2) 17px,                                    white(.2) 19px,                                    white(0) 24px);}

这给那个扁平的三角形添加更多的层次感，更加真实。制作接近尾声，我给 :after 添加一些文字，定位，使得看起来像是印刷在蜡笔包装上的一样。

div:after {    content: 'green';    font-family: Arial, sans-serif;    font-size: 12px;    font-weight: bold;    color: black(.3);    text-align: right;    padding-right: 47px;    padding-top: 17px;}

大功告成！

另外一个实例

蜡笔作为一个不错的例子，很好地展示了如何使用 background-image 和 gradient 来产生真实的效果。下面这个例子将展示多个 box-shadow 的强大之处：单 div 的照相机。

这是照相机的主体部分，使用 background-image 和 border-image 制作的。

下面是一张 gif，展示 :before 伪类元素（黑色的那个矩形），以及使用它的 box-shadow 创建出来的很多照相机的细节部分。

div:before {    background: #333;    box-shadow: 0 0 0 2px #eee,                -1px -1px 1px 3px #333,                -95px 6px 0 0 #ccc,                30px 3px 0 12px #ccc,                -18px 37px 0 46px #ccc,                -96px -6px 0 -6px #555,                -96px -9px 0 -6px #ddd,                -155px -10px 1px 3px #888,                -165px -10px 1px 3px #999,                -170px -10px 1px 3px #666,                -162px -8px 0 5px #555,                85px -4px 1px -3px #ccc,                79px -4px 1px -3px #888,                82px 1px 0 -4px #555;}

类似的，下面是 :after（灰色的圆）以及使用它的 box-shadow 制作的几个细节部分。

div:after {    background: linear-gradient(45deg, #ccc 40%, #ddd 100%);    border-radius: 50%;    box-shadow: 0 3px 2px #999,                1px -2px 0 white,                -1px -3px 2px #555,                0 0 0 15px #c2c2c2,                0 -2px 0 15px white,                -2px -5px 1px 17px #666,                0 10px 10px 15px black(.3),                -90px -51px 1px -43px #aaa,                -90px -50px 1px -40px #888,                -90px -51px 0 -34px #ccc,                -90px -50px 0 -30px #aaa,                -90px -48px 1px -28px black(.2),                -124px -73px 1px -48px #eee,                -125px -72px 0 -46px #666,                -85px -73px 1px -48px #eee,                -86px -72px 0 -46px #666,                42px -82px 1px -48px #eee,                41px -81px 0 -46px #777,                67px -73px 1px -48px #eee,                66px -72px 0 -46px #666,                -46px -86px 1px -45px #444,                -44px -87px 0 -38px #333,                -44px -86px 0 -37px #ccc,                -44px -85px 0 -34px #999,                14px -89px 1px -48px #eee,                12px -84px 1px -48px #999,                23px -85px 0 -47px #444,                23px -87px 0 -46px #888;}

有点疯狂？不过你看到了吧， 多个 box-shadow 确实可以给使用单个 div 绘图添加很多细节部分。

最大的挑战

我碰到了两个最大的挑战，三角形的限制和 gradient 独特的行为。

三角形的问题

因为三角形是使用 border 创建的，这极大地限制了我对它的利用。使用 border-image 给 border 添加gradient，不能单独添加其中一边。无法给 border 创建出来的三角形添加 box-shadow，因为 box-shadow 是添加在盒模型上的。因此要创建多个三角形就会很困难。看起来就是下面这样：

div {    border-left: 80px solid transparent;    border-right: 80px solid transparent;    border-bottom: 80px solid red;}div:before {    border-left: 80px solid transparent;    border-right: 80px solid transparent;    border-bottom: 80px solid red;    border-image: linear-gradient(to right, red, blue);}div:after {    border-left: 80px solid transparent;    border-right: 80px solid transparent;    border-bottom: 80px solid red;    box-shadow: 5px 5px 5px gray;}

多层渐变

渐变的行为就是会填满整个 background。在堆叠多个 gradient 的时候就显得很讲技巧。需要花费额外的时间思考透明度、z-index这些事，还要搞清楚什么要可见，什么不要。不过若能有效地使用 gradient，我们的绘图可以包含很多令人惊叹的细节。

Tardis 就是一个很好的例子，显示或隐藏渐变，创建了一张细节极强的图片。下图显示的是绘制的中间过程，可以看到数个从顶部到底部的渐变，宽度填满整个容器。

使用从左到右和从右到左的 gradient，我可以遮住一部分渐变，同时把其他部分渐变显示出来。

最终的结果看上去包含了很多图形来构成 Tardis 的前面，但实际上它就是层叠的 linear-gradient。很多时候不得不伪造呀。

动态地查看它们

源于这个项目，有一个非常酷非常有用的好东西突然出现，那就是 Rafael Carício（@rafaelcaricio） 开发的名为CSS Gradient Inspector 的 Chrome 浏览器插件。这个开发工具可以探测且可以开关元素上的每一个 gradient，看起来就像开关一个个层。（它在日常项目中也非常有用。）

我希望设计师和开发者使用动画或者 JavaScript 的功能来做类似的尝试，或者对这些绘画做一些变形。你可以到http://div.justjavac.com 或者 GitHub 上把玩一下这些 CSS。