Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Lochkartenprogrammierung mit CSS

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers.

Lochkartenprogrammierung mit CSS

Avatar for Fabricius Seifert

Fabricius Seifert

November 20, 2017
Tweet

More Decks by Fabricius Seifert

Other Decks in Programming

Transcript

  1. CSS

  2. 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!
  3. <input type=“checkbox“ id=“cb1“> <label id=“label1“ for=“cb1“> <!-- klickbare elemente -->

    </label> <div class=“entry1“> <!-- alles was reagieren soll --> </div>
  4. <input type=“checkbox“ id=“cb1“> <label id=“label1“ for=“cb1“> <!-- klickbare elemente -->

    </label> <div class=“entry1“> <!-- alles was reagieren soll --> </div>
  5. <input type=“checkbox“ id=“cb1“> <label id=“label1“ for=“cb1“> <!-- klickbare elemente -->

    </label> <div class=“entry1“> <!-- alles was reagieren soll --> </div>
  6. <input type=“checkbox“ id=“cb1“> <label id=“label1“ for=“cb1“> <!-- klickbare elemente -->

    </label> <div class=“entry1“> <!-- alles was reagieren soll --> </div>
  7. @keyframes frame2 { 0%, 10% { opacity: 0; } 10.01%,

    20% { opacity: 1; } 20.01%, 100% { opacity: 0; } }
  8. Takeaways • mit :checked zum persistenten Zustand • sibling-selector (

    ~ ) • counter-increment und content: counter(…) • keyframe animationen