コース: CSS 基本講座
今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。
影でボタンを立体的に見せる
このレッスンでは、影を使って ボタンを立体的に見せたいと思います。 今この角丸のボタンには 右下に影が付いています。 これでちょっと浮き出ては 見えるんですけれども ボタンそのものはへん平ですね。 これをちょっと 膨らんで見えるようにしたいと思います。 影はプロパティの box-shadow で付けるんですけれども この box-shadow のプロパティで 影をいくつも加えることができます。 その場合には ひとつの影の設定が終わったら カンマ区切りですね。 そして、このあと続けてまた 別の影の設定をすればいいんですが、 見やすいように改行しましょう。 ここでちょっと数字を変えてみます。 マイナスの数字を使ってみます。 -4px の -4px の ボケ幅は 4 にしましょう。 正の数字です。 ボケ幅をマイナスにしても ちょっとおかしいですからね。 分かりやすいように red とします。 これで確認してみましょう。 ファイルを保存します。 影のずれの幅は 水平方向は右がプラスで 垂直方向は下がプラスですね。 ということは両方ともマイナスにすると 左上に影が付くということになります。 この影の設定なんですけれども 先頭にキーワードが加えられます。 キーワードは inset、 内側ということなんですね。 ではこれで確かめてみましょう。 注意は inset は プラスマイナスが逆になります。 ですからマイナスにすると 右と下に付くということなんですが、 領域の内側に影が付きます。 ではこの inset のほうは マイナスを取ります。 左上に付けたいわけですね。 そして red じゃなくて white にしましょう。 これで確認します。 ファイルを保存です。 さて、どうでしょう。 ちょっと出っ張った感じになりましたね。 左上に白い影といいますか、 内側に付いたんで出っ張って見えます。 左上から光が当たってる雰囲気ですね。 それではちょっと白のベタでは濃いので これはRGBAを使うことにしましょう。 カラーは white でいいんですけれども アルファを付けたいので rgba として、ホワイトは 255 ですね。 3つとも 255 で 4つ目、これがアルファになりますので 0.6 としましょう。 うっすらと付けるという感じですね。 確認します。ファイルを保存です。…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。