[Web Design] CSS Buttons – CSSボタンの作例を紹介するTumblrブログ
CSSを使ってデザインされた凝ったボタン作例を紹介するブログ。リンク先はだいたいCodepenなので導入も簡単にできそうです。最近のこの手のボタンはマウスオーバー時にトランジション使ったものが多いですな。多くの作例はアニメーションGifを使ったサムネールで紹介されているので、動きまで含めて閲覧できる点がナイスです。
Tag Archives: Snipet
[Web Design] Design Patterns on CodePen – CodePenがまとめる便利なコードスニペット
CodePenが、Webデザインに役立つコードスニペットをまとめています。様々な表現手法ごとに分けて紹介されています。例えばAccordionでは、アコーディオンを使ったコンテンツの見せ方とそのコードが複数種紹介されています。他にもメニューアイコン、タブメニュー、グリッド、ボタン、パンクズ、カレンダー、表組みなど、Webでよく使われるパーツ類が揃っています。CodePenなのでソースコード見るのも簡単です。
[Web Design] Buttons – A CSS button library built with Sass & Compass – SassとCompassで作られたCSSボタンライブラリー
SassとCompassを使って作られたCSSボタンのライブラリー。様々な形のボタンが用意されていて、またそれぞれ押下時にはアニメーションもします。導入方法についてはページ最下部に記述されています。シンプルで品のいいデザインなので、Sass導入済みのサイトやチーム内において使いやすそうです。ちなみに俺Compassって使った事ないんですよね。解説とか読んでると便利そうな気はするんだけど、なんか機会があれば使ってみたいなーと。
[CSS3] CSS Image Effects #3: Vignettes 3 Ways – CSSで写真にビネット効果を追加する方法
CSSを使って写真にビネット効果（トンネル効果、ケラレ）を追加する方法が紹介されています。トイカメラなどで起こる、写真の四隅が光量が足らず暗くなる現象を写真に追加する事ができます。画像に直接ではなくCSSで追加すれば、一斉に追加したり削除したりが効率よく行えそうです。円形グラデを使う点がポイントっすね。写真を印象的に見せたい場合に使えそうなテクニック。
[CSS3] AniCollection – CSSを使ったアニメーションのコードスニペット紹介サイト
CSS3を使った様々なアニメーションのコードスニペットを紹介するサイト。サイト内の角丸四角にマウスオーバーするとアニメーションをプレビューでき、目玉のアイコンをクリックでコードを見る事ができます。また「＋」マークを使って複数のアニメーションを選択する事で、アニメーションのコードをまとめて生成する事もできます。アニメーション関連のCSSフレームワークとしても使えますね。
[Web Design] CodeMyUI.com – Web制作に便利なコードスニペットを集めたサイト
Webデザインで使える様々なコードスニペットを集めたサイト。チェックボックス装飾やModalウィンドウ、マウスオーバーアニメーション、イメージスライダー、グリッドレイアウト、CSSボタン、イメージギャラリーなど、色々な場面で使えるコードが紹介されています。各作例はアニメーションGifを使って一覧されているので、動きの確認まで確認できる点がとってもナイスです。
[CSS] 20 Useful CSS Snippets for Responsive Menus – 使えるCSSスニペット
使えるCSSスニペットが20例紹介された記事。いくつかピックアップすると、ナビゲーション生成、レスポンシブレイアウトのポートフォリオ、ドロップダウンメニュー、マウスホバーアニメーション、アニメーションするハンバーガーメニュー、JSを使わないタブメニュー、パンクズ生成など。ナビゲーション類が多いですね。全てCodepenの埋め込みを使って紹介されているので、マークアップ、CSS、結果を簡単に確認できます。
[CSS] 15 Useful CSS Tricks You Might Have Overlooked – 便利なCSSトリック
使えるCSSトリックが紹介されてます。いわゆるTipsというか、コードスニペットみたいなもんですね。見出しの頭にナンバリングする、アンダーライン装飾、シェイプ内にテキストを配置、チェックボックス装飾、書籍風のテキスト装飾、リンク先ファイルタイプに応じたアイコン付与（これイイ！）、CSSアニメーションなど。派手な大技はないけど、地味に便利なTipsが多いです。いやこれイイですね。