PureCSS Lace - CSSだけで絵画のような表現を実現 // MOONGIFT Archived

CSS3を活用すれば高い表現力が実現できます。イラストを描いたりすることだってできます。まるでドローであったり、SVGのような使い方が可能です。もちろん厳密な計算が必要です。そんなCSS3の作品例としてPureCSS Laceを紹介します。まるで絵画のようなCSS作品です。

PureCSS Laceの使い方

こちらがそうです。CSSだけでできているとは思えない出来映えです。

しかしコードを見ればDivタグの山だと分かります。

目の形もCSSで作られています。

拡大しても綺麗です。

PureCSS Laceは名前の通り、レースの表現に重点が置かれています。手前の模様の細かさはもちろんのこと、遠近感を感じさせる表現も素晴らしいです。実用的とはいえませんが、非常に面白い作品です。

PureCSS LaceはCSS製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。