ブレンドモードを利用したカラフルなフィルタの為のCSS・「Colofilter.css」
Colofilter.css Colofilter.cssはcssのblend modesを使用したカラフルなフィルタの為のCSSです。mix-blend-modeプロパティを予め設定し、classでフィルタをかけられるようにしたCS...
Resource - CSS3
Flexboxのルールをライブプレビューでテスト、確認出来る・「Test CSS Flexbox Rules Live」
Test CSS Flexbox Rules Live Test CSS Flexbox Rules LiveはFlexboxのルールを学べるツールです。各プロパティの指示でどうレイアウトが変化するかをライブプレビューで確認出来ますの...
Flexboxを使ったCSSグリッドシステム・「Gridlex」
Gridlex GridlexはFlexboxを使ったシンプルなCSSグリッドシステムです。親要素と子要素に特定のclassを追加して利用するみたいです。非常に簡単なものですが、シンプル故にカスタマイズしやすいかも。カラム数は.gri...
CSSで作られた様々なボタンをTumblrで紹介する・「CSS Buttons」
CSS Buttons CSS ButtonsはCSSで作られたボタンを紹介するTumblrです。アニメーションエフェクトのあるボタンはGifアニメで紹介されています。基本的にはCodePenへのリンクも貼られていますのでコードの確認...
flexboxを使ったシンプルでフレキシブルなCSSフレームワーク・「cssPlus」
cssPlus cssPlusはflexboxをベースにして構築されたフレキシブルでシンプルなCSSフレームワークです。各主要ブラウザにも対応しています。迅速で手軽な開発をサポートしたい、との事。ライセンスはMIT。 cssPl...
CSSのA to Zを動画で学べる学習サイト・「A to Z CSS」
A to Z CSS A to Z CSSはデザイナーや開発者が動画でCSSの基本から応用までを学べる学習サイト。本サイトでフロントエンド開発スキルを磨いて欲しいとの事。当然全て英語になっていますが、英語がダメでも動画によっては映像だ...
シンプルでクリーンなモバイルファーストのCSSフレームワーク・「Outline」
Outline OutlineはシンプルでクリーンなCSSフレームワークです。モバイルファースト設計のレスポンシブWebデザイン対応で、tableやタブ、ボタンなどの各UIコンポーネントもひと通り揃えられています。もちろんこれらもRW...
レスポンシブWebデザインに対応している各CSSフレームワークや人気のライブラリの動作テストを手軽に行える・「Codeply」
Codeply CodeplyはBootstrapやFoundationなどのRWDに対応したフレームワークをベースに、jQueryやBackbone.js、Underscore.js、Angular.jsなどのライブラリの動作テスト...
CSSのfilterのコードを、インタラクティブに生成出来るジェネレーター・「CSS Filter Effects」
CSS Filter Effects CSS Filter EffectsはCSS filterのコードを、実際にかかるエフェクトを見ながら生成出来るジェネレーターです。BlurやBrightness、Hue Rotate、Grays...
CSSのみで作られたローディングアニメーションのセット・「Loaders.css」
Loaders.css Loaders.cssはCSSのみで作られたローディングアイコンのセットです。CSSで作られているのでスタイルの変更やスピード調整もしやすく、軽量で済む反面、対応ブラウザも限られるので現状ではスマフォ向けになり...
アニメーションエフェクトのパターンと、その実装コードをコレクションしている・「AniCollection」
AniCollection AniCollectionはよく見かけるアニメーションエフェクトと、そのエフェクトを実装する為のコードをコレクションしているWebサイトです。各エレメントにマウスホバーするとエフェクトを見ることが出来ます。...
SVG製の国旗を手軽に表示出来る・「SassyFlags」
SassyFlags SassyFlagsはSVGで作られた各国の国旗を手軽に表示出来るライブラリです。空要素に指定されたclassを振るだけで国旗を表示する事が出来ます。SVGが使われていますので調整もしやすいですね。国旗はAmaz...
CSSとテキストで作るローディングアニメーション・「Animated Type Loader」
Animated Type Loader Animated Type Loaderはテキストで作られたローディングを実装する為のCSSです。keyframesと:nth-of-typeを使ってspanでラップしたテキストを順番に表示さ...
様々なシーンに対応可能なスマフォ対応のコンテンツスライダー・「Swiper」
Swiper Swiperは様々なシーンに対応可能なコンテンツスライダーです。スライダーのネスト化やカルーセル、3Dな遷移エフェクトなどの設定が可能でスマフォでのフリック操作にも対応しています。また、マウスホイール対応、オートプレイ化...
シングルページ向けに開発されたHTML＆SASSなボイラープレート・「Rin」
Rin Rinはシングルページ向けに開発されたHTML/CSSフレームワークです。ランディングページや名刺サイトのような、所謂ペラサイトの構築と相性良さそうです。英語で書かれてますが開発者さんは日本の方(SANOGRAPHIX.NET...
Googleマテリアルデザインを導入したCSS/JSフレームワーク・「MUI」
MUI MUIはGoogleマテリアルデザインのガイドラインに沿ってデザインされたCSS/JavaScriptフレームワークです。基本的なコンポーネントも揃っていて直ぐに開発を始めることが出来ます。また、ReactJSやWeb Com...
別アイコンにアニメーション付きで切り替える方法をまとめている・「MENU TO CROSS ICON」
MENU TO CROSS ICON MENU TO CROSS ICONは別アイコンにアニメーションエフェクト付きで切り替える方法を紹介しているWebサイトです。SVGやアイコンフォント、ユニコードと、CSS3やJavaScript...
SASSベースのRWD対応CSSフレームワーク・「SPACEBASE」
SPACEBASE SPACEBASEはSASSベースのレスポンシブWebデザイン対応CSSフレームワークです。最低限必要なUIコンポーネントは用意されており、オールドブラウザにも対応しているとの事。しっかり触ってないので何とも言えま...
モバイルファーストで軽量なRWD対応CSSフレームワーク・「TACHYONS」
TACHYONS TACHYONSはモバイルファーストなCSSフレームワークです。モバイル優先のレスポンシブWebデザイン対応サイト向けに開発されており、サイズも軽量になるよう配慮されています。あらゆるデバイスで可能な限りのパフォーマ...
CSSのみで作られたシンプルなアイコンセット・「ICONO」
ICONO ICONOはCSSのみで作られたシンプルなアイコンのセットです。CSS3や擬似クラスを用いて形成されており、エレメントにclassを振るだけでアイコンを表示できるようになっています。SVGもフォントも利用せずに作ったよ！と...
CSS3による様々なマウスホバーアニメーションをまとめたスタイルシート・「Hover.css」
Hover.css Hover.cssはCSS3による様々なホバーアニメーションエフェクトをまとめたスタイルシートです。SASSとLESSにも対応。エレメントやアイコンなどにマウスホバーアニメーションが付けられており、classを振る...
Dribbbleに投稿されたデザインをCodopenで再現、比較している・「Give ’n’ Go」
Give ’n’ Go Give ’n’ GoはDribbbleに投稿されたものとCodepenで再現されたものを比較しているWebギャラリーサイトです。デザイナーの方がDribbbleに投稿したデザインコンセプトと、そのデザインをC...