Benutzer:WenkBruno: Unterschied zwischen den Versionen

Aus ZUM-Unterrichten
Keine Bearbeitungszusammenfassung
Markierung: 2017-Quelltext-Bearbeitung
Keine Bearbeitungszusammenfassung
Markierung: 2017-Quelltext-Bearbeitung
Zeile 25: Zeile 25:
<br />
<br />


= Das Internet - Struktur und Funktionsweise =
=Das Internet - Struktur und Funktionsweise=


Das Internet ist ein weltumspannendes Computernetzwerk. Es dient zur Übertragung von Datenpaketen zwischen den an das Internet angeschlossenen Rechnern.
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>
<h1>Pure CSS Accordion <sup>2.0</sup></h1>
<div class="row">
  <div class="col">
    <h2>Open <b>multiple</b></h2>
    <div class="tabs">
      <div class="tab">
        <input type="checkbox" id="chck1">
        <label class="tab-label" for="chck1">Item 1</label>
        <div class="tab-content">
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum, reiciendis!
        </div>
      </div>
      <div class="tab">
        <input type="checkbox" id="chck2">
        <label class="tab-label" for="chck2">Item 2</label>
        <div class="tab-content">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. A, in!
        </div>
      </div>
    </div>
  </div>
  <div class="col">
    <h2>Open <b>one</b></h2>
    <div class="tabs">
      <div class="tab">
        <input type="radio" id="rd1" name="rd">
        <label class="tab-label" for="rd1">Item 1</label>
        <div class="tab-content">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eos, facilis.
        </div>
      </div>
      <div class="tab">
        <input type="radio" id="rd2" name="rd">
        <label class="tab-label" for="rd2">Item 2</label>
        <div class="tab-content">
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil, aut.
        </div>
      </div>
      <div class="tab">
        <input type="radio" id="rd3" name="rd">
        <label for="rd3" class="tab-close">Close others &times;</label>
      </div>
    </div>
  </div>
</div>

Version vom 7. November 2022, 13:23 Uhr


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>