クリエイティブ系のウェブサイト制作で役立つCSS技法 / CSS for develop creative website

CSSとWebGLを組み合わせたウェブサイトを題材に、CSSでインパクトを残すための演出実装のアイデアを紹介します。CSSがテーマですが、関連してWeb Animations APIが役立つポイントも解説します。

デモサイトは以下のURLで確認できます。
https://twitter.com/clockmaker/status/1525338778931728386

Transcript

1. גࣜձࣾ*$4஑ాହԆ೥݄೔
   ΫϦΤΠςΟϒܥͷ
   

   ΢ΣϒαΠτ੍࡞Ͱ໾ཱͭ$44ٕ๏
   
   

   View Slide

2. ஑ాହԆʢ͍͚ͩ΍͢ͷͿʣ
   wגࣜձࣾ*$4୅දஜ೾େֶඇৗۈߨࢣ
   wܦྺɿ'MBTI 4UBHF%ؚΉ
   ˠ$BOWBTˠ8FC(-
   w *$4.&%*"ʮ5ISFFKTೖ໳αΠτʯ୲౰
   
   !DMPDLNBLFS
   

   View Slide

3. ΢Σϒͷԋग़ٕ๏Λ঺հ
   ˞৽͍͠$44ͷٕज़঺հ͸͋Γ·ͤΜ
   
   

   View Slide

4. σϞ
   
   

   View Slide

5. 
   

   View Slide

6. 
   %0.Λ
   Ξχϝʔγϣϯ
   7VFKT
   

   View Slide

7. 
   %0.Λ
   Ξχϝʔγϣϯ
   7VFKT
   

   View Slide

8. %0.ͷΞχϝʔγϣϯ
   $445SBOTJUJPOT
   $44"OJNBUJPOT
   8FC"OJNBUJPOT"1*
   τΡΠʔϯܥ+4ϥΠϒϥϦ
   
   

   View Slide

9. %0.ͷΞχϝʔγϣϯ
   $445SBOTJUJPOT
   $44"OJNBUJPOT
   8FC"OJNBUJPOT"1*
   τΡΠʔϯܥ+4ϥΠϒϥϦ
   
   wλΠϛϯάͷ੍ޚΛߦ͍΍͍͢
   w$44ʹࣅͨه๏
   w Ϟμϯϒϥ΢βͰར༻Մʢ*&আ͘ʣ
   

   View Slide

10. 
    

    View Slide

11. ԋग़ͷϙΠϯτ
    w͋͠Β͍ͱͯ͠ͷۣܗ
    

    ˠCBDLHPVOEDPMPSͰృ͚ͬͨͩͷۣܗ
    wϞʔγϣϯ࠶ੜͷλΠϛϯάͷͣΒ͠
    

    ˠΘ͔ͣͳ࣌ؒͷ஗ԆΛՃ͑Δ
    
    

    View Slide

12. ԋग़ʹ໾ཱͭ+4ϥΠϒϥϦ
    
    5XFFOKTʢτΡΠʔϯχδϡ΢Ϥϯʣ
    (4"1ʢδʔαοϓʣ
    

    View Slide

13. ΢Σϒ੍࡞Ͱ
    ΫϦΤΠςΟϒίʔσΟϯά͕
    ໾ཱͭ৔໘͸ͨ͘͞Μ͋Γ·͢ɻ
    

    ָ͠ΜͰ࡞͍͖ͬͯ·͠ΐ͏ʂ
    
    *$4Ͱ͸ελοϑΛืू͍ͯ͠·͢ʂ
    

    View Slide