Transparenz

Ein nettes stilistisches Mittel um langweilige Webseiten-Layouts aufzupeppen sind halbtransparente Boxen, Texte oder auch Grafiken.

Mit nur ein paar Codezeilen lassen sich Boxen, Texte oder Bilder halbtransparent darstellen.



Anwendungsmethode 1: filter und opacity

Mit dieser Methode können Boxen, Texte und sogar Grafiken halbtransparent dargestellt werden.

Für den heutigen Gebrauch empfehle ich die folgende einfache Schreibweise:

.transparent {
  filter: alpha(opacity=50); /* IE ab IE4 */
  opacity: 0.5; /* CSS3 */
}

filter ist eine spezielle Eigenschaft des InternetExplorers und funktioniert schon ab dem IE4.

opacity ist eine Eigenschaften welche eigentlich erst mit CSS3 in die Browser implementiert werden sollen. Zulässig sind Werte zwischen 0.00 (totale Transparenz) und 1.00 (keine Transparenz). Mit dem Wert 0.5 erreicht man eine 50%ige Transparenz.

Es gibz noch weitere browserspezifischere Methoden für ältere Browser, die ich aus heutiger Sicht nicht mehr verwende. Darum möchte ich jetzt nicht näher darauf eingehen.

Die Transparenz wird auf Kinderelemente vererbt. Ist eher ein Nachteil, da alle Kinderelemente nicht wieder untransparent gemacht werden können.


kompletter Beispiel-Code

Eine kompletter Code für eine transparente Box auf einer Hintergrundgrafik könnte so aussehen:

<html>
<head>
  <style type="text/css">
  <!--
    body {
      background: #EEE;
      background-image: url(images/background_transparenz1.gif);
      padding: 20px;
    }
    .box {
      background-color: #F90;
      padding: 10px;
      width: 500px;
    }
    .transparent {
      filter: alpha(opacity=70); /* IE ab IE4 */
      opacity: 0.7; /* CSS3 */
    }
  -->
  </style>
</head>
<body>
  <div class="box transparent">
  <img src="/./images/background_transparenz2.png" alt="Grafik" />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut venenatis auctor fermentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
  </div>
</body>
</html>

Resultat dieses Codes anzeigen.



Anwendungsmethode 2: RGBA

Mit der Farbzuweisung RGBA kann auch eine Tranzparenz erzeugt werden. (jedoch nicht für Grafiken)

RGB steht für Red, Green, Blue und ist ein Farbraum. Für Farbangaben bei Websites werden in der Regel HEX-Codes verwendet. RGBA ist eine Erweiterung des RGB-Farbraums und steht für Red, Green, Blue, Alpha. Alpha bezieht sich auf die Opacity, bzw. auf den Grad der Transparenz.

.transparent {
    background-color: rgb(128,128,128); /* fallback */
    background-color: rgba(0,0,0,0.5);
}

Für den Fall das RGBA nicht funktioniert, baut man den "fallback" ein um eine alternative Farbe zu setzen.


kompletter Beispiel-Code

Eine kompletter Code für eine transparente Box auf einer Hintergrundgrafik könnte so aussehen:

<html>
<head>
  <style type="text/css">
  <!--
    body {
      background: #EEE;
      padding: 20px;
    }
    .box1 {
      background-image: url(images/background_transparenz2.png);
      background-color: #CCC;
      width: 500px;
      height: 200px;
      padding: 0;
      margin: 0;
    }
    .box2 {
      width: 300px;
      height: 80px;
      padding: 10px;
      position: relative;
      left: 150px;
      top: 80px;
      color: #FFF;
      background-color: rgb(128,128,128); /* fallback */
      background-color: rgba(0,0,0,0.5);
    }
  -->
  </style>
</head>
<body>
  <div class="box1">
    <div class="box2">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut venenatis auctor fermentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
    </div>
  </div>
</body>
</html>

Resultat dieses Codes anzeigen.



Anwendungsmethode 3: transparente GIF / PNG

Grafiken können auch direkt (ohne CSS) transparente Bereiche haben.

  • GIF Dateien können nur komplett transparente Bereiche haben.
  • PNG Dateien hingegen können auch halbtransparente Werte annehmen.



  • Donnerstag, 31 Mai 2012

Kommentare (0)

Bitte Kommentar schreiben

Bitte einloggen, um einen Kommentar zu schreiben.