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

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

30 Seconds of CSS

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

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



  • 【CSS】いろんなスタイルのボタンを簡単に実装できる「bttn.css」
  • 軽快なアニメーションのバーガーメニュー「Ember Burger Menu」
  • バーガーメニューなどアニメーションで切り替わるボタンを生成できる「Transformicons」
  • 【JS】簡単な記述でCSSアニメーションを実装できる「AniJS」
  • anime.jsを使用したテキストエフェクト集「Moving Letters」
RELATED POSTS
  • ページをめくるようなエフェクトを実装できる「Page Flip Layout」
  • CSSやHTML5・Twiterカードなどのコードを生成できる「Web Code Tools」
  • SVGでダミー画像を生成できるサービス「Placeholder pics」
  • 様々なホバーエフェクトを実装できる「imagehover.css」
  • Webサイトのページ表示速度を測定できる無料サービスまとめ
  • 背景にスクロールアニメーションを実装できる「Physics-Based Background Scroll Effects」
RECENT POSTS
  • バナー広告デザインの参考にしたいギャラリーサイト8選
  • CSSで作成する吹き出しとデザインのアイデア
  • ロゴ作成が簡単にできるロゴジェネレーター12選【無料・低価格】
  • 長いURLを短くするおすすめの短縮URLサービス8選
PICKUP
  • 無料で使えるおしゃれな英語の筆記体フリーフォント20選
  • CSSで簡単に作れるおしゃれな見出しデザイン20選
  • CSSで実装するボタンデザインとホバーエフェクトのアイデア
  • Photoshopで画像を切り抜くテクニック【初心者向け】