Resource - CSS3

CSSで作られたアイコンのコードをコピペ出来る・「CSS 3 Icons Generator」

CSS 3 Icons Generator CSS 3 Icons GeneratorはCSSで出来たアイコンのコードをコピペ出来る、というWebサービスです。使いたいアイコンをクリックすると、コードが表示されるので貼ればいいだけのお...

スマフォやタブレット向けのCSSフレームワーク・CLANK

CLANK CLANKはスマフォやタブレットデバイスのWebアプリ向けに作られたCSSフレームワークです。コンポーネントも多数揃えられており、SCSSで作られているそうです。シンプルで使いやすそうですね。 CLANK

CSS3のエフェクト付きモーダルウィンドウ・「jQuery Custombox 」

jQuery Custombox jQuery CustomboxはCSS3のエフェクト付きもモーダルウィンドウを実装するスクリプト。モーダルウィンドウの出現時、非表示時にエフェクトがかかります。用途は限られてしまいそうですが、かな...
Ads

CSS3を手軽に試せるジェネレーター・「CREATE CSS3」

CREATE CSS3 CREATE CSS3は手軽にCSS3を試せるツールです。数値を入力すると、要素に反映され、コードも表示してくれます。シンプルなのでちょっと試したい、という時は便利かもしれません。 CREATE CSS3

:nth-childの使い方を分かりやすく教えてくれる・「Master of the :nth-child」

Master of the :nth-child Master of the :nth-childは:nth-child擬似クラスの使い方を視覚的に分かりやすく教えてくれるWebサイトです。覚えれば何てことは無いんですけど、少し理解し...

ブラウザ上でCSSによる3Dを作れるエディタ・「Tridiv」

Tridiv Tridivはブラウザ上でCSSによる3Dシェイプを作成出来るエディタ。予め用意された複数のシェイプを使って3Dコンテンツを作ることが出来ます。面に画像を使う事も出来ますが、こちらはURLを指定する形になるみたい。 ...

Webフォントを使ったWebデザインのギャラリー・「WebfontsCorner 」

WebfontsCorner WebfontsCornerはWebフォントを使っているWebデザインをギャラリーにしているコレクションサイトです。まだ数は少ないですが、シンプルで見やすい印象ですので覚えておいて損は無さそうです。 ...

CSSによるアニメーションエフェクトをまとめた・「EFFECKT.CSS」

EFFECKT.CSS EFFECKT.CSSはCSSによるアニメーションエフェクトをまとめたサイト。Githubでもソースを公開しています。今まで見かけたCSSエフェクトが勢ぞろいしている印象です。尚、ソース元は見出しのタイトル右上...

CSSで装飾されたチェックボックスのコードをダウンロード出来る・「CSS Checkbox」

CSS Checkbox CSS CheckboxはCSSで装飾されたチェックボックスのソースコードをダウンロードできるサービスです。Checkbox CSS Styleで装飾の種類を選択してソースをコピペするだけ。ラベルの背景の画像...

SASS/Compassで構築されたCSSボタンライブラリ・「Buttons」

Buttons ButtonsはSASS/Compassで構築されたCSSボタンのプロジェクトです。classを振るだけで様々なボタンに装飾する事が出来る様になっています。Font Awesomeを使ってアイコンを加えたりCSS3でぼ...

CSSライブラリをコレクションしている・「CSSDB.co」

CSSDB.co CSSDB.coはCSSライブラリをコレクションしているWebサイトです。似たようなサイトを紹介した気もしますが・・割と評価の高めなライブラリに絞ってるっぽいですね。Githubへのリンクもあります。 CSSD...

レスポンシブWebデザイン対応のHTML5 / CSS3テンプレートを配布する・「HTML5 Up!」

HTML5 Up! HTML5 Up!は様々なHTML5 / CSS3なテンプレを配布するWebサイトです。全てレスポンシブWebデザインに対応しています。現在12~13個ほどあり、素敵なデザインに仕上がっています。ライセンスはCC-...

レスポンシブWebデザイン対応のWebサイトを構築する為の軽量フロントエンドフレームワーク・「skel.js」

skel.js skel.jsはレスポンシブなWebサイトを構築する為のフロントエンドフレームワークです。19kbと、なかなか軽量で内容も充実した印象でした。使い慣れれば便利そうです。ライセンスはMITとGPL。 skel.js

レスポンシブWebデザイン対応のシンプルで軽量なグリッドシステム・「.FITGRD」

.FITGRD .FITGRDはレスポンシブWebデザインにも対応したグリッドレイアウトを構築する為のCSSです。フレームワークではない、との事です。(当記事では一応フレームワークのカテゴリに含めています)CSS自体は非圧縮でも4KB...

SassのコードをCSSに即時変換・「SassMeister」

SassMeister SassMeisterはSass記法で書いたコードを即時CSSに変換するツールです。左に書き込めばCSSが右側に表示されます。OSSとしてGithubでも公開されています。Rubyで書かれているようですね。 ...

ミニマルなマークアップで書かれたCSSフレームワーク・「Markup Framework」

Markup Framework Markup Frameworkはミニマルなマークアップで書かれた、モバイルファーストなレスポンシブWebデザイン対応のCSSフレームワークです。必要最低限、をコンセプトに構成したようです。ベースとし...

CSSフレームワークの機能が一目で分かる一覧表・「CSS Front-end Frameworks with comparison」

CSS Front-end Frameworks with comparison CSS Front-end Frameworks with comparisonは様々なCSSフレームワークの持ち合わせている機能を一目で確認出来る一覧...

CSS3のコードスニペットと動作デモを紹介する・「CSSFlow」

CSSFlow CSS3を使ったエレメント等をデモと共に紹介するWebサイト。上2つは有料みたいですが下のは無料で利用出来るみたいです。スマフォサイトなんかと相性良さそうなエレメントが目立ちますね。 CSSFlow

デバイスに応じたMedia Queriesのコードをコピペ出来るスニペット一覧表・「Media Query Snippets」

Media Query Snippets Media Query Snippetsは、任意のデバイスに対応する為のMedia Queriesのコードを一覧にしてコピペ出来るようにまとめているWebサイトです。チートシート的に使えて良さ...

CSS3を使ったエレメントを簡単に作成出来るChrome拡張・「CSS-SHACK」

CSS-SHACK CSS-SHACKはChromeでCSS3を使ったエレメントを作成できるアプリケーションです。右のツールボックスで装飾するとリアルタイムで反映、そのままソースをエクスポートできるようになっています。レイヤー機能も付...

Font Awesomeのアイコンを利用したボタンを作成出来る・「CSS3Butt.in」

CSS3Butt.in CSS3Butt.inは、Font Awesomeで公開されているフォントを使ったボタンを手軽に作成出来るツールです。使いたいアイコンを選択し、色やテキスト、サイズを設定してコードをコピペするだけ。 CS...

transition-timing-functionのcubic-bezier関数を動作を見ながら設定出来る・「Visualize and manipulate CSS transition functions」

Visualize and manipulate CSS transition functions Visualize and manipulate CSS transition functionsはCSS3のtransition-t...
Ads