影の作り方

こんにちは。大澤です🐶

本日はホームページのコーディング作業を行っていました。
今まで1ページ完結のホームページしか作成したことがなかったので、
リンク先のページ?(2ページ目以降?)を初めて作成いたします!!


【本日学んだこと:cssでできる!影の作り方】

要素に枠はなく、「」のつけ方を今回は学びました!

div{
  box-shadow: 左右の向き 上下の向き ぼかし 広がり 色;
}

とcssに記載するだけで影ができます!もっと具体的なコードを書くと…

.box{
   box-shadow: 1px 2px 4px -1px #333;
}

こんな感じになります!

今まで四角で囲むことはできていましたが、影をつけるのは初めてでした…💦
影が付くと少しかっこよくなる気がします✨


影…といえば影が一番長くなる時間帯=夕方が実は一番好きな時間帯です🙄
夕方って1日の中で一番短い時間な気がしていて、
その時にしか感じられない何かがあるような…うまく言葉にできませんが、なんだか切ない感じが好きです(笑)

ということで今日も「夕方」を楽しんできます(?)😆

WEB制作・ITに関するお悩みや
ご質問等お気軽にご相談ください

contact

この記事の著者

Webデザインの仕事を中心に、動画編集を行ったり、ロゴ制作したり、色々してます。 好きなものはYouTubeと音楽と優しい世界です!笑 ブログにはデザインのことや今思っていることを中心に書いていきます♪ よろしくお願いいたします🐶

コメントする

関連記事