忍者CODE

ログイン

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

PHPの問題

HTML_CSS

Googleでログイン Twitterでログイン
問題
テキストボックス内に影をつけてみましょう!
少しお洒落にしております。

見本画像を参考にして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を参考にしましょう。
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
コース一覧のアイコン

有料コース一覧
甲賀KOGA

プログラミングスキルが
一気に上がる!
有料級の解説動画19本
を今なら無料でGETできる!

忍者CODEの公式LINE登録後
LINE内にあるURLよりご覧になれます

  • プログラミング本気で学習してる方
  • もちろん完全無料で且つ手続き不要
  • 将来プログラミングで稼ぎたい方
  • 動画解説で真剣に学びたい方
スキルアップ動画をGET