どんな背景でも自由に描ける! CSS Paint APIの使い方 - ICS MEDIA

最近のChromeにはCSSの新機能が次々と搭載されています。2017年にはCSS Grid Layoutなどインパクトの大きい新機能が話題になりましたが、他にも有用な新機能があることをご存じでしょうか？ この記事では、CSS Paint APIを紹介します。 CSS Paint APIはグラフィックを描く機能 CSS Paint APIは自由にグラフィックを描ける仕様です。HTML Canvasのようなものを要素の背景画像（background-imageやborder-image）として設定できます。JavaScriptを使って自由にグラフィックを描けるため、従来のCSSで再現の難しかった表現が実現可能になります。 たとえば、次のようなビジュアルを考えてみましょう。四隅の形状が欠けたような表現となっています。従来のCSSではdivタグを複雑に組む必要がありました。 サンプルを別ウインド

[uva]

SVG...

[idr_zz]

Canvas 2Dぽいけどただのdiv要素なので他の要素と組み合わせて使える！今はChromeのみ先行。 どんな背景でも自由に描ける! CSS Paint APIの使い方 - ICS MEDIA

[nismit]

CSS Paint APIの具体的な使い方。コードも付いてるのでちょっと試すにはすごく良い。

[Fushihara]

これもいいけど、いい加減縦横比指定をネイティブでしたいんでレイアウトAPIのはやくリリースして

[damdom]

たのしい

[gabill]

SVGは自由度に限界があるしcanvasは秘伝のタレ化する...と悩んでたのでこれ良さそう。普及すれば...。

[manyhotcakes]

ワーカーで動かせるのはなにか、アイディア次第でばける？

[yasu-log]

描画処理がワークレット側でされるためブラウザ操作の負荷が分散される、装飾の分離によってHTMLの構造を汚さない、がCSS Paint APIのメリット

[hedgehogx]

毎回思うけどwebデザインは製作者の自己満足。ユーザーは情報を得たいだけで、イケてるcssデザインなんかいらないしそれで重くなって離脱する本末転倒。ユーザーの素朴な感情としては阿部寛がベスト。

[tonkotsuboy_com]

まとめで笑った

[nibushibu]

SVGみたいなプロパティ