CSSでスマートフォンなどデバイスのモックアップを実装できる「Devices.css」
スマートフォンやタブレット・PCまで様々なデバイスをCSSで表現したライブラリ「Devices.css」を紹介します。iPhone・iPad・AppleWatch・MacBookからGoogle Pixel・Surfaceまで簡単に実装することができます。
Devices.css
iPhoneXでは筐体はCSS、スクリーンは動画を埋め込んで再現しています。アプリの紹介や操作フローなど動画と組み合わせれば効果的に使えそうです。
-
【CSS】CSSだけで作られた簡単に使えるアイコンセット
-
デザインやプレゼンに使えるモックアップ素材サイト「Qeaql」
-
3Dで作れるスマホのモックアップツール「Threed.io」
-
CSSでクールなグリッチエフェクトを実装できる「CSS Glitch Effect」
-
ギザギザボーダーを作れるジェネレーター「CSS Jagged Border Generator」
RELATED POSTS
【jQuery】ページ移動時にアニメーション効果をつけられるAnimsition
【CSS】CSSアニメーションを簡単に作成できる「Animista」
魅力的なチルトホバーエフェクトを実装できる「Tilt Hover Effects」
非レスポンシブの要素をレスポンシブ化する「Reframe.js」
指定したWebサイトが他国でどのように表示されるかチェックできる「GeoScreenshot」
【jQuery】レスポンシブ・フレキシブルなモーダルウィンドウ「iziModal.js」
