Benutzer:WenkBruno

Bruno Wenk

Prof.em. für Multimedia-Kommunikationssysteme

Website: brunowenk.info

---

Beiträge

Programmieren_für_angehende_Pädagog:innen_(mit_Hilfe_von_Scratch)

OER Metadaten Editor

---

Das Internet - Struktur und Funktionsweise

Das Internet ist ein weltumspannendes Computernetzwerk. Es dient zur Übertragung von Datenpaketen zwischen den an das Internet angeschlossenen Rechnern.

<style>

input {

 position: absolute;
 opacity: 0;
 z-index: -1;

} // Layout .row {

 display:flex;
 .col {
   flex:1;
   &:last-child {
     margin-left: 1em;
   }
 }

} /* Accordion styles */ .tabs {

 border-radius: 8px;
 overflow: hidden;
 box-shadow: 0 4px 4px -2px rgba(0,0,0,0.5);

} .tab {

 width: 100%;
 color: white;
 overflow: hidden;
 &-label {
   display: flex;
   justify-content: space-between;
   padding: 1em;
   background: $midnight;
   font-weight: bold;
   cursor: pointer;
   /* Icon */
   &:hover {
     background: darken($midnight, 10%);
   }
   &::after {
     content: "\276F";
     width: 1em;
     height: 1em;
     text-align: center;
     transition: all .35s;
   }
 }
 &-content {
   max-height: 0;
   padding: 0 1em;
   color: $midnight;
   background: white;
   transition: all .35s;
 }
 &-close {
   display: flex;
   justify-content: flex-end;
   padding: 1em;
   font-size: 0.75em;
   background: $midnight;
   cursor: pointer;
   &:hover {
     background: darken($midnight, 10%);
   }
 }

}

// :checked input:checked {

 + .tab-label {
   background: darken($midnight, 10%);
   &::after {
     transform: rotate(90deg);
   }
 }
 ~ .tab-content {
   max-height: 100vh;
   padding: 1em;
 }

} </style>

Pure CSS Accordion ^2.0

Open multiple

       <input type="checkbox" id="chck1">
       <label class="tab-label" for="chck1">Item 1</label>

         Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum, reiciendis!

       <input type="checkbox" id="chck2">
       <label class="tab-label" for="chck2">Item 2</label>

         Lorem ipsum dolor sit amet consectetur adipisicing elit. A, in!

Open one

       <input type="radio" id="rd1" name="rd">
       <label class="tab-label" for="rd1">Item 1</label>

         Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eos, facilis.

       <input type="radio" id="rd2" name="rd">
       <label class="tab-label" for="rd2">Item 2</label>

         Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil, aut.

       <input type="radio" id="rd3" name="rd">
       <label for="rd3" class="tab-close">Close others ×</label>