読者です 読者をやめる 読者になる 読者になる

MEMOGRAPHIX

sanographixの個人ブログ。日記、webデザイン、読書、写真など。

box-shadowは重ねがけできる(追いbox-shadow)

Webデザイン

表題の通りでそれ以上の情報はないんだけど。

このまえ作ったページ で、ふわっとした感じを出したくて box-shadow を使って、こんなかんじで表示させた。↓

f:id:sngrpx:20160819200418j:plain

当初 box-shadow を一度だけかけたのだが、かかり方が弱い(わかりやすいように背景を黒くしている)。

f:id:sngrpx:20160819201749j:plain

そういえば box-shadow って二重以上設定できたな〜と思い、こういう感じで重ねた。僕はこれを、追い box-shadow と勝手に呼んでいる。

.example {
box-shadow: 0 0 30px #6fba2c,
            0 0 40px #6fba2c,
            0 0 50px #6fba2c,
            0 0 60px #6fba2c;
}

設定後はこんなかんじ。

f:id:sngrpx:20160819202125j:plain

background-colorの角が見えちゃってるけど、まあ下半分は本番では隠れる場所だし、さっきよりはマシになったから、まあいいか.... と思ってこのままにした。

……と思っていたのだが、いま9回重ねてシャドウかけたところようやく自然な雰囲気になった。助かった。 ↓

f:id:sngrpx:20160819202716j:plain

最近のっぺりしたページ作ることが多くて box-shadow 使う機会が減っているから、知見があまり更新されない状況だった。たまにふわふわさせたいのでふわふわ感を出したいときに使うことにする。