HTML_CSS
Googleでログイン
問題45：テキストボックス内に影をつけよう
テキストボックス内に影をつけてみましょう!
影を付けることで少しお洒落なテキストボックスになります。
見本画像を参考にしてCSSに記述し実装してください。
影を付けることで少しお洒落なテキストボックスになります。
見本画像を参考にしてCSSに記述し実装してください。
あらかじめエディタに書くコード
<input type="text" placeholder="テキストボックスです">
¥HTML¥
期待する画面
解答ソースコード
<input type="text" placeholder="テキストボックスです">
¥HTML¥
input {
height: 40px;
padding: 0px 40px;
background: #edf0f2;
box-shadow: 0 3px 1px rgba(0, 0, 0, 0.2) inset;
font-size: 14px;
}
¥CSS¥
補足
細かい部分にはなりますが、今回のようにテキストボックスに影を付けて沈んで見せるといった細部にデザインを凝らすことでお洒落なWebページだと認識されやすくなります。
CSSにはこのようなTips(小技)がたくさんあるので、オリジナルサイトでは細部まで拘って作成すると良いでしょう。
CSSにはこのようなTips(小技)がたくさんあるので、オリジナルサイトでは細部まで拘って作成すると良いでしょう。
完了にする！
活動記録をTweetする
1.HTMLの宣言をしてみよう
要素の中に影を付けたいときは
box-shadowの中にinsetを付与します。
box-shadowの使い方は初級39を参考にしましょう。