3D effect on card hover
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
| .keyboard | |
| .row | |
| .key.orange(data-code="Escape" data-macro="orange") | |
| //- - for(var i = 0; i < 12; i++) | |
| each val in '1234567890'.split('').map(n => 'Digit' + n).concat('Minus', 'Equal') | |
| .key(data-code=val) | |
| .key.size-4.grey.stretch(data-code="Backspace") | |
| .key.red(data-macro="red") | |
| .row | |
| .key.size-2.grey.stretch(data-code="Tab") |
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
| .keyboard | |
| .row | |
| .key.orange(data-code="Escape" data-macro="orange") | |
| //- - for(var i = 0; i < 12; i++) | |
| each val in '1234567890'.split('').map(n => 'Digit' + n).concat('Minus', 'Equal') | |
| .key(data-code=val) | |
| .key.size-4.grey.stretch(data-code="Backspace") | |
| .key.red(data-macro="red") | |
| .row | |
| .key.size-2.grey.stretch(data-code="Tab") |
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
| <svg viewBox="0 0 330 330"> | |
| <g> | |
| <path d="M304.394,139.394l-139.39,139.393L25.607,139.393c-5.857-5.857-15.355-5.858-21.213,0.001 c-5.858,5.858-5.858,15.355,0,21.213l150.004,150c2.813,2.813,6.628,4.393,10.606,4.393s7.794-1.581,10.606-4.394l149.996-150 c5.858-5.858,5.858-15.355,0-21.213C319.749,133.536,310.251,133.535,304.394,139.394z" /> | |
| <path d="M154.398,190.607c2.813,2.813,6.628,4.393,10.606,4.393s7.794-1.581,10.606-4.394l149.996-150 c5.858-5.858,5.858-15.355,0-21.213c-5.857-5.858-15.355-5.858-21.213,0l-139.39,139.393L25.607,19.393 c-5.857-5.858-15.355-5.858-21.213,0c-5.858,5.858-5.858,15.355,0,21.213L154.398,190.607z" /> | |
| </g> | |
| </svg> | |
| <p class="scroll">Scroll 4 moar!</p> | |
| <!-- | |
| yes, im totally cheating here... I built these cards and app in SvelteKit and thought I'd be able to export it into a plain JS file to put in Codepen... however it seems it's not possible, and Codepen can't handle Svelte (yet?), so I deployed to Netlify and linked with an iFrame. |
Aditya4m
/ change-bass-color-with-hue.markdown
Created
January 20, 2023 07:09
Change bass color with hue
A Pen by Itay haephrati on CodePen.
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
| <div class=heading> <h1> <a href="https://github.com/ssoronid" target="_blank"> | |
| Follow me on Github /ssoronid | |
| </a> </h1> </div> | |
| <form> | |
| <div class="svgContainer"> | |
| <div> | |
| <svg class="mySVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200"> | |
| <defs> | |
| <circle id="armMaskPath" cx="100" cy="100" r="100"/> |