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

↓今月の特集もあわせてチェック!↓
月刊「prasm」2018 1月号 – 主に、心をスマートに
月刊 prasm 1月号

「主に、「心」をスマートに」

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

一緒に読んで欲しい記事

いいかい?