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

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

Devices.css


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

  • 背景や区切り線などを簡単に装飾できるCSSライブラリ「pattern.css」
  • 様々なスタイルのCSSを簡単に作れる「Generate CSS」
  • CSSやHTML5・Twiterカードなどのコードを生成できる「Web Code Tools」
  • CSSアニメーション制作に役立つライブラリ・ツール14選
  • フリーで使用できるモックアップをまとめたサイト「Mockup World」
RELATED POSTS
  • 指定したWebサイトが他国でどのように表示されるかチェックできる「GeoScreenshot」
  • メニューのホバーエフェクト集「Inspiration for Menu Hover Effects」
  • CSSでインスタグラムのようなフィルターを再現できる「Instagram.css」
  • Youtubeの埋め込み動画をレスポンシブに対応させる方法
  • ブロック要素をドラッグできるグリッドレイアウト「Muuri」
  • CSSでよく使うレイアウト・パターンをまとめたサイト「CSS Layout」
RECENT POSTS
  • 背景や区切り線などを簡単に装飾できるCSSライブラリ「pattern.css」
  • セクションの区切りをデザインできる「CSS Section Separator Generator」
  • 動画やアニメーションgifの背景を自動で消去してくれる「Unscreen」
  • ポップなイラストをダウンロードできる「Download 80 free illustrations」
PICKUP
  • 導入しておきたいWordPressのおすすめプラグイン
  • Photoshopで画像を切り抜くテクニック【初心者向け】
  • 【無料】おすすめのフリー画像・写真素材サイト10選【商用利用可】
  • CSSで簡単に作れるおしゃれな見出しデザイン20選