Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Lochkartenprogrammierung mit CSS
Search
Fabricius Seifert
November 20, 2017
Programming
0
19
Lochkartenprogrammierung mit CSS
Fabricius Seifert
November 20, 2017
Tweet
Share
More Decks by Fabricius Seifert
See All by Fabricius Seifert
3D in CSS
briziel
1
17
Punchcard Coding in Css [EN / Lightning Version]
briziel
0
44
Other Decks in Programming
See All in Programming
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
660
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
490
AIともっと楽するE2Eテスト
myohei
6
2.6k
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
120
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
530
技術同人誌をMCP Serverにしてみた
74th
1
650
5つのアンチパターンから学ぶLT設計
narihara
1
170
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
1
13k
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
130
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
110
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
780
Featured
See All Featured
Making Projects Easy
brettharned
116
6.3k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Raft: Consensus for Rubyists
vanstee
140
7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
The Cult of Friendly URLs
andyhume
79
6.5k
Building Applications with DynamoDB
mza
95
6.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Transcript
LOCHKARTEN PROGRAMMIERUNG
LOCHKARTEN PROGRAMMIERUNG IN CSS
Fabricius Seifert Softwaregestalter @briziel
CSS
✨ CSS ✨
None
None
None
Zustand
None
None
selector:hover { property: value; }
None
html + CSS
<input type=“checkbox“> input:checked { property: value; }
<input type=“radio“> input:checked { property: value; }
WARNUNG! Die folgenden Demos wurden von Profis oder unter deren
Aufsicht erstellt. Bitte verzichtet daher im Interesse eures Kunden derartige Hacks in die Production zu deployen. Danke!
Toggle
<input type=“checkbox“ id=“cb1“> <label id=“label1“ for=“cb1“> <!-- klickbare elemente -->
</label> <div class=“entry1“> <!-- alles was reagieren soll --> </div>
<input type=“checkbox“ id=“cb1“> <label id=“label1“ for=“cb1“> <!-- klickbare elemente -->
</label> <div class=“entry1“> <!-- alles was reagieren soll --> </div>
p + p { … } <div> <p> <div> <p>
<p> </div>
p + p { … } <div> <p> <div> <p>
<p> </div>
p ~ p { … } <div> <p> <div> <p>
<p> </div>
p ~ p { … } <div> <p> <div> <p>
<p> </div>
<input type=“checkbox“ id=“cb1“> <label id=“label1“ for=“cb1“> <!-- klickbare elemente -->
</label> <div class=“entry1“> <!-- alles was reagieren soll --> </div>
#cb1 + #label1 { background-color: blue; } #cb1:checked + #label1
{ background-color: red; }
<input type=“checkbox“ id=“cb1“> <label id=“label1“ for=“cb1“> <!-- klickbare elemente -->
</label> <div class=“entry1“> <!-- alles was reagieren soll --> </div>
#cb1 ~ .entry1 { background-color: blue; } #cb1:checked ~ .entry
{ background-color: red; }
Counter
None
None
None
None
None
None
#rb11:checked { counter-increment: einer 1; } #rb12:checked { counter-increment: einer
2; } …
#rb21:checked { counter-increment: zehner 1; } #rb22:checked { counter-increment: zehner
2; } …
#zahl::before { content: counter(zehner) ““ counter(einer); }
animated gifs ♥
None
None
255 0
255 0
.pixel { mix-blend-mode: screen; }
None
None
@keyframes frame1 { 0%, 10% { opacity: 1; } 10.01%,
100% { opacity: 0; } }
@keyframes frame2 { 0%, 10% { opacity: 0; } 10.01%,
20% { opacity: 1; } 20.01%, 100% { opacity: 0; } }
single page application
Takeaways • mit :checked zum persistenten Zustand • sibling-selector (
~ ) • counter-increment und content: counter(…) • keyframe animationen
Danke! @briziel