ログイン

問題45 テキストボックス内に影をつけよう

HTML_CSSの問題

HTML_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¥
            
答えのアイコン

解説

input属性やblock要素など、
要素の中に影を付けたいときは
box-shadowの中にinsetを付与します。
box-shadowの使い方は初級39を参考にしましょう。
ログインして解答を見る
細かい部分にはなりますが、今回のようにテキストボックスに影を付けて沈んで見せるといった細部にデザインを凝らすことでお洒落なWebページだと認識されやすくなります。

CSSにはこのようなTips(小技)がたくさんあるので、オリジナルサイトでは細部まで拘って作成すると良いでしょう。
twitterのアイコン
活動記録をTweetする
完了にする!
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
LINEの友達追加でお役立ち動画をGET!!