Punchcard Coding in Css [EN / Lightning Version]

Transcript

1. PUNCHCARD CODING IN CSS
3. @briziel
4. state @briziel
5. <input type=“checkbox“> input:checked { property: value; } @briziel
6. <input type=“radio“> input:checked { property: value; } @briziel
7. WARNING! The following demos features hacks created either by professionals or under supervision of professionals. Accordingly, I must insist that no one attempt to deploy any hacks of this demos to production of your customer @briziel
8. Toggle @briziel
9. <input type=“checkbox“ id=“checkbox1“> <label id=“label1“ for=“checkbox1“> <!-- clickable elements --> </label> <div class=“entry1“> <!-- everything that should react --> </div> @briziel
10. Counter @briziel
11. animated gifs ♥ @briziel
12. @briziel
13. 255 0 @briziel
14. .pixel { mix-blend-mode: screen; } @briziel
15. @briziel
16. @briziel
17. @briziel
18. @briziel
19. single page application @briziel
20. Thank you! @briziel
21. • toggle: https://codepen.io/briziel/pen/YQoKmw • pixel: https://codepen.io/briziel/full/gRVvGV • pixelmatrix: https://codepen.io/briziel/full/bRXPMo • more complex examples: https://github.com/briziel/css- punchcard-coding