Lochkartenprogrammierung mit CSS

Transcript

1. LOCHKARTEN PROGRAMMIERUNG
2. LOCHKARTEN PROGRAMMIERUNG IN CSS
3. Fabricius Seifert Softwaregestalter @briziel
4. CSS
5. ✨ CSS ✨
9. Zustand
12. selector:hover { property: value; }
14. html + CSS
15. <input type=“checkbox“> input:checked { property: value; }
16. <input type=“radio“> input:checked { property: value; }
17. WARNUNG! Die folgenden Demos wurden von Profis oder unter deren Aufsicht erstellt. Bitte verzichtet daher im Interesse eures Kunden derartige Hacks in die Production zu deployen. Danke!
18. Toggle
19. <input type=“checkbox“ id=“cb1“> <label id=“label1“ for=“cb1“> <!-- klickbare elemente --> </label> <div class=“entry1“> <!-- alles was reagieren soll --> </div>
20. <input type=“checkbox“ id=“cb1“> <label id=“label1“ for=“cb1“> <!-- klickbare elemente --> </label> <div class=“entry1“> <!-- alles was reagieren soll --> </div>
21. p + p { … } <div> <p> <div> <p> <p> </div>
22. p + p { … } <div> <p> <div> <p> <p> </div>
23. p ~ p { … } <div> <p> <div> <p> <p> </div>
24. p ~ p { … } <div> <p> <div> <p> <p> </div>
25. <input type=“checkbox“ id=“cb1“> <label id=“label1“ for=“cb1“> <!-- klickbare elemente --> </label> <div class=“entry1“> <!-- alles was reagieren soll --> </div>
26. #cb1 + #label1 { background-color: blue; } #cb1:checked + #label1 { background-color: red; }
27. <input type=“checkbox“ id=“cb1“> <label id=“label1“ for=“cb1“> <!-- klickbare elemente --> </label> <div class=“entry1“> <!-- alles was reagieren soll --> </div>
28. #cb1 ~ .entry1 { background-color: blue; } #cb1:checked ~ .entry { background-color: red; }
29. Counter
36. #rb11:checked { counter-increment: einer 1; } #rb12:checked { counter-increment: einer 2; } …
37. #rb21:checked { counter-increment: zehner 1; } #rb22:checked { counter-increment: zehner 2; } …
38. #zahl::before { content: counter(zehner) ““ counter(einer); }
39. animated gifs ♥
42. 255 0
43. 255 0
44. .pixel { mix-blend-mode: screen; }
47. @keyframes frame1 { 0%, 10% { opacity: 1; } 10.01%, 100% { opacity: 0; } }
48. @keyframes frame2 { 0%, 10% { opacity: 0; } 10.01%, 20% { opacity: 1; } 20.01%, 100% { opacity: 0; } }
49. single page application
50. Takeaways • mit :checked zum persistenten Zustand • sibling-selector ( ~ ) • counter-increment und content: counter(…) • keyframe animationen
51. Danke! @briziel