$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. Pokémon Cards Holographic e ff ect in CSS • https://poke-holo.simey.me/

    • Breakdown: https://www.joshdance.com/100/day50/ • Pure CSSͰτϨʔσΟϯάΧʔυͷϗϩάϥϜΛදݱ͍ͯ͠Δ
  2. ͬ͘͟Γͱͨ͠ॲཧͷྲྀΕ pointermove event Svelte/motion ͷ SpringετΞʹΑΔ Πʔδϯά --pointer-x/y --rotate-x/y --translate-x/y

    ϗϩάϥϜͷݟͨ໨ Λ੍ޚ͢ΔελΠϧ ΧʔυͷҐஔɾճస Λ੍ޚ͢ΔελΠϧ JS CSS
  3. εΫϩʔϧҐஔ͚ͩΛCSSʹ࣋ͪࠐΉ • ୯७ʹεΫϩʔϧҐஔ͕มΘͬͨΒCSS VariableΛॻ͖׵͑ΔJS const cb = () => {

    document.body.style.setProperty('--scroll-position', window.scrollY); }; document.addEventListener('scroll', () => { requestAnimationFrame(cb); });
  4. 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; }
  5. ཁ๬1: @keyframes ΁ͷϚοϐϯά • CSS Animation͸جຊతʹ࣌ؒ (duration) Ͱ੍ޚ͢Δ࢓૊Έ • Web

    Animations API΋ pause() ΍ reverse() ఔ౓͔͠ͳ͍ • Ξχϝʔγϣϯͷ࣌ؒͷਐߦΛCSS VariableͰ੍ޚͰ͖ΔͱҰؾʹ׆ ༻ൣғ͕޿͕Γͦ͏