CSSでスマートフォンなどデバイスのモックアップを実装できる「Devices.css」

 
スマートフォンやタブレット・PCまで様々なデバイスをCSSで表現したライブラリ「Devices.css」を紹介します。iPhone・iPad・AppleWatch・MacBookからGoogle Pixel・Surfaceまで簡単に実装することができます。

Devices.css


iPhoneXでは筐体はCSS、スクリーンは動画を埋め込んで再現しています。アプリの紹介や操作フローなど動画と組み合わせれば効果的に使えそうです。


  • デザインやプレゼンに使えるモックアップ素材サイト「Qeaql」
  • 画像をアップするだけでブラウザイメージを生成できる「Browser Frame」
  • CSSで指定できるカーソルをパッと確認できる「CSS Cursor」
  • CSSアニメーション制作に役立つライブラリ・ツール14選
  • ギザギザボーダーを作れるジェネレーター「CSS Jagged Border Generator」
RELATED POSTS
  • コピペで使えるCSSアニメジェネレーター「WAIT! Animate」
  • レスポンシブのチェックに役立つサービス「Resizer」
  • 【jQuery】要素を3D回転させるプラグインTURNBOX.js
  • 入力フォームを実装するためのテンプレート「Boilerform」
  • 【jQuery】いろんなエフェクトの背景画像カルーセル「Crosscover」
  • Web制作に役立つ素材をダウンロードできる「Freebies.ByPeople」
RECENT POSTS
  • 配色を決める時に役立つカラーパレット22選
  • 無料で使えるハロウィンデザイン・イラスト素材サイト
  • ロゴデザインの参考になるロゴギャラリーサイト16選
  • バナー広告デザインの参考にしたいギャラリーサイト8選
PICKUP
  • 無料で使えるおしゃれな英語の筆記体フリーフォント20選
  • WordPressのおすすめテーマ19選【無料版・有料版】
  • CSSで実装するボタンデザインとホバーエフェクトのアイデア
  • CSSで作成する吹き出しとデザインのアイデア