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

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

そんなCSS3の作品例としてPureCSS Laceを紹介します。まるで絵画のようなCSS作品です。

PureCSS Laceの使い方

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

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

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

拡大しても綺麗です。

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

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

PureCSS Lace

cyanharlow/purecss-lace: HTML/CSS drawing inspired by Flemish baroque oil portraits. Hand-coded entirely in HTML & CSS.

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2