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
ふつうの技術スタックでアート作品を作ってみる
akira888
1
850
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
5.8k
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
570
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
220
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
220
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
270
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
NPOでのDevinの活用
codeforeveryone
0
840
AIともっと楽するE2Eテスト
myohei
6
2.6k
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
590
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
130
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
100
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Being A Developer After 40
akosma
90
590k
4 Signs Your Business is Dying
shpigford
184
22k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Practical Orchestrator
shlominoach
189
11k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
A Tale of Four Properties
chriscoyier
160
23k
Rails Girls Zürich Keynote
gr2m
95
14k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
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