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
44

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
17
Lochkartenprogrammierung mit CSS
Avatar for Fabricius Seifert briziel
0
19

Other Decks in Programming

See All in Programming
CloudflareのChat Agent Starter Kitで簡単！AIチャットボット構築
Avatar for syumai syumai
2
480
ProxyによるWindow間RPC機構の構築
Avatar for syumai syumai
3
1.2k
Android端末で実現するオンデバイスLLM 2025
Avatar for Masayuki Suda masayukisuda
1
150
旅行プランAIエージェント開発の裏側
Avatar for Ippo Matsui / 令和トラベル ippo012
2
900
The Past, Present, and Future of Enterprise Java with ASF in the Middle
Avatar for ivargrimstad ivargrimstad
0
100
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
Avatar for cc4966 cc4966
1
200
速いWebフレームワークを作る
Avatar for Yusuke Wada yusukebe
5
1.7k
Navigating Dependency Injection with Metro
Avatar for Zac Sweers zacsweers
3
260
Oracle Database Technology Night 92 Database Connection control FAN-AC
Avatar for oracle4engineer oracle4engineer
PRO
1
440
1から理解するWeb Push
Avatar for Minoru Takeuchi dora1998
7
1.9k
複雑なドメインに挑む.pdf
Avatar for Yuki Sakai yukisakai1225
5
1.1k
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
Avatar for teamLab teamlab
PRO
0
510

Featured

See All Featured
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
37
2.9k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
8
520
Docker and Python
Avatar for Tania Allard trallard
45
3.6k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
96
6.2k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
18
1.1k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
2
41
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
51k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
34
3.1k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
207
24k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.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