Elemente mit CSS teilweise verstecken

Autor Adrian Kommentare Kommentar verfassen

Beim Durchblättern der CSS-Standards ist mir folgende erstaunliche Eigenschaft aufgefallen, die ich gerne mal vorstellen würde: Die Clip-Eigenschaft. Diese ermöglicht es uns, HTML-Elemente wie beispielsweise Divs oder Bilder teilweise zu verstecken.
Dafür definiert man über die Clip-Eigenschaft einfach für jede Seite die Anzahl an Pixeln, die abgeschnitten werden sollen:

Technische Umsetzung

<style type="text/css">
#divelement {
    position: absolute; /* Das div-Element muss absolut positioniert sein, sonst funktioniert es nicht. */
    width: 200px;
    height: 200px;
    background-color: grey;
    clip: rect(10px, 10px, 10px, 10px);
}
</style>

Die Pixelangaben bedeuten:

  1. Ausgeschnittener Abstand von oben
  2. Ausgeschnittener Abstand von rechts
  3. Ausgeschnittener Abstand von unten
  4. Ausgeschnittener Abstand von links
<div id="divelement"></div>

Das Divelement ist hier nur 180 × 180 px groß, weil von jeder Seite zehn Pixel abgeschnitten wurden.

Browserkompatibilität

Was mich besonders erstaunt hat: Diese Eigenschaft ist nicht etwa CSS 3, sondern CSS 2.1 und funktioniert ab Internet Explorer 4.

Aber natürlich hat der Internet Explorer mal wieder eine Macke, und zwar: Man muss in den Klammern von rect() die Kommata weglassen, sonst funktioniert es nicht. Von diesem Fehler sind alle Versionen bis einschließlich Version 7 betroffen.

Weiterlesen

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>