Ausbreitung des Coronavirus führt zu immer mehr Tafel-Schließungen

Um 1,6 Millionen bedürftige Tafel-Nutzer:innen jetzt nicht allein zu lassen, ruft Tafel Deutschland e.V. zu Solidarität und Unterstützung auf. Sie wollen helfen? Informationen finden Sie unter tafel.de.

Coronacharityshop.png

Eine weitere Möglichkeit ist der Einkauf im CoronaCharityShop – alle Einnahmen gehen zu 100 % an die Tafeln. Herzlichen Dank für Ihre Unterstützung.

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;
}

Weblinks[Bearbeiten]