Resource - CSS3

軽量で多機能なモダンCSSフレームワーク・「Teutonic CSS」

Teutonic CSS Teutonic CSSは軽量で多機能なCSSフレームワークです。CSSグリッドやFlesboxに基づいたレイアウトはもちろん、各コンポーネントの提供や豊富なタイポグラフィ、CSS変数の導入によるカスタマイズ...

Webページの任意の要素に設定されたCSSをチェック、コピーできるブラウザ拡張・「CSS Scan」

CSS Scan CSS ScanはWeページの任意の要素のCSSをチェックし、クリップボードにコピーできるブラウザ拡張です。ChromeとFirefox用が用意されていますが、この手のものにしては珍しく有料でgumroadにて3US...

シンプルで使いやすいCSSアニメーションライブラリ・「Hexa」

Hexa Hexaはシンプルで使いやすいCSSによるアニメーションライブラリです。要素に指定のclassを付与するだけでアニメーションを与える事が出来ます。classはhexaを基本に、jumpやrotateなど、分かりやすいキーワー...
Ads

CSSグラデーションのサンプルを公開しているWebサイトをまとめた・「gradient-backgrounds」

gradient-backgrounds gradient-backgroundsはCSSのグラデーションの様々なサンプルを紹介する複数のWebサイトのハブページです。UigradientsやGrabient、Gradient hun...

シンプルな設計の軽量なFlexboxベースCSSフレームワーク・「Flexit」

Flexit Flexitはシンプルな設計の軽量CSSフレームワークです。Flexboxベースとなっています。row、two、columnなど、そのままで意味が通じる命名規則を採用しています。flexboxの為のユーティリティクラ...

CSSのコードと解説を共有できる・「CSS Playground」

CSS Playground CSSのコードと解説を共有できるPlaygroundツールです。左ペインに解説、右ペインにはjsfidleライクなエディタ兼ビューエリアが設置されており、解説を見ながら動作を確認、学習できる、というもの。...

HTML/CSS/JavaScriptで作られた時計のみを収集している・「Clock Shop」

Clock Shop Clock ShopはHTML、CSS、JavaScriptだけでブラウザで動作する様々な時計を収集しているプロジェクトサイトです。Codepenで公開されている時計コンテンツだけを収集、公開しているみたいです。...

350以上あるWebフレンドリーでオープンソースなSVGアイコンセット・「BoxIcons」

BoxIcons BoxIconsはWebフレンドリーなオープンソースのSVGアイコンセットです。350以上のアイコンが用意されています。使い方はfont-awesomeライクでCSSを読み込み、classを付与すればいいだけです。 ...

3つのドットで作れるCSSローディングアイコンをまとめた・「Three Dots」

Three Dots Three Dotsは3つのドットで作れるCSSのローダーをまとめたプロジェクトです。それぞれbeforeとafterを使って作られているので1つの空要素と指定のclassを与えるだけで実装出来ます。色やサイズの...

60という数値を中心に設計された実験的なCSSグリッドシステム・「60GS」

60GS 60GSは60と言う数値を元にCSS Gridベースで設計された軽量なCSSグリッドシステムです。CSS Gridベースで、基本的には以下の1classのみを必須としています。 60列用意したのは、60が2、3、4...

ミニマルなflexboxベースのCSSグリッドシステム・「Katana」

Katana KatanaはミニマルなflexboxベースのCSSグリッドシステムです。calcを使用して軽量化を実現しているみたいです。非圧縮でも1kbほど、.scssなら20行ほどです。clac便利ですねぇ。ライセンスはMITです...

ミニマルで軽量なFlexboxベースのCSSフレームワーク・「Flexy」

Flexy Flexyはミニマルで軽量なFlexboxベースのCSSフレームワークです。圧縮版で0.33KBほどになるとの事。IEにも対応させる場合はflexy-old.cssも読み込むhつ用があるようです。UIコンポーネント等の用意...

超軽量なCSS gridベースのフレームワーク・「Smart CSS Grid」

Smart CSS Grid Smart CSS Gridは超軽量なCSS gridベースのグリッドシステムです。0.5kbでレスポンシブ、ネストも不要でグリッドレイアウトを構築できる、というもの。HTMLも少なくて済むのでスマートな...

Bootstrapベースのスタイルガイド用テンプレート・「Bootstrap Style Guide Boilerplate」

Bootstrap Style Guide Boilerplate Bootstrap Style Guide BoilerplateはBootstrapベースのスタイルガイド用Boilerplateです。スタイルガイド作成の手間を省...

完成形を見ながらインタラクティブにCSSグリッドのコードを生成する・「cssgr.id」

cssgr.id cssgr.idはCSSグリッドのコードをインタラクティブに生成するジェネレーターです。シンプルにそれ以上でも以下でもないものです。生成されるコードは以下のようなものです。 CSSグリッドはコンテナを並...

様々なレイアウトに対応できるよう設計されたflexboxベースのグリッドシステム・「Flexible Grid」

Flexible Grid Flexible Gridは様々なレイアウトでも対応できるよう設計されたflexboxベースのCSSグリッドシステムです。モバイルファーストでレスポンシブ且つ、セマンティックなマークアップにも使用可能でリー...

一通りのUIコンポーネントを揃えた軽量なCSSフレームワーク・「Mustard UI」

Mustard UI Mustard UIはWebサイト等で必要になりそうなUIコンポーネントを一通り取り揃えたCSSフレームワークです。モジュラー式なので必要なコンポーネントのCSSだけ読み込めばいいので軽量で済みます。スタイルはあ...

テキスト入力すると自動でマインドマップを作成できる・「Text2MindMap」

Text2MindMap Text2MindMapはテキスト入力だけでマインドマップを作成してくれるツールです。CSSとJavaScriptで出来ており、インデントすれば子のアイテムを作成します。非常に簡易的なもので、保存はプレーンテ...

Web制作の開発スピード向上を目的とした軽量なCSSライブラリ・「Flat Remix CSS Library」

Flat Remix CSS Library Flat Remix CSS Libraryは開発スピード向上をサポートするCSSライブラリです。基本的な要素のスタイルが施されているので開発に専念できる、みたいな流れを期待したもののよう...

Vue.jsで作れるオープンソースのUIデザインツール・「Vue Design System」

Vue Design System Vue Design SystemはVue.jsベースのUIデザインシステムです。チームで使う事を想定されているようで、使用者がHTML、SCSS、JavaScriptを扱ったWebアプリ開発の基礎...

エキセントリックなエフェクトを付与できるユニークなCSSアニメーションライブラリ・「Woah.css」

Woah.css Woah.cssはエキセントリックなエフェクトを要素に付与できるCSSアニメーションライブラリです。ちょっとネタに近いというか多分ネタだと思う程度には奇抜な動作をします。用途は・・個人的にはなさそうです。ただ、CSS...

FlexboxベースのレスポンシブなWebサイトを構築するプロジェクトの開発をサポートするCSSフレームワーク・「Frow CSS」

Frow CSS Frow CSSはFlexboxベースのRWDなWebサイト構築の開発スピードを上げるためのフレームワークです。様々なグリッドに対応、フォームやユーティリティも揃えられています。npmやBower、CDNも対応、SA...
Ads