画像にインスタグラムのようなフィルターを付与できるスタイルシート・「Instagram.css」 Instagram.css Instagram.cssはインスタグラムのようなフィルターを画像に付与できるスタイルシートです。以前ご紹介したCSSフレームワークのSpectre.cssと同じ開発者の方が公開したCSSで、CSSgram...2018.01.05 | 10時36分02秒
CSS Gridを使って六角形のオブジェクトを並べたハニカムなレイアウトを組めるスタイルシート・「Hexi-Flexi-Grid」 Hexi-Flexi-Grid Hexi-Flexi-Gridはハニカム構造のレイアウトを組めるCSSグリッドシステムです。JavaScriptは使われておらず、CSS Gridベース、六角形はclip-pathが使われています。こう...2017.12.24 | 10時12分04秒
LESSベースの軽量でモダンなUIフレームワーク・「Petal」 Petal Petalは軽量でモダンなUIフレームワークです。よく使われるような各種コンポーネントやレイアウト、フォーム回りやユーティリティクラスやアイコン、バッジやカード、アラートなどWebアプリ向けのUIなども用意されており、それ...2017.12.18 | 11時10分31秒
clip-pathで要素を斜めにカットするCSSライブラリ・「Angled edges」 Angled edges Angled edgesは要素を斜めにカットするためのCSSライブラリです。clip-pathを使っています。class付与で上デモのように手軽に斜めにカットできます。斜めにカットしなくちゃいけないシーン...2017.12.16 | 10時23分32秒
CSSのみで実装できる超軽量なツールチップライブラリ・「Microtip」 Microtip MicrotipはCSSのみで実装できる超軽量(圧縮版で1kbだそう)なツールチップライブラリです。aria-label属性で定義したラベルがそのままツールチップとして表示されます。位置はdata-microtip-...2017.11.18 | 11時14分24秒
フレキシブルなclass名を意識して設計されたCSSフレームワーク・「Biomatic UI」 Biomatic UI Biomatic UIはフレキシブルなclass名を意識して設計されたCSSフレームワークです。どういう形が「フレキシブルだ」と感じるかは個人差があると思うので、ここでは柔軟であるかどうかは触れないでおきますが...2017.11.15 | 10時33分33秒
ベーシックなスタイルで軽量、コンポーネントも揃えられたCSSフレームワーク・「chota」 chota chotaはベーシックなスタイルの軽量なCSSフレームワークです。軽量ではあるものの、基本的なコンポーネントの他に要素の位置調整やスマフォ/タブレットでの表示ON/OFF等、よく使うユーティリティやカード、なども揃えられて...2017.11.13 | 10時05分32秒
Bootstrap 4向けのモダンで軽量なUIキット・「Shards」 Shards ShardsはBootstrap 4用のモダンで軽量なUIキットです。ナビゲーションやツールチップ、フォーム周り、モーダルウィンドウやバッヂ、アラート、ボタン、カードなどのコンポーネントが揃えられています。これらのUIの...2017.11.09 | 10時53分38秒
手書き風なゆるいスタイルのCSSフレームワーク・「PaperCSS」 PaperCSS PaperCSSは手書き風のゆるーいスタイルなCSSフレームワークです。フォントにはPatrick Handが使われ、ボーダーも真っすぐな線ではなく、ラジオボタンやチェックボックスも手書きのようなスタイルとなっていま...2017.11.06 | 10時39分13秒
Animate.cssをサポートしてくれるスクリプト・「jquery.animator.js」 jquery.animator.js jquery.animator.jsはAnimate.cssをサポートしてくれるスクリプトです。jQueryに依存します。Animate.css導入の際、使い方をもう少し手軽にしてくれる、というも...2017.11.05 | 10時56分05秒
UI開発速度を上げるために作られたユーティリティファーストなCSSフレームワーク・「Tailwind CSS」 Tailwind CSS Tailwind CSSはUI開発速度を上げるために作られたユーティリティファーストなCSSフレームワークです。BootstrapやFoundation、Bulmaなどのようにテーマやコンポーネントを持ち合わ...2017.11.04 | 10時37分13秒
ラジオボタンとチェックボックスを装飾するためのCSSライブラリ・「pretty checkbox」 pretty checkbox pretty checkboxはチェックボックスやラジオボタンを装飾するためのCSSライブラリです。JavaScriptを使わずCSSのみで実装可能で、CSSによる形状だけでなく、画像やSVG、アイコン...2017.10.31 | 11時14分53秒
CSSによる様々なアニメーションエフェクトを付与できるCSSライブラリ・「Motion CSS」 Motion CSS Motion CSSはCSSによるさまざまなアニメーションエフェクトを要素に付与できるCSSライブラリです。よく見かけるやつですね。class与えればエフェクトが付く。使い方はCSSを読み込むだけみたいな。cla...2017.10.28 | 10時52分08秒
アイコンフォントとCSSをセットにしたツールキット・「Fontisto」 Fontisto Fontistoは沢山の汎用的なアイコンフォントと、そのフォントを活用するためのCSSをセットにしたツールキットです。アイコンはフォントだけでなくPNGも同梱されています。それぞれのアイコンはセットになっているCSS...2017.10.27 | 10時08分24秒
CSSのみで手軽に実装出来るモーダルウィンドウライブラリ・「Light Modal」 Light Modal Light ModalはCSSのみで実装できるモーダルウィンドウライブラリです。エフェクトを追加する場合もJavaScriptを使用せず、Animate.cssを読み込み、任意のclassを付与する事でアニ...2017.10.26 | 10時49分01秒
ユニークなエフェクトを要素に付与できるCSSアニメーションライブラリ・「mimic.css」 mimic.css mimic.cssはユニークなエフェクトを要素に付与できるCSSアニメーションライブラリです。よくあるエフェクトや需要の高そうなエフェクトは先発のライブラリがすでに実装してるので、という事みたいです。どれも使いどこ...2017.10.13 | 11時05分59秒
CSSだけでふわっと浮かぶ上がるツールチップを簡単な設定で実装できるCSSライブラリ・「Balloon.css」 Balloon.css Balloon.cssはCSSのみで設定可能なツールチップライブラリです。カスタムデータ属性を含めるだけで左右上下に自由に出すことができます。ふわっと浮かび上がるシンプルなエフェクト付き。 使い方は、da...2017.10.11 | 10時58分43秒
シンプルでスケーラブル、メンテナンス性も意識して設計されたCSSフレームワーク・「zap」 zap zapはシンプルでスケーラブル且つメンテナンス性も意識して設計されたCSSフレームワークです。CSSはベース、レイアウト、モジュール、ユーティリティなどにそれぞれ分けられており、各フォルダには必要に応じて読み込むCSSが梱包さ...2017.09.29 | 10時52分20秒
シンプルで使いやすい、モバイルフレンドリーなFlexboxベースのCSSフレームワーク・「Framy」 Framy Framyはシンプルで使いやすくカスタマイズ性も高いモバイルフレンドリーなFlexboxベースのCSSフレームワークです。コンポーネントはコンフリクトフリー(衝突しない)な設計を心がけたそう。LESSがサポートされています...2017.09.26 | 10時05分39秒
flexboxベースのミニマルなCSSモバイルファーストグリッド・「Plasma Grid」 Plasma Grid Plasma GridはflexboxベースのミニマルなCSSグリッドです。モバイルファーストでレスポンシブ。デフォルトは12カラムですが、カスタマイズ可能との事。Bootstrapの互換モードは準備中だそうで...2017.09.23 | 10時07分06秒
ユニークな動きも用意されたCSSアニメーションライブラリ・「Dynamic.css」 Dynamic.css Dynamic.cssはユニークな動きも用意されたCSSアニメーションライブラリです。動きも、というかほとんどがちょっとネタっぽいというか使いどころが限定されそうな印象。こういう選択肢もあるといいかも、というこ...2017.09.19 | 11時11分18秒
AIによって作られたカラフルなCSSフレームワーク・「Unnamed」 Unnamed UnnamedはAIによって作られたCSSフレームワーク・・・だそうです。経緯とか方法とか書かれておらず、AIで作ったとしか書かれてないので詳細は不明です。AI作って意味ではよくできてるなぁという印象ですが、CSSフレ...2017.09.13 | 11時42分40秒