任意のテキストにさまざまなアニメーションエフェクトを付与するスタイルシート・「cssanimation」
cssanimation See the Pen Snake css text animation by cssanimation.io by kachibito (@kachibito) on CodePen. cssanim...
Resource - CSS/HTML
シンプル、スマート、モダンを特徴としたモバイルファーストなCSSフレームワーク・「TURRETCSS」
TURRETCSS TURRETCSSはシンプル、スマート、モダンを特徴としたモバイルファーストなCSSフレームワークです。JavaScriptは併用されていません。パフォーマンスが重視されており、軽量高速なWebサイト構築に貢献して...
CSSでスタイリングしたいろいろなチェックボックスのライブラリ・「CSS Checkbox Library」
CSS Checkbox Library CSS Checkbox LibraryはさまざまなチェックボックスのスタイルをまとめたCSSライブラリです。ON/OFFの切り替えスイッチやサークル状、スクエア状などが揃えられています。in...
沢山のエフェクトに遅延設定も可能なCSSアニメーションライブラリ・「Vivify」
Vivify Vivifyは多彩なエフェクトが用意されたCSSアニメーションライブラリです。沢山のエフェクトはclassを追加するだけで要素にアニメーションエフェクトを付与する事ができる、というもの。また、delayやduration...
要素をアニメーションさせながら表示/非表示するCSS・「vhs」
vhs vhsは要素にアニメーションエフェクトを与え、表示/非表示させる為のスタイルシートです。blurや点滅、zoom等でアニメーションしながら表示させたり非表示にしたり出来る、というもの。classを付与するだけのお手軽仕様です。...
必要なコンテナを配置したHTMLのboilerplateを作成出来るHTMLスターターキット作成ツール・「Aperitif」
Aperitif Aperitifはプロジェクトに必要なコンテナを配置したHTMLのboilerplateを作成出来るHTMLスターターキット作成ジェネレーターです。使い方はまず最初に配置したいエリアをクリックしてから配置するコンテナ...
マウスホバーでborder等がアニメーションしながら変化するボタンのCSS・「Hover Buttons」
Hover Buttons Hover Buttonsはマウスホバーでアニメーションしながら別スタイルに遷移するボタンのCSSセットです。borderや背景がさまざまなエフェクトで変化します。最近流行りのやつですね。結構な量が用意され...
基本的なコンポーネントのみを提供するCSSスターターキット・「Shoelace.css」
Shoelace.css Shoelace.cssは基本的なコンポーネントのみを提供する軽量なCSSスターターキットです。役立ちそうなコンポーネントのCSSリセットみたいなものと考えてくれとのこと。このCSSは本来、Surreal C...
Bootstrapベースのフリーなポートフォリオテンプレート・「OAK」
OAK OAKはBootstrapベースのフリーなポートフォリオテンプレートです。いたるところにいろいろなエフェクトが付与されたUIが使われています。フリーはHTMLでWPテーマは有料、という形のようです。全体的によくできている印象で...
ミニマルなワイヤーフレームの為のCSSフレームワーク・「WIP」
WIP WIPはミニマルなワイヤーフレーム作成の為のCSSフレームワークです。なんだかややこしいですが、ミニマルなワイヤーフレームをHTML/CSSで作ろう、というもの。少し前にご紹介したようなワイヤフレーム用の棒状のフォントを併用し...
CSS GridとLESSベースのBoilerplate・「Less Grid Boilerplate」
Less Grid Boilerplate Less Grid BoilerplateはCSS GridとLESSがベースのBoilerplateです。カラムは12カラム用意されており、全てdisplay: grid;でレイアウトが作...
Flexboxとvue.jsがベースのUIフレームワーク・「Sirius UI」
Sirius UI Sirius UIはvue.js+FlexboxなUIフレームワークです。コンポーネントやらスタイルやらがいろいろと揃えられている、どちらかと言えばBootstrap寄りのコンセプトかもしれません。ある程度揃えられ...
Flexboxベースの軽量でモダンなCSSフレームワーク・「TAFFY」
TAFFY TAFFYはFlexboxベースの軽量でモダンなCSSフレームワークです。多くのコンポーネントを含み、肥大化したBootstrapやFoundationなどのフレームワークを使いたくない方向けに、必要最低限のものだけ揃えた...
HTMLメールの軽量boilerplate・「bojler」
bojler bojlerはHTMLメールの軽量boilerplateです。簡単にひな形を作成出来るように設計されているとの事。スタイルリセット、レスポンシブ対応、グリッド、ユニーティリティのclassが特徴だそうです。ライセンスはM...
シンプルで使いやすいスタイルのCSSボタンのセット・「beautons」
beautons beautonsはシンプルで使いやすいスタイルのCSSボタンのセットです。csswizardry謹製みたいです。classを付与すればそのスタイルになってくれます。フレームワークをベースとしている場合は使いにくいケー...
美しいスタイルのBootstrap 4用UIキット・「NOW UI KIT」
NOW UI KIT NOW UI KITは美しいスタイルに仕上げられたBootstrap 4用UIキットです。この手のものでおなじみのCreative Tim製です。コンポーネントもしっかり揃えられており、特にオリジナルのスタイルに...
ホバーエフェクトが綺麗なグラデーションカラーのCSSボタンを大量に公開している・「Gradient Buttons」
Gradient Buttons Gradient Buttonsはホバーエフェクトが綺麗なグラデーションカラーのCSSボタンを大量に公開しているWebサイトです。カラーパレットを公開するCOLORIONのコンテンツになります。マウス...
モダンなWeb向けの小さなCSSリセット・「tinyreset」
tinyreset tinyresetはモダンなWeb向けの小さなCSSリセットです。よく分かりませんね。適切なタイトル思いつかなかったので直訳しました。ただ、内容は良いリセットだと思います。オールドブラウザほぼ死滅の今日ではリセット...
レスポンシブで軽量なflexboxベースのCSSフレームワーク・「griddd」
griddd gridddはレスポンシブで軽量なflexboxベースのCSSフレームワークです。カスタマイズ性を重視しておりclassもシンプルにされています。大きな特徴はないけどそれ故の使いやすさがある印象でした。MITライセンスの...
ボタンのスタイルを大量に集めたスタイルシート・「Buttons」
Buttons Buttonsはボタンのみを集めたスタイルシートです。少し前の、影のある立体的なものや、ベーシックなもの、丸みのあるもの、フラットなものなどさまざまなボタンのスタイルかなり大量に揃えられています。どこかで役に立つ・・か...
classを使わないミニマルなCSSフレームワーク・「Sakura」
Sakura Sakuraはclassを使わないミニマルなCSSフレームワークです。カラーテーマはいくつか用意されていますが、コンポーネント等は基礎的なもののみとなっています。それでも、デモを見る限りしっかりとWebコンテンツとして機...
誤った使い方のHTMLソースをハイライトしてくれるスタイルシート・「debugCSS」
debugCSS debugCSSは誤った使い方をしたHTMLソースの箇所をハイライトしてくれるスタイルシートです。その名の通りデバッグ用のCSSです。実用的かどうかよりも面白いアイデアだなーと思ったので備忘録。ソース見ていろいろ感心...