Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Punchcard Coding in Css [EN / Lightning Version]

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

Punchcard Coding in Css [EN / Lightning Version]

Avatar for Fabricius Seifert

Fabricius Seifert

April 22, 2018

More Decks by Fabricius Seifert

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

Other Decks in Programming

See All in Programming
AI に Inclusive UI を書かせよう — Design Rules Skill で Compose UI を作り直す
Avatar for テオリア・テクノロジーズ theoriatec2024
1
470
XP祭りでしか伝わらないフリップネタ #xpjug
Avatar for bayashi murabayashi
0
140
DynamoDBの基礎を振り返りながらベクトル検索機能を理解する
Avatar for 村上優稀 musan
3
280
Vibes Containers 〜AIで変わるコンテナ設計と運用〜
Avatar for Tetsuya Kikuchi tkikuc
3
530
AWS Step Functions 大規模並列の壁を越える / jaws-sonic-2026-niigata-step-functions
Avatar for kasacchiful kasacchiful
PRO
1
440
Laravelのアプリケーションをどこにデプロイするか #ツナギメオフライン.9
Avatar for akase244 akase244
0
120
マイコン向けの軽量Ruby「PicoRuby」で各種デバイスを制御するネイティブアプリの実現手法
Avatar for bash0C7 bash0c7
0
330
Building an Out-of-Order CPU
Avatar for Latte72 latte72
1
750
LLMは4年分のCompose移行を再現できるのか？実プロダクト279件のXMLで探る自動化の境界線
Avatar for makun makun
0
540
AIとGame Jamで、ゲームを完成させた話
Avatar for hiro takahirosaeki
0
120
Streamlitで実現する自然言語データアプリ開発
Avatar for Ayumu Yamaguchi ayumu_yamaguchi
0
140
新人はどこまで自力でやり、どこからAIに頼るべきか／エンジニア育成に向き合う_先輩たちの悩みと知見共有会
Avatar for TOPPAN ict toppan_digital_dev
1
600

Featured

See All Featured
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
550
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.5k
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
5.8k
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
3k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
23k
Side Projects
Avatar for Sacha Greif sachag
456
43k
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
450
Designing for Performance
Avatar for Lara Hogan lara
611
70k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
5.2k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
380
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
230
23k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.7k

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