[CSS] CREATIVE BUTTON STYLES – クールなボタン作例
クールなボタン作例をたくさん紹介した記事。デモページはこちら。a:hover時やa:active時に、凝った動きをするボタン作例が多いです。またどれもフラットな作りをしているので、フラットデザインなサイトに合いそうです。ボタンってサイトUIの中でも結構大事な要素ですからね。ボタン作る時のネタ帳としてイイ感じです。
Tag Archives: CSS3
[CSS3] 55+ Useful CSS3 Tools & Online Generators – 便利なCSSジェネレーターまとめ
CSS3に関する便利なオンラインツールをまとめた記事。シャドウ系、テキスト装飾、ボックス装飾、レイアウト、ボタンジェネレーター、CSS圧縮、アニメーション、ロングシャドウジェネレーター、メディアクエリージェネレーター、グラデーションツール、角丸ボックス生成、グリッドレイアウトのフレームワーク、CSSスプライト、コード整形ツール、CSSバリデーター、パターンギャラリーなどがその内容。55個オーバーのジェネレーターが紹介されているようで、上から下まで見るだけでもなかなか大変です。コーディング作業のお供に使えそうです。
[CSS3] 40 CSS3 button examples with effects & animations – CSSで描画されたボタンまとめ
CSSで作られたボタンをまとめた記事。各項目クリックで、配布元に行く事ができます。ものによってはCSS3のアニメーションを使ったものもあり、見た目だけでなく動きも含めて参考になります。ボタンデザインのネタ帳としてナイスです。
[Code Snipet] Kickdrop – コードスニペットの配布サイト
Web制作で使えるコードスニペットの配布サイト。一部有料のものもありますが、多くのコードは無料で配布されてます。まだ作ってそれほど時間が経ってないようで、配布されてる数は少ないけど、わりと使えそうなコードが多い印象。サイト制作のネタ帳としても良さそうです。
[CSS] The Simpsons in CSS – CSSだけで描いたシンプソンズ
これバカだなーｗ CSSだけでシンプソンズのキャラを描いてます。各キャラごとにCSSを見ることができますが、これがまたすんごい長い。さらにanimationプロパティを使ってまばたきするようにもしてます。いやー改めてバカだなーｗ（褒めてる） こういう熱意とスキルと根気って素晴らしいですね。実用性という意味では皆無ですが、とにかく素晴らしい。このノリで是非サウスパークのキャラも描いてもらいたいところです。
[CSS] CSS Slider – JSを使わないピュアCSSなスライダー
Javascriptを使わないピュアCSSなコンテンツスライダー。また「コーディングもいらないYO！」という事で、どういう仕組みなのかと思ってダウンロードしてみたら、いわゆるソース一式という配布形式ではなくアプリケーションでした。なのでMacユーザーとWindowsユーザーとでダウンロードするものが異なります。アプリケーションにイメージをドラッグ＆ドロップするだけでスライダーとして使えるソースが生成される仕組みのようです。他にもRetinaディスプレイやレスポンシブ・レイアウトにも対応しているみたい。コーディングに慣れた人にとってはアプリケーション形式というのは逆に使いづらいかもしんないけど、そうでない人にとっては便利なジェネレーターとして使えそうです。
[CSS] Single Element CSS Spinners – CSSで描かれたローディングスピナー
CSSで描かれたローディングスピナー。HTMLエレメント1つで作られているようで、これなら導入もサクっとできそうです（作例ではdivタグで書かれてます）。各スピナー下にある「View Source」クリックで、HTMLとCSSそれぞれのコードを見る事ができます。
[CSS3] Tutorials for Creating 3D Effects in CSS3 and JavaScript – CSSを使った3Dエフェクトのチュートリアルまとめ
CSSを使った3Dエフェクト作例をまとめた記事。エフェクトの性質上、マウスオーバーやクリックといったユーザーの動作によって、立体的に動くというものが多いようです。あとスライダーのトランジションなんかもあります。サイト内のリンクオブジェクトに対してマウスオーバー装飾したい時なんかに使えそうです。