Will Boyd lonekorean
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| CSS.registerProperty({ | |
| name: '--dot-spacing', | |
| syntax: '<length>', | |
| initialValue: '20px', | |
| inherits: false | |
| }); | |
| CSS.registerProperty({ | |
| name: '--dot-fade-offset', | |
| syntax: '<percentage>', | |
| initialValue: '0%', |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .jagged { | |
| --tooth-width: 80px; | |
| --tooth-height: 30px; | |
| -webkit-mask-image: paint(jagged-edge); | |
| /* other styles as needed... */ | |
| } | |
| .slot:nth-child(1) .jagged { | |
| background-image: linear-gradient(to right, #22c1c3, #fdbb2d); |
lonekorean
/ file.css
Created
March 3, 2018 14:14
Setting custom properties for a paint worklet to use
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .jagged { | |
| background: paint(jagged-edge); | |
| /* other styles as needed... */ | |
| } | |
| .slot:nth-child(1) .jagged { | |
| --tooth-width: 50px; | |
| --tooth-height: 25px; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| CSS.registerProperty({ | |
| name: '--tooth-width', | |
| syntax: '<length>', | |
| initialValue: '40px', | |
| inherits: false | |
| }); | |
| CSS.registerProperty({ | |
| name: '--tooth-height', | |
| syntax: '<length>', | |
| initialValue: '20px', |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| class JaggedEdgePainter { | |
| static get inputProperties() { | |
| return ['--tooth-width', '--tooth-height']; | |
| } | |
| paint(ctx, size, props) { | |
| let toothWidth = props.get('--tooth-width').value; | |
| let toothHeight = props.get('--tooth-height').value; | |
| // lots of math to ensure teeth are collectively centered |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .shorthand { | |
| border: 1px solid blue; | |
| } | |
| .expanded { | |
| border-top-width: 1px; | |
| border-right-width: 1px; | |
| border-bottom-width: 1px; | |
| border-left-width: 1px; | |
| border-top-style: solid; |
lonekorean
/ file.js
Last active
March 3, 2018 13:58
Paint worklet for placeholder box that uses input properties
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| class PlaceholderBoxPropsPainter { | |
| static get inputProperties() { | |
| return ['border-top-width', 'border-top-color']; | |
| } | |
| paint(ctx, size, props) { | |
| // default values | |
| ctx.lineWidth = 2; | |
| ctx.strokeStyle = '#666'; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .placeholder { | |
| background-image: paint(placeholder-box); | |
| /* other styles as needed... */ | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script> | |
| CSS.paintWorklet.addModule('worklet.js'); | |
| </script> | |
| <div class="placeholder"></div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| class PlaceholderBoxPainter { | |
| paint(ctx, size) { | |
| ctx.lineWidth = 2; | |
| ctx.strokeStyle = '#666'; | |
| // draw line from top left to bottom right | |
| ctx.beginPath(); | |
| ctx.moveTo(0, 0); | |
| ctx.lineTo(size.width, size.height); | |
| ctx.stroke(); |