[Freebie] Freebiesbug – PSDやCSSスニペットなどの素材サイト
画像素材としてのPSDや、CSSのコードスニペットなどを扱う素材サイト。他にもiPadなどのハードウェアのモックアップ画像や、UIパーツ、フォントやパターン、Wordpressのテーマなども多く配布されてます。紹介されている素材がとっても趣味が良く、見ているだけでも勉強になります。デザインのネタ帳としてもイイですねこれ。最近この手の素材サイトよく見つけますわ。
Tag Archives: Snipet
[CSS] BASIC READY-TO-USE CSS STYLES – すぐに使えるベーシックなCSS装飾
サクっと使えるCSSスニペットをまとめた記事。動作デモはこちら。シャドウを使ったボックス装飾、角丸の指定色々、リンクに背景色を付けたりボーダーを点線にする装飾、Metroっぽい装飾、ボーダーを使った装飾、フォーム装飾などが紹介されてます。どれもclass記述だけでサクっとできるタイプのものなので使い勝手が良さそうです。
[Code Snipet] Bootsnipp – Twitter Bootstrapで使えるコードスニペットを集めたサイト
Twitter Bootstrap上で使えるコードスニペットを集めたサイト。スライドするサムネール群やフォーム装飾、カレンダー、ナビゲーションなどの各種パーツが紹介されてます。「View」ボタンを押す事でコードを見る事ができるので、あとはそれをコピペして使うだけ。フレームワーク使ってるとこういう便利なものを使えるのがイイですね。自分もBootstrapは仕事でちょいちょい使うので、こうしたまとめはとってもナイス。
[CSS] 50 Useful CSS Snippets Every Designer Should Have – 使えるCSSスニペット50個まとめ
Webデザイナーのための使えるCSSスニペットを50個まとめた記事。これイイですね。CSSリセット、Clearfixといったよく使われるものから、Blockquoteのテンプレート、メディアクエリ、フォントスタック、ロゴからh1テキストを消す方法、サムネール画像の縁取り、フルスクリーン背景、CSS3描画のグラデテンプレート、Box Shadowのテンプレート、IE6用の透過PNG対策、見出し装飾のテンプレート、CSS3を使ったノイズ描画など色々あります。普段使うCSSフレームワークに好みの物を追記しておくと、作業効率上がりそうです。
[Code Snipet] CSSFlow – CSSコードスニペットが充実したサイト
CSSのコードスニペットや、UIキットを配布するサイト。各作例はタグ付けされており、目的別に選ぶ事ができます。カレンダーとかログインパネルとかパーツ単位で掲載されてます。わりとオシャレな作例が多いので、デザインやコーディングのネタ探しにも使えそうです。スニペットのページを見てみると、9ページありました。それほど作例の数は多くないので、今後増えるとイイですね。
[Material] Download 30+ Free Pricing Table Templates Design {CSS3, PSD & WP Plugins} – 価格比較のためのテーブル表示の作例とリソース
複数の料金プランがある場合によく使われるWeb上でのテーブル表示の作例と、そのリソース類をまとめた記事。リソースフォーマットは様々で、作例によってCSS3（まぁコーディングデータ一式って意味だと思う）、PSD、Wordpressプラグインなどがあるようです。なぜWPプラグインなのかはよく分かりません（HTMLとCSSでいいんじゃねーか・・・とも思います）。紹介されている作例の数が32例とかなりあり、こうした見せ方をしたい場合の参考としてはなかなか見応えがあります。
Download 30+ Free Pricing Table Templates Design {CSS3, PSD & WP Plugins}
[Web Cording] 8 Code Snippets for New Website Projects – 新規Webサイト立ち上げ時にあると便利なコードスニペット
新規Webサイトを立ち上げる際にあると便利なコードスニペットのまとめ。ベーシックなHTML5ページの基礎テンプレート、Clearfix、CSS初期化、CSS3のグラデーションやトランスフォームプロパティの指定、@font-faceによるカスタムフォント、レスポンシブレイアウトをする際のメタタグ、HTML5での動画読み込みに関してのコードスニペットが紹介されてます。いやこれいいですね。わりとモダンなコーディングスタイルで作業を開始する際のテンプレートとして使えそうです。とってもナイス。
[CodeSnipet] Codepen – コードスニペットを元にライブコーディングも行えるサイト
Web用のコードスニペットの配布サイト。サムネールクリックで該当作例のライブコーディングができます。HTML、CSS、JSそれぞれの記入欄があり、入力した内容はページ下部のデモ画面に即時反映されます。紹介されている作例の数と質も高く、単純にネタ帳としても全然使えます。編集まで行えるという点がとってもナイス。