Monthly Bookmarks #14

Monthly Bookmarks #14

今月(2015年2月)個人的に覚えておきたいと思ったものやTwitterを通してシェアしたエントリーやサービスなどのまとめです。

Monthly Bookmarks #14 目次

  1. Development
  2. Design / Inspiration
  3. Material / Freebies
  4. Service / Resource
  5. Other

Development

  • Introducing the Codrops CSS Reference | Codrops様々なクオリティ高いチュートリアルを紹介しているCodropsで公開されたCSSリファレンスサイト。
    基本的な使い方から応用までかなり丁寧に解説されており、サンプルも豊富にあります。
  • UX Recipe大きく7種類に分類されたカテゴリからUXに関する各項目を選択していき、最終的にそれを基にしながら見積もり作成ができます。
  • かわいい系デザインに使えるCSSいろいろ | WebクリエイターボックスCSSを使ってマーカーやステッチを表現したり、画像をハート型で切り抜いたりなど、タイトル通りかわいい系のデザインで便利なCSSテクニックのまとめ。
  • Responsive Web Design Patternsレイアウトやナビゲーションをはじめ、イメージ・メディア・フォーム周り・カルーセルやタブといった様々なモジュールなど、レスポンシブWebデザインに関するパターンやモジュールが沢山まとめられているサイト。
  • Subtle Click Feedback Effects | Codropsクリック時のエフェクトを実装するチュートリアルで、シンプルなものからユニークな動きのものまで全22種類あります。
  • Inspiration for Button Styles and Effects | CodropsボタンのHoverエフェクト集。
    他では見かけないようなものが多くて、個人的にAylen・Nina・Nanuk・Sacnite辺りをどこかで使いたい。
  • .htaccess Snippetsその名の通り.htaccessに関するスニペットがまとめられています。
  • How to Build a YouTube Video Website Background - DesignmodoYouTube動画を背景にフルスクリーン表示するテクニック。
  • Bootstrap3日本語リファレンスBootstrap3の日本語版のリファレンスサイトで、初心者でもわかる様にとサンプルも多数用意されています。
  • Story Boxアニメーションを簡単に実装できます。
  • Bouncy Navigation in CSS and jQuery | CodyHouseフルスクリーン+バウンスアニメーションでナビゲーションを実装するチュートリアル。
  • Twitter's "fave" animation画像とCSSを使って、Twitterのファボ風アニメーションを作成するチュートリアル。
  • Flickityフリックやカルーセル対応などもされており高機能スライダーで、オプションも豊富に用意されています。
  • randomColor.jsランダムにカラー生成してくれるプラグインで、赤や青といったベース色を指定したり、その他にもライトやダークといった色の雰囲気での指定もできます。
  • WPGlobus Plugin Adds a Language Switcher to WordPress多言語サイトに便利そうな言語スイッチャーを実装できるプラグイン「WPGlobus」を紹介しているエントリー。

目次へ

Design / Inspiration

目次へ

Material / Freebies

※以下で紹介している素材を使用する際は、ライセンス等は各自で再度確認してください。

Lynny Icons
Free – Wireframe for apps
JKゴシック
Moon - Free Font
Nerea. Art Nouveau | TYPEFACE
Nordic (Free Font)

目次へ

Service / Resource

  • CSS Ruler • Explore CSS lengths.CSSのサイズ指定を様々な単位で表示してくれるツール。
  • Tinychart簡単にグラフを作成できるツールで、入力方式は「TABLE」と「JSON」の2種類が用意されています。
    また、グラフのタイプも折れ線と棒の2種類が用意されており、作成されたグラフは画像でダウンロードすることができます。
  • SVG Newsその名の通り、SVGに関する情報をまとめているサイトで、テクニック・チュートリアル・デザインとカテゴリー分けもされています。

目次へ

Other

目次へ

Close the search window,
please press close button or esc key.