CSS/Eigenschaften/Anzeige/clip

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die CSS-Eigenschaft clip ermöglicht es, festzulegen, dass nicht die gesamte Box des Elementes dargestellt wird.

  • CSS 2.0
  • Chrome
  • Firefox
  • IE 8
  • Opera
  • Safari
Beispiel ansehen …
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>clip</title>
    <style>
      img {
        position: absolute;
        overflow: hidden;
        clip: rect(100px, 135px, 125px, 90px);
      }
      img:hover { clip: auto; }
    </style>
  </head>
  <body>
    <h1>Inhalte beschneiden mit clip</h1>
    <h2>Wer bin ich?</h2>
    <p>
      <img src="//wiki.selfhtml.org/mediawiki/images/4/4d/Celsius.jpg" 
           alt="Anders Celsius" 
           title="Anders Celsius">
    </p>
  </body>
</html>
In diesem Beispiel wird ein Bild dargestellt und auf einen kleinen Ausschnitt zugeschnitten. Mittels der Pseudoklasse :hover wird das gesamte Bild sichtbar gemacht.
Beachten Sie, dass nicht nur die Darstellung beeinflusst wird, sondern auch :hover zunächst nur über dem Ausschnitt wirkt.

Mithilfe von clip können Sie den Anzeigebereich eines absolut positionierten Elementes beschneiden. clip erwartet als Wert eine der Angaben

  • auto, Voreinstellung, keine Beschneidung des Anzeigebereiches
  • die Funktion rect(), Festlegung auf eine rechteckige Fläche zu beschneiden und vier durch Kommata separierte Längenangaben, die negativ jedoch keine Prozentangaben sein dürfen oder jeweils der Wert auto
    • erster Wert: Abstand der oberen Kante des Ausschnitts von der oberen Kante der Borderbox des Elements
    • zweiter Wert: Abstand der rechten Kante des Ausschnitts von der linken Kante der Borderbox des Elements
    • dritter Wert: Abstand der unteren Kante des Ausschnitts von der oberen Kante der Borderbox des Elements
    • vierter Wert: Abstand der linken Kante des Ausschnitts von der linken Kante der Borderbox des Elements

Die Angaben clip: auto; und clip: rect(auto, auto, auto, auto); erzeugen dabei unterschiedliche Darstellungen.

Beachten Sie, dass die Spezifikationen CSS2 und CSS2.1 hier unterschiedliche Festlegungen treffen.

Die aktuellen Versionen der Browser wenden die Eigenschaft clip auch auf Elemente an, die mit position: fixed; am Viewport ausgerichtet werden.

Hinweis

In der CSS3-Spezifikation wird die Clip-Eigenschaft künftig durch clip-path ersetzt. Hierfür gibt es für SVG eine Empfehlung, die (Stand August 2014) jedoch noch nicht auf HTML-Elemente erweitert wurde..

[Bearbeiten] Weblinks

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML