[CSS] Blending Modeを利用したロゴの作成

CSS3BlendingMode

複数のオブジェクトを重なるように表示するCSS3の「mix-blend-mode」を使ったロゴの作成方法が解説されています。

ソースはあまり綺麗ではありませんが、spanで1文字ずつ囲ってそれぞれをずらして配置。spanにmix-blend-mode: multiply;の属性を指定するだけと簡単。

リンク先からソースがダウンロードできるので、それを参考にして、文字を替えるだけですぐに利用することができます。

[js] HTML5でシンプルな動的グラフが作れる「Chart.js」

HTML5のcanvas要素を使って、ページに動的なグラフを貼り付けることができるオープンソースのJavascript。

CSSだけで描写されているシンプソンズのキャラクター達。
著作権があるのでバンバン使うってわけにはいきませんが、スゴイです。

ちゃんと瞬きもします。

グラディエーションやチェックなどの背景を、画像を使わずにCSSのコードだけで再現するサンプルコードがCSS Gradients with background-blend-modeで、配布されています。

ブロードバンド時代になりあまり重視されなくなったサイトの容量ですが、画像を背景にする場合と比べて十分の一以上容量を削減することができます。

画像ファイルを一切使用せず、CSSだけでロード時のアニメーションアイコンを表示するサンプル。出来合いのアニメgifを使うのが最も楽ですが、1から自分で作る手間を考えると、この手段もなかなかお手軽ではないでしょうか？