エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
擬似要素を使ってCSSでロングシャドウを表現する - Qiita
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
擬似要素を使ってCSSでロングシャドウを表現する - Qiita
cssでロングシャドウを表現するとして、「css long shadow」などで検索すると、box-shadowを位置をずら... cssでロングシャドウを表現するとして、「css long shadow」などで検索すると、box-shadowを位置をずらしながら多重にかける方法で表現できるようです。 .shadow { box-shadow: 1px 1px rgb(31, 41, 52), 2px 2px rgb(31, 41, 52), 3px 3px rgb(31, 41, 52), ... /* シャドウが100pxなら100まで続く */ } ただこの方法だと、背景色を透過したシャドウを作れませんし、cssが黒魔術っぽくなってしまいます。 そこで、疑似要素を使ってシャドウを作ってみました。 実際の要素の右と下にシャドウとなる疑似要素を作成し、transform: skew()させてシャドウのように見せかけます。 サンプル .shadow { position: relative; } .shadow:bef