Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Webエンジニアに転生したらCSS魔導士になった件

 Webエンジニアに転生したらCSS魔導士になった件

MIERUNE BBQ #01 発表スライド 2023/05/31
https://mierune.connpass.com/event/284183/

Satoshi Komatsu

June 01, 2023
Tweet

More Decks by Satoshi Komatsu

Other Decks in Programming

Transcript

  1. ©Project PLATEAU / MLIT Japan 小松 聖 自己紹介 KOMATSU Satoshi

    CSS好きです。 フロントエンドエンジニア
  2. 解説 CSSのcos(),sin()関数でピクセル座標を計算 して文字を円に配置。 --angle: calc(360deg / 52 * var(--index)); --x:

    calc(cos(var(--angle)) * 30px); --y: calc(sin(var(--angle)) * 30px); translate: calc(var(--x) - 50%) calc)var(--y) - 50%);
  3. こだわりポイント filter: drop-shadow(0px 0px 10px #913513) drop-shadow(0px 0px 10px #913513)

    drop-shadow(0px 0px 20px #913513) drop-shadow(0px 0px 20px #FFF); filter: drop-shadow(0px 0px 10px #913513) drop-shadow(0px 0px 10px #913513) drop-shadow(0px 0px 20px #913513); さらに白い影を重ねることでより光る表現に。