kscc

スポンサーサイト

一定期間更新がないため広告を表示しています

グダグダ言ってないで珍しく本気を出してみる!CSS3で作るサーチフォームデザイン


ぼくが本気になるのは
仕事と恋くらいです。

本気で。

ほぼ本気で。

というワケで
CSS3だったらフォームデザインも簡単にできそうなので実際やってみたんだ。

今さら感ありますけど。

どうぞ。

CSS3で追加されたradiusという角を丸めるプロパティと
box-shadowというドロップシャドウを加えるプロパティを使用しています。



実際作ったのはコレ。


CSS3を使用してるのでIEをご利用の場合はルーペのみしか見えませんが
モダンブラウザをご利用の場合は試しに検索してみてくださいです。

というワケで
CSSはこんな感じダス。

* {
	margin:0px;
	padding:0px;
}

form.design_form {
	letter-spacing:1px;
	width:240px;
	height:24px;
	border-style:solid;
	border-width:1px;
	border-color:#777777 #cccccc #cccccc #eeeeee;
	

	border-radius:20px; /* CSS3 */
	-moz-border-radius:20px; /* Firefox用 */
	-webkit-border-radius:20px; /* Safari,Chrome用 */

	box-shadow:inset 0px 2px 2px 0px #eeeeee; /* CSS3 */
	-moz-box-shadow:inset 0px 2px 2px 0px #eeeeee; /* Firefox用 */
	-webkit-box-shadow:inset 0px 2px 2px 0px #eeeeee; /* Safari,Chrome用 */
}

input.search_word {
	width:196px;
	color:#303030;
	font-family:"ヒラギノ丸ゴ Pro W4","Hiragino maru Gothic Pro W4","メイリオ","meiryo","Verdana","MS Pゴシック","Osaka";
	margin:2px 0px 0px 12px;
	border:1px solid #ffffff;
	font-size:12px;
}

HTMLはこんな感じにシンプルになっています。

<form action="*" method="get" class="design_form">
<input name="search" class="search_word" />
<input type="image" src="画像" class="button" />
</form>

ちょーシンプル。

まぁこんなの作っても誰も誉めてくれないんだけどね。

よければご利用くださいでーっす。
スポンサーサイト