30秒以内に理解できるCSSスニペットのコレクション「30 Seconds of CSS」

 
30秒以内に理解できる有用なCSSスニペットのコレクション「30 Seconds of CSS」を紹介します。レイアウト・アニメーション・インタラクティビティ・その他とカテゴライズされ、それぞれシンプルなコードで表示されます。

30 Seconds of CSS

目的のスニペットをクリックするとHTML・CSSのシンプルな記述とプレビュー(DEMO)が表示されます。また英語ですが簡単な説明も記載されているので短時間でどのようなスニペットか理解することができます。

スニペット数は少ないようですが、基本的なコードから実用性の高いコードまで分かりやすくまとめてあるので、自分に合ったスニペットがあるかどうかチェックしてみてはいかがでしょうか。


  • 軽快なアニメーションのバーガーメニュー「Ember Burger Menu」
  • イメージを見ながら学べるCSS GRIDのチートシート「GRID」
  • CSSで出力できるドット絵ジェネレーター「Pixel Art to CSS」
  • ブロックのアニメーションエフェクトが美しい「Block Reveal Effects」
  • CSSで指定できるカーソルをパッと確認できる「CSS Cursor」
RELATED POSTS
  • 【Webデザイン】魅力的な動きをするレスポンシブメニュー
  • UIデザインのスニペットがまとめられたサイト「CodeMyUI」
  • 指定したWebサイトが他国でどのように表示されるかチェックできる「GeoScreenshot」
  • 様々なスニペットがまとめられたサイト「LittleSnippets.net」
  • 【jQuery】画像をハーフトーンに変換するプラグイン「Breathing Halftone」
  • 世界の国旗をCSSとdivのみで実装する「CSS Flags」
RECENT POSTS
  • 背景や区切り線などを簡単に装飾できるCSSライブラリ「pattern.css」
  • セクションの区切りをデザインできる「CSS Section Separator Generator」
  • 動画やアニメーションgifの背景を自動で消去してくれる「Unscreen」
  • ポップなイラストをダウンロードできる「Download 80 free illustrations」
  • hulu (フールー)で観れるおすすめの海外ドラマ・国内ドラマ【2020年3月版】
  • パーツを組み合わせてイラストを作成できる「Open Peeps」
  • 無料で使用できるポップなフリーイラスト「illlustrations」
  • 宮崎県小林市が提供するお肉のフリー素材サイト「oniku images」