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

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

Devices.css


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

  • CSSでインスタグラムのようなフィルターを再現できる「Instagram.css」
  • SVGの背景パターンを手軽に作れるジェネレーター「SVG Backgrounds」
  • anime.jsを使用したテキストエフェクト集「Moving Letters」
  • CSSで指定できるカーソルをパッと確認できる「CSS Cursor」
  • フリーで使用できるモックアップをまとめたサイト「Mockup World」
RELATED POSTS
  • Web制作に役立つ素材をダウンロードできる「Freebies.ByPeople」
  • Youtubeのヘッダー・フッターを消す「PrettyEmbed.js」
  • スライドアニメーションで展開するグリッドメニュー「Expanding Grid Menu」
  • 様々なスニペットがまとめられたサイト「LittleSnippets.net」
  • 【CSS】色々と使える疑似クラス:nth-child()の実用例
  • 【jQuery】ロールオーバー時にテキストをシャッフルさせる「chaffle.js」
POPULAR POSTS
  • 【無料】漢字が使える日本語フリーフォント59選
  • 似たフォントを探したい!フォントを調べる時に役に立つツール・サイト10選
  • 無料で使える日本語・英語のかわいいフリーフォント20選
  • 無料で使えるおしゃれな英語の筆記体フリーフォント20選
  • 画像の人物を自動で切り抜きしてくれるWebサービス「remove.bg」
RECENT POSTS
  • 無料で使用できるポップなフリーイラスト「illlustrations」
  • 宮崎県小林市が提供するお肉のフリー素材サイト「oniku images」
  • CSSでよく使うレイアウト・パターンをまとめたサイト「CSS Layout」
  • Neumorphismを簡単に作れるジェネレーター「Neumorphism.io」
  • マルチカラーグラデーションのコードをコピーできる「gradienta」