[CSS] CREATIVE BUTTON STYLES – クールなボタン作例
クールなボタン作例をたくさん紹介した記事。デモページはこちら。a:hover時やa:active時に、凝った動きをするボタン作例が多いです。またどれもフラットな作りをしているので、フラットデザインなサイトに合いそうです。ボタンってサイトUIの中でも結構大事な要素ですからね。ボタン作る時のネタ帳としてイイ感じです。
Tag Archives: CSS
[CSS3] 40 CSS3 button examples with effects & animations – CSSで描画されたボタンまとめ
CSSで作られたボタンをまとめた記事。各項目クリックで、配布元に行く事ができます。ものによってはCSS3のアニメーションを使ったものもあり、見た目だけでなく動きも含めて参考になります。ボタンデザインのネタ帳としてナイスです。
[Code Snipet] Kickdrop – コードスニペットの配布サイト
Web制作で使えるコードスニペットの配布サイト。一部有料のものもありますが、多くのコードは無料で配布されてます。まだ作ってそれほど時間が経ってないようで、配布されてる数は少ないけど、わりと使えそうなコードが多い印象。サイト制作のネタ帳としても良さそうです。
[Web Design] Lavish – 画像からカラーパレットを抽出し、さらにBootstrap用のカラースキームを出力してくれるサイト
オンライン上にある画像ファイルのURLを入力するだけで、画像内で使われている色をカラーパレット化し、さらにTwitter Bootstrap用のカラースキームにまで出力してくれるという便利なサイト。これ人から教えてもらって早速使ったんだけど、すんごい便利です。画像ファイルを指定するとCSSコードが出力されるんだけど、その時点ですでにこのサイトそのものにカラースキームが指定されてます。Step2では各色をどの部位に割り当てるかの微調整もでき、色味の調整をこのサイト内だけで行えるという点がとってもナイス。カラーパレットのサンプルも充実してます。ちなみに左のサムネールは、大好きなSoundgardenの“Superunknown”（最近リマスター版が出た）のジャケットをサンプルしてみたもの。キーとなるアートワークや画像がすでにあって、サイトの色合いをそれに合わせるという手法の際に便利そうです。
[CSS] The Simpsons in CSS – CSSだけで描いたシンプソンズ
これバカだなーｗ CSSだけでシンプソンズのキャラを描いてます。各キャラごとにCSSを見ることができますが、これがまたすんごい長い。さらにanimationプロパティを使ってまばたきするようにもしてます。いやー改めてバカだなーｗ（褒めてる） こういう熱意とスキルと根気って素晴らしいですね。実用性という意味では皆無ですが、とにかく素晴らしい。このノリで是非サウスパークのキャラも描いてもらいたいところです。
[CSS] The History of Apple.com’s Nav Bar Made with CSS – 歴代アップルWebサイトのナビゲーションを、CSSでコーディングした作例
歴代のアップルサイトのナビゲーション・メニューをズラっと並べた作例。これスゴいのが、全てHTML + CSSでコーディングされていて、ちゃんと動くという点。オリジナルは2007年頃までは画像だったはずだけど、今の技術で全てのメニューの中身がテキスト化してあります。細かいグラデーションまでCSSで描画されているようで、いやこれスゴいなと。ちなみに下2つは妄想デザインのようです。1998 – 1999の時代のナビゲーションを知ってる人は、なかなかのオッサンMacユーザーですね（この時期とか）。
[CSS] CSS Slider – JSを使わないピュアCSSなスライダー
Javascriptを使わないピュアCSSなコンテンツスライダー。また「コーディングもいらないYO！」という事で、どういう仕組みなのかと思ってダウンロードしてみたら、いわゆるソース一式という配布形式ではなくアプリケーションでした。なのでMacユーザーとWindowsユーザーとでダウンロードするものが異なります。アプリケーションにイメージをドラッグ＆ドロップするだけでスライダーとして使えるソースが生成される仕組みのようです。他にもRetinaディスプレイやレスポンシブ・レイアウトにも対応しているみたい。コーディングに慣れた人にとってはアプリケーション形式というのは逆に使いづらいかもしんないけど、そうでない人にとっては便利なジェネレーターとして使えそうです。
[CSS] CSS Toggle Switch – フォームのチェックボックスやラジオボタンを、トグルスイッチ風にする手法
フォームのチェックボックスやラジオボタンの見た目を、iOSっぽいトグルスイッチにする手法について詳しく説明された記事。まず最初にオリジナルの見た目で紹介されており、記事下部でiOS、Androidそれぞれの見た目の作例を紹介してます。またスタンドアローン型に加え、Twitter Bootstrap用のソースコードも用意されてます（見た目がソレっぽくなる）。フォーム装飾の際に使えそうです。