伸びる検索窓

ワードプレスのtwentyElevenの上部の検索フォームはフォーカスすると伸びますよね。あれってどういうふうになっているんだろうと思い調べました。
予測はjQueryだと思ったんですが、CSSでした。CSS3なんですがすごいな。IE8以前だと対応していないのでスムーズに表示されません。
おそらくjQueryでもできそうですね。
今回はCSSなのでCSS部分をご紹介します。
意外と簡単。
ワードプレスのCSSのピンポイントで取得しました。
以下のとおりです。この2つだけです。これだけで伸びます。


スポンサーリンク


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#search {
	-webkit-transition-duration: 400ms;
	-webkit-transition-property: width, background;
	-webkit-transition-timing-function: ease;
	-moz-transition-duration: 400ms;
	-moz-transition-property: width, background;
	-moz-transition-timing-function: ease;
	-o-transition-duration: 400ms;
	-o-transition-property: width, background;
	-o-transition-timing-function: ease;
	width: 72px;
}
#search:focus {
	background-color: #f9f9f9;
	width: 196px;
}

一応でもサイトも載せておきます。

デモサイト

Pocket
LINEで送る


スポンサーリンク

コチラの記事もどうぞ!
You can leave a response, or trackback from your own site.

コメントをお寄せ下さい

Subscribe to RSS Feed Follow me on Twitter!