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

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

バリスタ

に選定していただきました。✌('ω')✌

[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はie8,9は非対応ですけど、アニメーションしないだけで致命的に使えないわけじゃないですね。ニュンてならないけれども。

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

フォロワーともだちになってもらえると、とても嬉しい!

友だち追加
友だち追加

フォローはまだちょっと…? ではブログの定期購読はどう?

follow us in feedly
↓今月の特集もあわせてチェック!↓
月刊 prasm 7月号「便利さは超弩級!小さいモノ特集」
月刊 prasm 7月号

「「小さい」ことはいいことだ」

\シェア多謝!/

コメントは大切に読ませてもらっています。

一緒に読んで欲しい記事

前の記事(Previous)
[CSS] 背景画像(パターン)は固定にしてみる。という視点もあるよ