CSSのみでアニメーション絵を作成/公開するプロジェクト・CSS A/Z
CSSのみで絵を描き、アニメーションさせる、というプロジェクトのご紹介です。アルファベットの数だけ投稿するみたいですね。
css
CSSのテストを行うためのリソースをまとめている・csste.st
CSSのテストを行うためのリソースを収集、公開しているWebサイトがあったのでメモ。どのようにテストを行うか、なぜ行うか、ツールの紹介などなど。
レスポンシブWebデザインに対応するナビゲーションのパターンをいくつかまとめている・Responsive Navigation
レスポンシブなナビゲーションのパターンをまとめているResponsive Navigationのご紹介です。選択肢が複数あるとコンテンツにも合わせやすくなるので覚えておきたいところです。
Twitter BootstrapをベースとしたフラットなデザインのUIキット・Flat UI
Twitter Bootstrapベースに作られたシンプルでフラットなデザインのUIキット・Flat UIのご紹介。今年はこの手のスタイルよく見かけますけど、確かに見やすいですね。
各ブラウザに対応するCSSハックやJavaScriptによるハックをまとめているWebサイト・Browserhacks
各ブラウザのバージョンごとのCSSハックやJavaScriptによるハック方法をまとめているWebサイト・Browserhacksをご紹介します。CSSハックという言葉自体ちょっと懐かしい気がします・・・
有用なCSSフレームワークをまとめた・FRONT-END CSS FRAMEWORKS
有用なCSSフレームワークだけをコレクションしているサイト・FRONT-END CSS FRAMEWORKSがあったのでご紹介です。有用かどうかは個人差がありそうですけど、これかから探す方は覗いてみるといいかも。
フォームやボタンなど、良く使われるエレメントのスタイルも揃ったCSS3+HTML5フレームワーク・Workless
一式揃ったCSS/HTMLフレームワーク・Worklessのご紹介です。テーブルやボタン、フォームなどなど、Webサイトでよく使われるエレメントのスタイルも用意されています。シンプルで良さそうです。
Lettering.jsを併用して、任意のテキストにCSS3のアニメーションエフェクトを実装するスクリプト・textillate.js
ちょっと面白かったのでメモ的に。タイポグラフィ用のライブラリ、Lettering.jsを併用して、テキストにCSS3によるアニメーション効果を容易に与える事が出来る、というスクリプトのご紹介。
軽量でシンプルなレスポンシブWebデザイン向けのボイラプレート・Responsive Boilerplate
軽量且つ、クロスブラウザにも対応したレスポンシブWebデザイン対応のCSSフレームワーク・Responsive Boilerplateのご紹介。パッと見た限りですが、かなり使いやすそうです。軽量なのも◎。
フォームやボタン、テーブルなどの複数エレメントに対応したCSSフレームワーク・Maxmert
フォームやボタン、タブやテーブルなどなど、複数のエレメントに対応したCSSフレームワークのご紹介です。見た目も分かりやすくシンプルで、個人的にとっても好みだったのでメモも兼ねてご紹介します。
レスポンシブWebデザイン対応のグリッドレイアウト向けCSSフレームワーク・PROFOUNDGRID
レスポンシブなグリッドレイアウトの CSSフレームワークのご紹介。SCSSを 使って構築されています。入れ子や フルワイドにも対応。列の計算には ネガティブマージンを使用している そうです。
アイコンフォントを Google Web Fontsライクに使えるようにする為のオープンソースプロジェクト・We Love Icon Fonts
無料で使えるアイコンフォントの ホスティングサービスのご紹介。 Google Web Fontsのような形を 目指しているとの事なので応援も 兼ねてご紹介します。
特定のテキストを絵文字に変換するスクリプト・emojify.js
予め決められた特定のテキ ストを絵文字に変換する、 というスクリプトのご紹介。 WordPressなどのCMSでも一部 で導入されていますね。需要 は高いほうじゃないかと。
SASSを使用したレスポンシブWebデザイン対応のCSSフレームワーク・Centurion
SASSとMedia Queriesを使用して 構築されているCSSフレームワー ク・Centurionのご紹介。綺麗目 で使いやすそうじゃないかなと。 僕はLESS使ってるので使う事は 無さそうですけど・・
BootstrapやHTML5 Boilerplateに影響を受けて作られた軽量でミニマルなCSSフレームワーク・Substrata
BootstrapやHTML5 Boilerplateの 影響を受けているCSSフレームワ ークで、軽量でミニマルな設計を 目指したSubstrataのご紹介です。 余計なものを省きつつ、HTML5に 対応していないブラウザへも配...
シンプルで軽量なCSSフレームワーク・Reuze.me
シンプルなCSSフレームワーク・ Reuze.meのご紹介です。無駄な 記述を省いた軽量なフレーム ワークみたいですね。同じよう なものはいくらでもあります ので選択肢の一つとして。
イメージファイルをzipにしてアップロードするとCSSスプライト用の画像とCSSを自動生成するツール・SpriteMachine
CSSスプライト用の画像とCSSを 自動で生成してくれる、という Webツールのご紹介。作るのは 結構面倒なのでこうして自動化 してくれると楽で助かりますね。
CSSを使ったタイポグラフィ例を収集、コードも確認できるギャラリーサイト・typespiration
CSSによるタイポグラフィ例を収集しているギャラリーサイトのご紹介です。英語圏のサイトなので日本語はまた別ではありますが、これはこれで参考になるかと思います。まだ数が少ないので今後に期待。
Twitter Bootstrapのリソースを大量にまとめたサイト・The Big Badass List
人気のフレームワーク、Bootstrapを使う際に役立つリソースを大量に集めているWebサイト・The Big Badass Listのご紹介です。現在でも200近くのリソースがまとめられています。既に利用されている方は覗いてみては。
グリッドレイアウト対応のシンプルなCSSフレームワーク・IVORY FRAMEWORK
シンプルなCSSフレームワークです。グリッドレイアウトとレスポンシブに対応。同じようなフレームワークはいくつもありますが選択肢が多いにこした事は無いのでご紹介。
MetroライクなTwitter Bootstrap用デザインテーマ･Cosmo
Metroライクなデザインに変更 できるTwitter Bootstrapのテ ーマ・Cosmoのご紹介です。 Bootstrapはレイアウトが上手く 出来ているので見た目を変える だけで十分かもしれないですね。
著作権放棄の、グリッドシステムを搭載したレスポンシブWebデザイン対応CSSフレームワーク・rwdgrid
著作権放棄のレスポンシブWeb デザイン対応CSSフレームワー ク、rwdgridのご紹介。自由に 使っていいフレームワークは 非常にありがたい存在ですね。 ありがたく使わせて頂きます。