[CSS] Creative CSS link hover styles – クールなマウスホバーアクション
CSSだけでデザインされた、クールなマウスホバーアクション。複数のデザインのテキストボタンが紹介されていて、どれもマウスホバーでアニメーションします。このアニメーションがどれもかっこいい。CSSだけで導入できる点もナイスです。ちなみに元記事はこちら。こういうちょっと凝った演出があると、ページそのものが一気にモダンな印象になりますな。使い勝手良さそうです。
Tag Archives: CSS3
[CSS] loaders.css – CSSで描画されたローディングアニメーション
画像を使わずにCSSだけで描画されたローディングアニメーション。デモページはこちら。アニメーション部分の色の変更がカスタマイズできるようです。ファイルサイズが軽いので使い勝手が良さそうです。
[CSS] The Simplest Way To Center Elements Vertically And Horizontally – Flexboxを使った、縦横軸でのセンタリング
Flexboxを使った、ボックス内においてボックス要素を縦軸・横軸ともにセンタリング（中央揃え）したい時のシンプルなコードサンプルが紹介されてます。Flexboxがなかった頃のように、heightの半分の数値をアレコレして・・・という面倒な記述しなくても良くなったのは楽ですな。まぁそういう意味じゃTipsでも何でもなく、普通の記述ではあるんだけど。justify-content:centerで水平方向に、align-items:centerで垂直方向にセンタリングすればイイだけなので超ラクチンです。
The Simplest Way To Center Elements Vertically And Horizontally
[CSS] Flexbox Froggy – ゲームしながらFlexboxの挙動を学べるサイト
ゲームをしながらFlexboxの挙動を学べる教育系コンテンツ。ルールは簡単で、カエルをハスの葉の上にピッタリ乗るようにFlexboxのプロパティ記述をするというもの。画面左、#pondと指定されているものがいわゆるFlexboxコンテナーです。んでハスの葉は固定で、カエルがFlexboxアイテムという感じ。最初はjustify-content、次にalign-itemsと来て、さらにflex-directionと続きます。全部で24問あり、一通りプレイし終えた頃にはFlexboxが使えるようになってるという内容。TableレイアウトからCSSによるFloatレイアウトに移行した時もそうだったけど、Flexboxでのレイアウトって経験者ほど頭の切り替えが難しかったりするので、こういうコンテンツは楽しく学べて良いですな。
[Web Design] CSS Buttons – CSSボタンの作例を紹介するTumblrブログ
CSSを使ってデザインされた凝ったボタン作例を紹介するブログ。リンク先はだいたいCodepenなので導入も簡単にできそうです。最近のこの手のボタンはマウスオーバー時にトランジション使ったものが多いですな。多くの作例はアニメーションGifを使ったサムネールで紹介されているので、動きまで含めて閲覧できる点がナイスです。
[Web Design] Design Patterns on CodePen – CodePenがまとめる便利なコードスニペット
CodePenが、Webデザインに役立つコードスニペットをまとめています。様々な表現手法ごとに分けて紹介されています。例えばAccordionでは、アコーディオンを使ったコンテンツの見せ方とそのコードが複数種紹介されています。他にもメニューアイコン、タブメニュー、グリッド、ボタン、パンクズ、カレンダー、表組みなど、Webでよく使われるパーツ類が揃っています。CodePenなのでソースコード見るのも簡単です。
[CSS] CSSGram – Instagramのようなフィルター機能をCSSを使って行うライブラリー
Instagramのような写真加工を、CSSのフィルター機能を使って行う事のできるCSSライブラリー。CSSフィルターとCSSブレンドモードを使うようで、IE以外のブラウザーで動作します。CSSを読み込んでClass指定するだけというシンプルなものなので、導入も簡単です。コーディングレベルでの可逆性を持たせたい場合や、Webサービスなどでの写真のフィルタリングなどで使えそうです。そういやInstagram使わなくなったなぁ・・・。
[Web Design] Buttons – A CSS button library built with Sass & Compass – SassとCompassで作られたCSSボタンライブラリー
SassとCompassを使って作られたCSSボタンのライブラリー。様々な形のボタンが用意されていて、またそれぞれ押下時にはアニメーションもします。導入方法についてはページ最下部に記述されています。シンプルで品のいいデザインなので、Sass導入済みのサイトやチーム内において使いやすそうです。ちなみに俺Compassって使った事ないんですよね。解説とか読んでると便利そうな気はするんだけど、なんか機会があれば使ってみたいなーと。