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

Punchcard Coding in Css [EN / Lightning Version]

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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
CSC307 Lecture 09
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
830
Fluid Templating in TYPO3 14
Avatar for Simon Praetorius s2b
0
130
Data-Centric Kaggle
Avatar for ねぼすけAI isax1015
2
760
AI Agent の開発と運用を支える Durable Execution #AgentsInProd
Avatar for izumin5210 izumin5210
7
2.3k
Oxlint JS plugins
Avatar for kazupon kazupon
1
810
Kotlin Multiplatform Meetup - Compose Multiplatform 외부 의존성 아키텍처 설계부터 운영까지
Avatar for Suhyeon Kim wisemuji
0
190
Amazon Bedrockを活用したRAGの品質管理パイプライン構築
Avatar for とすり tosuri13
4
250
副作用をどこに置くか問題：オブジェクト指向で整理する設計判断ツリー
Avatar for Koya Masuda koxya
1
600
「ブロックテーマでは再現できない」は本当か？
Avatar for Takashi Kitajima inc2734
0
770
AIエージェント、”どう作るか”で差は出るか？ / AI Agents: Does the "How" Make a Difference?
Avatar for r-kagaya rkaga
4
2k
Honoを使ったリモートMCPサーバでAIツールとの連携を加速させる！
Avatar for とすり tosuri13
1
170
コマンドとリード間の連携に対する脅威分析フレームワーク
Avatar for Aja9tochin pandayumi
1
450

Featured

See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
55k
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
1
740
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
2
410
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.1k
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
46
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
55
12k
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.3k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.3k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
54
8k
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
150

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