Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Punchcard Coding in Css [EN / Lightning Version]

Avatar for Fabricius Seifert Fabricius Seifert
April 22, 2018
Programming
0
46

Punchcard Coding in Css [EN / Lightning Version]

Avatar for Fabricius Seifert

Fabricius Seifert

April 22, 2018
Tweet

More Decks by Fabricius Seifert

See All by Fabricius Seifert
3D in CSS
Avatar for Fabricius Seifert briziel
1
19
Lochkartenprogrammierung mit CSS
Avatar for Fabricius Seifert briziel
0
21

Other Decks in Programming

See All in Programming
Fragmented Architectures
Avatar for Denys Poltorak denyspoltorak
0
150
Oxlintはいいぞ
Avatar for Yuji Yamaguchi yug1224
5
1.3k
なぜSQLはAIぽく見えるのか/why does SQL look AI like
Avatar for florets1 florets1
0
450
Fluid Templating in TYPO3 14
Avatar for Simon Praetorius s2b
0
130
React 19でつくる「気持ちいいUI」- 楽観的UIのすすめ
Avatar for Hiroshi Morishige himorishige
11
6k
CSC307 Lecture 02
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
770
16年目のピクシブ百科事典を支える最新の技術基盤 / The Modern Tech Stack Powering Pixiv Encyclopedia in its 16th Year
Avatar for ahu ahuglajbclajep
5
990
カスタマーサクセス業務を変革したヘルススコアの実現と学び
Avatar for Tomoyuki Hamaguchi _hummer0724
0
660
AIエージェントのキホンから学ぶ「エージェンティックコーディング」実践入門
Avatar for Masahiro Nishimi masahiro_nishimi
5
340
今こそ知るべき耐量子計算機暗号(PQC)入門 / PQC: What You Need to Know Now
Avatar for mackey0225 mackey0225
3
370
CSC307 Lecture 04
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
660
HTTPプロトコル正しく理解していますか？ 〜かわいい猫と共に学ぼう。ฅ^•ω•^ฅ ﾆｬ〜
Avatar for ♛Heitor Hirose hekuchan
2
680

Featured

See All Featured
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
79
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
2.8k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
Avatar for Tech SEO Connect techseoconnect
PRO
0
55
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
0
2.3k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.3k
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
4k
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
110
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
380
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
46
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
6.3k
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
48

Transcript

  1. PUNCHCARD CODING IN CSS

  2. None

  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