webclips

レスポンシブ対応の画像を生成してくれる「Responsive Image Breakpoints Generator」

WebDesign
Webサービスレスポンシブ

2016/03/28

レスポンシブデザインのメインヴィジュアルで使用するような画像を設定したブレイクポイント毎に最適化し生成してくれる「Responsive Image Breakpoints Generator」。画像のリサイズならphotoShopなどで、ちゃっちゃとやった方が早いと思いますが、仕組みを理解するという意味では面白いサービスです。

Responsive Image Breakpoints Generator

↓サイズ毎のイメージも確認でき、HTML5のソースも表示されます。

Responsive Image Breakpoints Generator

PickUp

様々なスニペットがまとめられたサイト「LittleSnippets.net」
【jQuery】チルトホバーエフェクトを実装できる「Tilt.js」
陽炎のようなエフェクトを実装できる「Animated Heat Distortion Effects with WebGL」
【jQuery】画像をハーフトーンに変換するプラグイン「Breathing Halftone」
動きのあるバブルを背景に設定することができる「bubbly-bg」
【jQuery】サイドバーをスライドで表示できるSimple Sidebar