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」
