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
AIと一緒にレガシーに向き合ってみた
Avatar for nyafunta9858 nyafunta9858
0
180
LLM Observabilityによる 対話型音声AIアプリケーションの安定運用
Avatar for Hiroyuki Moriya gekko0114
2
420
16年目のピクシブ百科事典を支える最新の技術基盤 / The Modern Tech Stack Powering Pixiv Encyclopedia in its 16th Year
Avatar for ahu ahuglajbclajep
5
990
AIによる高速開発をどう制御するか？ ガードレール設置で開発速度と品質を両立させたチームの事例
Avatar for tonkotsuboy_com tonkotsuboy_com
7
2k
カスタマーサクセス業務を変革したヘルススコアの実現と学び
Avatar for Tomoyuki Hamaguchi _hummer0724
0
660
Fragmented Architectures
Avatar for Denys Poltorak denyspoltorak
0
150
なぜSQLはAIぽく見えるのか/why does SQL look AI like
Avatar for florets1 florets1
0
450
Grafana：建立系統全知視角的捷徑
Avatar for Blueswen blueswen
0
330
開発者から情シスまで - 多様なユーザー層に届けるAPI提供戦略 / Postman API Night Okinawa 2026 Winter
Avatar for tasshi tasshi
0
200
[KNOTS 2026登壇資料]AIで拡張‧交差する プロダクト開発のプロセス および携わるメンバーの役割
Avatar for hisatake hisatake
0
250
コマンドとリード間の連携に対する脅威分析フレームワーク
Avatar for Aja9tochin pandayumi
1
450
Architectural Extensions
Avatar for Denys Poltorak denyspoltorak
0
280

Featured

See All Featured
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
0
220
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
2.2M
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
0
770
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
1
740
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
1.6k
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
430
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
48
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
6.9k
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
1
1.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