[CSS3] 伸び縮みする検索窓を実装する

さあ、CSS3三部作の完結編となりました。

モバイルあたりの狭いスペースでもこれなら気兼ねなく検索を仕込めるというものです。

See the Pen qdLENq by shintarowfresh (@shintarowfresh) on CodePen.

色々とコード書いてますけど重要なのは

.stretch {
  width: 4em;
  transition: all .6s ease;
}

.stretch:focus {
  width: 10em;
}

疑似クラスの:focusを使って装飾している点。

:focus擬似クラス－スタイルシートリファレンス

入力できる状態になったらCSSが効くようになります。

長さに差を付けてCSS書いて、transitionでなめらかに動かせているだけです。

理屈さえわかってしまえば結構簡単ですね。

単純な状態変化だけならCSSで組めちゃうのでCSSなかなか侮れないですよ。

Can I use… Support tables for HTML5, CSS3, etc

ちなみにtransitionはie８，９は非対応ですけど、アニメーションしないだけで致命的に使えないわけじゃないですね。ニュンてならないけれども。

文：シンタロヲフレッシュ

はてブ

pocket

twitter