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

Punchcard Coding in Css [EN / Lightning Version]

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
[KNOTS 2026登壇資料]AIで拡張‧交差する プロダクト開発のプロセス および携わるメンバーの役割
Avatar for hisatake hisatake
0
270
Data-Centric Kaggle
Avatar for ねぼすけAI isax1015
2
770
Rust 製のコードエディタ “Zed” を使ってみた
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
160
AIによる高速開発をどう制御するか？ ガードレール設置で開発速度と品質を両立させたチームの事例
Avatar for tonkotsuboy_com tonkotsuboy_com
7
2.1k
Vibe Coding - AI 驅動的軟體開發
Avatar for Micky Li mickyp100
0
170
ぼくの開発環境2026
Avatar for yuzneri yuzneri
0
170
フルサイクルエンジニアリングをAI Agentで全自動化したい 〜構想と現在地〜
Avatar for Kaito Minatoya kamina_zzz
0
400
Honoを使ったリモートMCPサーバでAIツールとの連携を加速させる！
Avatar for とすり tosuri13
1
170
AIで開発はどれくらい加速したのか？AIエージェントによるコード生成を、現場の評価と研究開発の評価の両面からdeep diveしてみる
Avatar for どすこい daisuketakeda
1
2.4k
CSC307 Lecture 06
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
680
高速開発のためのコード整理術
Avatar for sutetotanuki sutetotanuki
1
390
Unicodeどうしてる？ PHPから見たUnicode対応と他言語での対応についてのお伺い
Avatar for てきめん tekimen youkidearitai
PRO
1
2.5k

Featured

See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
170
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
49
9.9k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
14k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
21k
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
200
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
38
3k
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
170
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
Amusing Abliteration
Avatar for ianozsvald ianozsvald
0
97
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
8.4k

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