A Single Div - たった一つのdivタグでできている作品集
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: