IT-Kurs CSS-Grundlagen 026_Anzeige, Sichtbarkeit, Effekte

1
Versteckt das Element, macht es auf der Seite unsichtbar und es nimmt keinen Platz ein und beeinflusst nicht das Layout. Das Element wird nicht auf der Seite angezeigt.

1
    .example{
2
        display: none;
3
    }

1
    <div class="example">Testtext</div>ABC123

1
Zeigt das Element als Block-Element an. Es wird auf der Seite als Block angezeigt, die Breite ist standardmäßig 100% des übergeordneten Containers.
2
Ein Block-Element ist ein Element, das die gesamte Breite einnimmt, mit Zeilenumbrüchen davor und danach.

1
  .base{
2
      background-color: deepskyblue;
3
  }
4
  .example{
5
    display: block;
6
  }

1
    <a class="base example" href="">Hyperlink-Test</a>
2
    <br>
3
    <a class="base" href="">Hyperlink-Test</a>

1
Zeigt das Element als Inline-Element an. Elemente werden in derselben Zeile angezeigt, nehmen nicht eine ganze Zeile ein, die Breite wird durch den Inhalt bestimmt.
2
Inline-Elemente benötigen nur die notwendige Breite und erzwingen keinen Zeilenumbruch.

1
  .base{
2
        background-color: aquamarine;
3
  }
4
  .example{
5
    display: inline;
6
  }

1
    <p class="base example">Absatztest</p>
2
    <p class="base">Absatztest</p>

1
Zeigt das Element als Inline-Block-Element an. Elemente werden in derselben Zeile angezeigt, aber es können Breite, Höhe und andere Block-Element-Eigenschaften festgelegt werden.

1
  .example1{
2
      display: inline-block;
3
      width: 100px;
4
      height: 100px;
5
      background-color: cornflowerblue;
6
  }
7
  .example2{
8
      background-color: cornflowerblue;
9
  }

1
    <p class="example1">Absatztest</p>
2
    <p class="example1">Absatztest</p>
3
    <p class="example2">Absatztest</p>

1
Legt fest, dass das Element sichtbar ist.

1
  .example{
2
      visibility: visible;
3
  }

1
  <div class="example">Testtext</div>ABC123

1
Legt fest, dass das Element unsichtbar ist, aber das versteckte Element nimmt weiterhin denselben Platz ein wie zuvor. Das bedeutet, dass das Element zwar versteckt ist, aber weiterhin das Layout beeinflusst.

1
  .example{
2
      visibility: hidden;
3
  }

1
  <div class="example">Testtext</div>ABC123

1
.base{
2
    width: 200px;
3
    height: 200px;
4
    background-color: #3498db;
5
}
6
.example{
7
    opacity: 0.5;
8
    /* 50% Transparenz */
9
}

1
    <div class="base"></div>
2
    <br>
3
    <div class="base example"></div>

1
    .example{
2
        text-shadow: 5px 5px 10px rgba(243, 40, 40, 0.8);
3
        /* 2px horizontaler Versatz, 5px vertikaler Versatz, 5px Unschärferadius, Farbe rgba(243, 40, 40, 0.8) */
4
        font-size: 100px;
5
    }

1
    <div class="example">Testtext</div>

1
    .example{
2
        background: linear-gradient(to bottom, red, blue);
3
        /* Verlauf von oben nach unten, Rot nach Blau */
4
        height: 100px;
5
    }

1
    <div class="example"></div>

1
    .example{
2
        background: radial-gradient(circle, red, blue);
3
        /* Kreisförmiger Verlauf, Rot nach Blau */
4
        height: 100px;
5
    }

1
    <div class="example"></div>

1
.base {
2
    height: 100px;
3
    width: 100px;
4
    background-color: lightblue;
5
}
6
.example1 {
7
    transform: translate(50px, 20px);
8
    /* Horizontal um 50px verschieben, vertikal um 20px verschieben */
9
}
10
.example2 {
11
  transform: scale(0.5);
12
  /* Element auf das 0,5-fache skalieren */
13
}
14
.example3 {
15
    transform: rotate(45deg);
16
    /* Im Uhrzeigersinn um 45 Grad drehen */
17
}
18
.example4 {
19
    transform: skew(50deg, 20deg);
20
    /* Horizontal um 50 Grad neigen, vertikal um 20 Grad neigen */
21
}
22
.example5 {
23
    transform: translate(50px, 60px) rotate(45deg) scale(1.5);
24
}

1
    <div class="base example1"></div>
2
    <div class="base example2"></div>
3
    <div class="base example3"></div>
4
    <div class="base example4"></div>
5
    <div class="base example5"></div>