ITエンジニア/デザイナ向けにオープンソースを毎日紹介

CSS3を駆使することによって、複雑な形であったり、ドローさながらのイラストを描いたりすることができます。画像やSVG、Canvasを使ってもできることですが、あえてCSSだけの縛りを加えることに意味があります。

そんなスタイルシートだけ、さらにたった一つのdivだけという縛りを用いて作られた作品集がA Single Divです。

A Single Divの使い方

A Single Divの作品例です。これがdivタグ一つとは信じがたいですよね。

実際の形としては次のようになっています。divが二つなのは複数の作品がある関係上です。

<div id="ecto-1" class="entry">
  <div></div>
</div>

そしてCSSの設定は次のようになります。恐ろしい呪文のような設定です。

#ecto-1 div {
  width: 250px;
  height: 130px;
  margin-left: -128px;
  margin-top: -68px;
  background-color: #feb81c;
  background-image: linear-gradient(210deg, #feb81c, #ff991d);
  border-radius: 5px;
  border: 3px solid #191970;
  box-shadow: 0 4px 0 rgba(0,0,0,0.2), 0 -3px 0 rgba(255,255,255,0.6), 0 0 0 6px #feb81c, 0 5px 0 6px rgba(0,0,0,0.13), inset 2px 0 #ff991d, inset -2px 0 #feb81c, inset 0 5px 0 rgba(0,0,0,0.2), inset 0 -3px 0 rgba(255,255,255,0.5);
}
#ecto-1 div:before,
#ecto-1 div:after {
  width: 250px;
  text-align: center;
  font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', 'Trebuchet MS', Impact, 'Roboto', sans-serif;
  font-weight: bold;
  color: #191970;
}
#ecto-1 div:before {
  padding-top: 20px;
  height: 110px;
  background-image: linear-gradient(to bottom, rgba(255,255,255,0.5) 50%, #191970 50%), linear-gradient(to right, #191970, #191970);
  background-repeat: no-repeat;
  background-size: 50px 6px, 3px 34px;
  background-position: 100% 90px, 200px 100%;
  content: 'ECTO-1';
  font-size: 68px;
  line-height: 68px;
  text-shadow: 0 -2px 0 rgba(255,255,255,0.7), 0 3px 0 rgba(0,0,0,0.15);
}
#ecto-1 div:after {
  padding-top: 90px;
  height: 40px;
  background-image: radial-gradient(circle at 15px 14px, #999 5px, rgba(0,0,0,0) 5px), radial-gradient(circle at 55px 118px, #888 5px, rgba(0,0,0,0) 5px), radial-gradient(circle at 235px 14px, #999 5px, rgba(0,0,0,0) 5px), radial-gradient(circle at 192px 118px, #888 5px, rgba(0,0,0,0) 5px);
  content: 'NEW YORK';
  font-size: 20px;
  text-shadow: 0 -2px 0 rgba(255,255,255,0.6), 0 2px 0 rgba(0,0,0,0.15);
  letter-spacing: 3px;
}

他の作品です。

こんな作品も。

みんな一つのdivタグでできています。

アニメーション付きのものもあります。

ちょっと著作権的に怖いものも?

国旗やお寿司。

ここまで複雑なものまで…。

A Single Divを見ていると、スタイルシートで描けないものはないのではないかと思ってしまいます。少なくともSVG並のコンテンツが作れてしまうのではないでしょうか。もちろん、メンテナンス性の問題はありそうですが、JavaScriptから色を変えたり、大きさを変えたりするのは簡単そうです。

A Single DivはCSS3製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

2016年08月01日。画像の入れ替え

A Single Div

lynnandtonic/a-single-div: CSS drawings with only one HTML element:

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2