[UI Design] WebInterfaceLab – Webインターフェースのスニペット類の配布サイト
CSS3やHTML5を使ったWeb用コードスニペットの配布サイト。とは言っても紹介されているコード類はほぼCSS3がらみの内容です。サムネールクリックで詳細画面に遷移、そこからライブデモとダウンロードに遷移できます。ナビゲーションやボタン、プログレスバーなどがその内容。まだ若いサイトらしく数があまりありませんが、配布されてる内容が有用なものが多いので今後に期待。
Tag Archives: Snipet
[CSS] Data URI Tileable Transparent Patterns – コードのコピペだけで使えるパターン集
CSSコードのコピペだけで背景画像の適用ができるコードスニペット。ページ内の「Code」ボタンクリックでコードが表示されます。background-imageが指定されているので、後はコピペするだけで使えます。コードの背景指定の部分をよく見ると、「data:image/png;base64…」と始まっているので、ようするにこれPNG画像をbase64でエンコードしただけのものです。なのでファイルサイズの節約とかにはあんましならいません。まぁリクエストは減りますが。こんな風にCSS内に記述できると汎用的に使えていいですね。透過指定もされているので、背景色に溶け込む点もナイスですねー。
[Material] Icon Deposit – チュートリアルやアイコン、コードスニペットなどのデザイン素材投稿サイト
アイコンやコードスニペット、Webパーツなどのデザイン素材と、チュートリアルの投稿サイト。一般的なブログのようにカテゴリーやタグから素材をブラウズする事ができます。素材によってはコードやPSDなどの素材をダウンロードする事ができるので、デザイン素材を漁るのになかなかナイスなサイト。投稿サイトなので、アカウント登録すれば作品のアップロードもできます。
[Code Snipet] 11 Websites for Code Snippets – コードスニペットを扱うサイトまとめ
Web制作で使えるコードスニペットを紹介するサイトをまとめた記事。CSSやHTML、Javascript、PHPなどの各種コードスニペットが紹介されてます。コーダーやプログラマーの人にオススメ。CSSDeckあたりは自分もよく見ます。
[Web Design] Codrops – Web制作に使えるコードスニペットや、作例を紹介するブログ
Web制作で使えるコードスニペットやクールな作例、デザイン事例などを紹介するブログ。というかココ超有名なので知ってる人は多いと思いますが、見どころは定期的に発行されるCollectiveというまとめ記事（ちょうど新しいのが公開されてました）。特に使えそうなコードやデザイン事例などについてピンポイントでまとめられてます。紹介されている内容の質が高く、見やすく整理されているので、デザイナーの方のネタ帳にオススメです。
[Code Snipet] TheCodePlayer – Web制作で使えるコードスニペットギャラリー
Web制作に使えるコードスニペットギャラリー。CSS3やHTML5、JSあたりを使った作例と、そのコードが紹介された記事へのリンクまとめサイトです。最近この手のサイトって、こうした可変グリッドレイアウトで見せる例が多いような気がします。実際見やすいですしね。サイト制作のネタ帳に是非これひとつ。
[Material] Creative Market – Web素材の配布サイト
Web向けの素材配布サイト。本来は有料の素材サイトみたいなんだけど、トップから1ページ奥に入ったところでアーリーアクセスユーザーのための無料ページが開設されてます。＄マークとか付いてますがだいたい無料です。ただしDLにはユーザー登録が必要。このあたりちょいメンドいですが、配布されている素材の質は高いので、今の内に必要なものを落としておいてもいいかも。