CSS/Eigenschaften/äußere Gestaltung/Transformationen/skew

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Mit transform:skew() können Sie ein Element neigen, bzw. verzerren. Durch dieses Schrägstellen können Sie rechteckige Elemente zu Parallelogrammen neigen.

  • CSS 3.0
  • IE 10
  • Firefox
  • Chrome
  • Safari
  • Opera
Beachten Sie: Wie Sie an den Beispielen erkennen können, wird die ursprüngliche Größe der Elemente für den Dokumentfluss verwendet. Verzerrte Objekte können so über Ränder oder in den Text hineinragen.

Funktionen[Bearbeiten]

Es gibt verschiedene Funktionen, die in Struktur und Syntax geringfügig abweichen:

skew()[Bearbeiten]

  • Achtung

transform: skew() benötigt folgende Angaben:

  • ein Winkelmaß für die horizontale Verzerrung
  • ein Winkelmaß für die vertikale Verzerrung


Beispiel ansehen …
    :hover .skew {  
      -webkit-transform: skew(30deg, 30deg);   /* für Safari und Android  */
       -ms-transform: skew(30deg, 30deg);       /* für IE 9  */
       transform: skew(30deg, 30deg);	
     }
 
    :hover .skewX { 
      transform: skewx(30deg);	
     }
 
    :hover .skewY { 
      transform: skewy(30deg);	
     }
Beachten Sie: Die Funktion skew() ist nicht in den letzten Entwurf des w3.org übernommen worden. MDN empfiehlt stattdessen bei einem Parameter skewx() und bei mehreren Parametern transform:matrix() zu verwenden.

skewX()[Bearbeiten]

transform: skewX() benötigt folgende Angaben:

Beachten Sie: Für das Winkelmaß sind sowohl negative als auch positive Werte erlaubt.

skewY()[Bearbeiten]

transform: skewY() benötigt folgende Angaben:

Beachten Sie: Für das Winkelmaß sind sowohl negative als auch positive Werte erlaubt.

Anwendungsbeispiel[Bearbeiten]

angeschrägtes Menü aus Parallelogrammen[Bearbeiten]

Im folgenden Beispiel sollen die Listenelemente der Navigation pfeilartig angeschrägt werden. Dafür verwenden wir transform: skewX():

Beispiel ansehen …
<style>
  ul {
    list-style: none;
    margin: 1em 0;
    padding: 0;
  }

  ul li {
    display:inline-block;
    width: 100px;
  }

  ul a {
    background: lightgrey;
    border: 1px solid grey;
    display: block;
    margin: 0.5em 1em;
    padding: 0.5em 1em;
    text-decoration: none;
    transform: skewX(-30deg);
  }

  ul a:hover {
    background: grey;
  }
  </style>
...
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#1.html">Seite 1</a></li>
  <li><a href="#2.html">Seite 2</a></li>
  <li><a href="#2plus.html">Impressum</a></li>
  <li><a href="#3.html">Kontakt</a></li>
</ul>

Die Elemente der Navigation werden zu Parallelogrammen verzerrt - leider aber auch der Text der beinhaltenden Links!

Eine Möglichkeit wäre es, einem Kind-Element ul li a span eine entsprechende positive Verzerrung zu geben. Allerdings würde der Text dann zweimal verzerrt werden und entsprechend unscharf dargestellt.

In der hier verwendeten Alternative werden die angeschrägten Parallelogramme nun durch Pseudoelemente ul a::before gebildet. Diese werden mit z-index:-1; in den Hintergrund geschoben.

Die Links der Navigation werden normal darüber dargestellt.

Beispiel ansehen …
ul a {
  display: block;
  margin: 0.5em 1em;
  position: relative;
  text-decoration: none;
  z-index: 0;
}

ul a::before {
  background: lightgrey;
  border: 1px solid grey;
  content: "\A0 ";
  display: block;
  height: 100%;
  margin: -0.5em -1em;
  padding: 0.5em 1em;
  position: absolute;
  transform: skewX(-30deg);
  width: 100%;
  z-index: -1;
}
 
ul a:hover::before {
  background: grey;
}


Achtung!

Die Eigenschaft transform ist derzeit (Stand: August 2016) noch nicht in alle aktuellen Browser implementiert, deshalb muss man proprietäre Eigenschaften verwenden:
für Android-Browser -webkit-transform

Details: caniuse.com

Sie sollten bei der Definition solcher noch nicht umfassend verbreiteter Eigenschaften die herstellerspezifischen Angaben immer vor der standardisierten Form machen. Da später gemachte Angaben frühere überschreiben, ist so sichergestellt, dass die standardisierten Angaben von dem Zeitpunkt an, an dem sie unterstützt werden, auch verwendet werden.

Weblinks[Bearbeiten]