$30 off During Our Annual Pro Sale. View Details »

CSS Variable をもっと活用する / Kyoto.js 18

spring_raining
February 03, 2023

CSS Variable をもっと活用する / Kyoto.js 18

Presentation at Kyoto.js 18, Feb. 3, 2023

* Pokémon Cards Holographic effect in CSS
- https://poke-holo.simey.me/
- Breakdown: https://www.joshdance.com/100/day50/
* デモ
- https://codepen.io/spring-raining/pen/PoBxmNG

spring_raining

February 03, 2023
Tweet

More Decks by spring_raining

Other Decks in Technology

Transcript

  1. CSS Variable Λ΋ͬͱ׆༻͢Δ
    2023/02/03 Kyoto.js 18
    @spring-raining

    View Slide

  2. ࣗݾ঺հ
    • HN: @spring-raining / ͸Δ͞Ί


    • ؔ੢ग़਎ 2019೥ब৬ͯ͠౦ژ΁ 2022೥໊ݹ԰ʹҾӽ͠

    View Slide

  3. Kyoto.js͕


    ։࠵͞Εͳ͔ͬͨ3೥ؒ


    ͍Ζ͍Ζͳ͜ͱ͕͋ͬͨ

    View Slide

  4. ϑϩϯτΤϯυͷਐԽ

    View Slide

  5. View Slide

  6. Ͱ͸CSSͷਐԽ͸ʁ

    View Slide

  7. ɹɹɹɹɹɹɹͷొ৔ͰมΘͬͨʁ
    • Tailwind CSS͕ීٴͨ͜͠ͱͰɺ͔֬ʹCSSʹରͯ͜͠Ε·Ͱͱ͸ҟ
    ͳΔߟ͑ํ͕Ͱ͖ͨ (utility-
    fi
    rst)


    • ͨͩɺCSSࣗମ͕มΘͬͨΘ͚Ͱ͸ͳ͍


    • CSSࣗମͷมԽͱ͍͑͹ʁ

    View Slide

  8. CSS Variable

    View Slide

  9. CSS VariableͷՄೳੑ
    • ීஈCSS Variable͸ͲͷΑ͏ʹ࢖͍ͬͯ·͔͢ʁ


    • ͋Γ͕ͪͳ࢖͍ํˠ


    • ࢲ͸·ͩ·ͩCSS Variable͸े෼׆༻͞Ε͍ͯͳ͍Α͏ʹࢥ͍·͢

    View Slide

  10. ࠷େͷಛ௃


    CSS Variable͸


    ಺༰Λಈతʹม͑ΒΕΔ

    View Slide

  11. ׆༻ྫΛ2ͭ঺հ

    View Slide

  12. ׆༻ྫ1


    Pointer eventͱͷ࿈ܞ

    View Slide

  13. Pokémon Cards Holographic e
    ff
    ect in CSS
    • https://poke-holo.simey.me/


    • Breakdown: https://www.joshdance.com/100/day50/


    • Pure CSSͰτϨʔσΟϯάΧʔυͷϗϩάϥϜΛදݱ͍ͯ͠Δ

    View Slide

  14. ϗϩάϥϜͷ࢓૊Έ
    • Ұ௨Γ༡ΜͰ΋Βͬͨͱ͜ΖͰ…


    • ҰମͲͷΑ͏ʹ੍ޚ͍ͯ͠Δͷ͔ʁ

    View Slide

  15. มΘ͍ͬͯΔͷ͸


    ͜ͷ෦෼͚ͩ

    View Slide

  16. ͬ͘͟Γͱͨ͠ॲཧͷྲྀΕ
    pointermove event
    Svelte/motion ͷ


    SpringετΞʹΑΔ
    Πʔδϯά
    --pointer-x/y
    --rotate-x/y


    --translate-x/y
    ϗϩάϥϜͷݟͨ໨
    Λ੍ޚ͢ΔελΠϧ
    ΧʔυͷҐஔɾճస
    Λ੍ޚ͢ΔελΠϧ

    View Slide

  17. ͬ͘͟Γͱͨ͠ॲཧͷྲྀΕ
    pointermove event
    Svelte/motion ͷ


    SpringετΞʹΑΔ
    Πʔδϯά
    --pointer-x/y
    --rotate-x/y


    --translate-x/y
    ϗϩάϥϜͷݟͨ໨
    Λ੍ޚ͢ΔελΠϧ
    ΧʔυͷҐஔɾճస
    Λ੍ޚ͢ΔελΠϧ
    JS CSS

    View Slide

  18. ैདྷͷCSS-in-JSͷߟ͑ํ
    pointermove event
    Svelte/motion ͷ


    SpringετΞʹΑΔ
    Πʔδϯά
    ϗϩάϥϜͷݟͨ໨
    Λ੍ޚ͢ΔελΠϧ
    ΧʔυͷҐஔɾճస
    Λ੍ޚ͢ΔελΠϧ
    JavaScriptΛ࢖ͬͯ


    ৭ʑ͕Μ͹Δ
    CSSΛఘΊͯ

    WebGLͰ࣮૷

    View Slide

  19. ैདྷͷCSS-in-JSͷߟ͑ํ
    pointermove event
    Svelte/motion ͷ


    SpringετΞʹΑΔ
    Πʔδϯά
    ϗϩάϥϜͷݟͨ໨
    Λ੍ޚ͢ΔελΠϧ
    ΧʔυͷҐஔɾճస
    Λ੍ޚ͢ΔελΠϧ
    JavaScriptΛ࢖ͬͯ


    ৭ʑ͕Μ͹Δ
    CSSΛఘΊͯ

    WebGLͰ࣮૷
    JS CSS

    View Slide

  20. JS/CSSؒͷڥքͱͯ͠ͷCSS Variable
    • CSS Variableͷ಺༰ΛखͰॻ͘ʮఆ਺ʯͱͯ͠ͷ࢖͍ํ͸ɺͦΕ͸ͦ
    ΕͰϝϦοτ͕͋Δ͚ͲͦΕ͚ͩͰ͸ͳ͍


    • JSͷ೚ҙͷ৘ใΛCSSͷੈքʹ࣋ͪࠐΉʮม਺ʯͱͯ͠ͷ໾ׂ


    • ͔͠΋ɺCSS Variable͸஋Λม͑Δͱଈ࠲ʹ൓ө͞ΕΔϦΞΫςΟ
    ϒͳม਺

    View Slide

  21. JSͷ஋ΛCSSʹ࣋ͪࠐΉϝϦοτ
    • σόοά͕༰қʹͳΔ


    • CSS͸εςʔτϨε; ஋Λม͑Ε͹೚ҙͷঢ়ଶΛ࠶ݱͰ͖Δ


    • खܰʹύϑΥʔϚϯεͷྑ͍Ξχϝʔγϣϯ͕࣮૷Ͱ͖Δ


    • CSSࣗମ͸ݶΒΕͨؔ਺͚ͩΛ࢖͏ͷͰɺύϑΥʔϚϯεʹ͍ͭͯ
    ߟྀ͢Δ͜ͱ͕গͳ͍

    View Slide

  22. Ͳͷ৘ใΛCSSʹ࣋ͪࠐΉ͔ʁ
    • ʮcalc()ͰܭࢉͰ͖Δ͔Ͳ͏͔ʯ͕Ұͭͷ໨҆


    • ࡾ֯ؔ਺ (sin(), atan2()) ͳͲͷ௥ՃʹΑΓɺܭࢉͰ͖Δ஋͸૿͑ͯ
    ͍Δ

    View Slide

  23. ׆༻ྫ2


    ύϥϥοΫεεΫϩʔϧ

    View Slide

  24. ύϥϥοΫεεΫϩʔϧ
    • ͜͜Ͱݴ͏ύϥϥοΫεεΫϩʔϧͱ͸ɺεΫϩʔϧͨ͠େ͖͞ʹԠ
    ͯ͡ཁૉ͕มܗ͢Δԋग़ͷ͜ͱ


    • https://www.apple.com/jp/iphone-14-pro/ తͳ


    • εΫϩʔϧҐஔΛͦͷ··CSSʹ࣋ͪࠐΊ͹ྑ͍ͷͰ͸ʁ

    View Slide

  25. εΫϩʔϧҐஔ͚ͩΛCSSʹ࣋ͪࠐΉ
    • ୯७ʹεΫϩʔϧҐஔ͕มΘͬͨΒCSS VariableΛॻ͖׵͑ΔJS
    const cb = () => {
    document.body.style.setProperty('--scroll-position', window.scrollY);
    };
    document.addEventListener('scroll', () => {
    requestAnimationFrame(cb);
    });

    View Slide

  26. σϞ


    https://codepen.io/spring-raining/
    pen/PoBxmNG

    View Slide

  27. CSS VariableΛ࢖ͬͨ


    ελΠϧͷকདྷ

    View Slide

  28. CSS Painting API
    • CSS Houdiniͱݺ͹ΕΔAPIͷҰͭ


    • JSͰ࣮૷ͨ͠Paint workoutͱݺ͹ΕΔඳըϓϩάϥϜΛCSS͔Βར༻
    ͢ΔͨΊͷAPI

    View Slide

  29. CSS Painting API
    registerPaint(
    'boxbg',
    class {
    static get contextOptions() {
    return { alpha: true };
    }
    static get inputProperties() {
    return ['--boxColor'];
    }
    paint(ctx, size, props) {
    ctx.fillStyle = props.get('--boxColor');
    ctx.fillRect(0, 0, size.width, size.height);
    }
    }
    );
    li {
    background-image: paint(boxbg);
    --boxColor: blue;
    }

    View Slide

  30. ͭ·ΓͲ͏͍͏͜ͱʁ
    DOM Events
    ϦονͳCSSදݱ
    JavaScriptͰ


    ࠷௿ݶͷ࣮૷
    Paint WorkletͰ

    ΑΓߴ౓ͳඳը
    CSS Variables
    paint()

    View Slide

  31. ͭ·ΓͲ͏͍͏͜ͱʁ
    DOM Events
    ϦονͳCSSදݱ
    JavaScriptͰ


    ࠷௿ݶͷ࣮૷
    Paint WorkletͰ

    ΑΓߴ౓ͳඳը
    CSS Variables
    paint()
    JS CSS
    JS

    View Slide

  32. ·ͱΊ
    • Pure CSSͷදݱྗ͸࣮֬ʹ্͕͍ͬͯΔ


    • CSS Variable͸JSͱCSSΛͭͳ͙ڮ౉͠


    • CSSݏ͍ͳਓ΋Ͱ͖Ε͹৮ͬͯ΄͍͠ ָ͍͠Αʂ

    View Slide

  33. Appendix


    ະདྷͷCSS


    ͜͏ͳ͍ͬͯͯ΄͍͠

    View Slide

  34. ཁ๬1: @keyframes ΁ͷϚοϐϯά
    • CSS Animation͸جຊతʹ࣌ؒ (duration) Ͱ੍ޚ͢Δ࢓૊Έ


    • Web Animations API΋ pause() ΍ reverse() ఔ౓͔͠ͳ͍


    • Ξχϝʔγϣϯͷ࣌ؒͷਐߦΛCSS VariableͰ੍ޚͰ͖ΔͱҰؾʹ׆
    ༻ൣғ͕޿͕Γͦ͏

    View Slide

  35. ཁ๬2: CSS Variableͷ஋ʹ΋ͱͮ͘৚݅෼ذ
    • ৚݅ʹԠͯ͡ϓϩύςΟΛग़͠෼͚ΔΠϝʔδ


    • display: if-else(var(--condition), block, none);


    • ৭ʑࢼ͚ͨ͠Ͳࢥ͍͔ͭͳ͔ͬͨ…


    • ͍͍Ҋ͕͋Ε͹ڭ͍͑ͯͩ͘͞

    View Slide