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

2014年7月31日

CSS3BlendingMode

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

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

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

[js] クリックするとぼわーーんとエフェクトする「Waves」

2014年7月22日

ボタンやアイコンをクリックすると、ぼわーーんと気持ちの良いエフェクトが出せる「Waves」。導入も簡単なので、ブログやWebのちょっとした味付けにいいかもしれません。

サポートしているブラウザは、Firefox, Chrome, Safari, IE10以降。

2014年7月17日

何重にもループした高架道路のような、何て言うのかよく分からない模様の画像が簡単に作成できるWebサービスの「Loopalo」。

作成した画像はsvg形式でダウンロードして、画像素材として使う事ができます。

Source: Loopalo

2014年7月11日

ブラウザの表示画面に伴って異なる画像ファイルを表示させるjs「Picturefill」。

2014年7月9日

「GifLinks」は、gifアニメへのリンクにマウスカーソルを持っていくと、ブラウザの表示画面全体にgifアニメが表示されるjsライブラリ。

なかなか面白いですね。
ただ、あまり重いgifアニメは使わないように注意しないと、訪問者に嫌われちゃうかもしれません。