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」
