Transparente Ränder mit  background-clip

Haben Sie jemals ein Element auf einer Seite mit transparenten Rändern gesehen? Ich glaube, Facebook hat es ursprünglich populär gemacht und damit Lightbox-Plugins wie Facebox hervorgebracht. Ich glaube nicht, dass Facebook diesen Look mehr aufweist, aber er ist immer noch ziemlich raffiniert.

Man könnte denken, es wäre so einfach wie das

#lightbox {
   background: white;
   border: 20px solid rgba(0, 0, 0, 0.3);
}

Das Setzen eines transparenten Rands auf einem Element zeigt jedoch den eigenen Hintergrund des Elements unter dem Rand an.

Glücklicherweise gibt es eine CSS3-Eigenschaft, die uns rettet! Sie heißt background-clip und wird speziell verwendet, um anzugeben, welcher Teil des Box-Modells zum Anzeigen des Hintergrunds verwendet werden soll. Sie tut, was sie zu tun scheint, sie schneidet den Hintergrund an dem angegebenen Teil der Box ab. Es gibt drei Werte, die sie haben kann, und Vendor-Präfixe sind involviert. Hier sind die drei Einstellungen, die sie haben könnte. Sie würden sie nicht alle gleichzeitig verwenden, dies dient der Bequemlichkeit, nur anzuzeigen

#lightbox {

  -moz-background-clip: border;     /* Firefox 3.6 */
  -webkit-background-clip: border;  /* Safari 4? Chrome 6? */
  background-clip: border-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */
				
  -moz-background-clip: padding;     /* Firefox 3.6 */
  -webkit-background-clip: padding;  /* Safari 4? Chrome 6? */
  background-clip: padding-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */
				
  -moz-background-clip: content;     /* Firefox 3.6 */
  -webkit-background-clip: content;  /* Safari 4? Chrome 6? */
  background-clip: content-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */
				
}

Hier sind die Schemata

Ich bin mir sicher, Sie sehen, worauf ich hinauswill... wenn wir background-clip auf padding-box setzen, endet der weiße Hintergrund vor dem Rand, und die Transparenz legt sich über andere Inhalte und erzielt den gewünschten Look!

Demo ansehen

Verwandt: background-origin

In unserem Lightbox-Beispiel ist der Hintergrund höchstwahrscheinlich eine solide Farbe. In diesem Fall ist background-origin eher irrelevant, da niemand jemals feststellen kann, wo die Farbe "begonnen" hat. Wenn der Hintergrund des Elements jedoch ein Bild ist, kann es ziemlich wichtig sein, wo der Ursprungspunkt des Hintergrunds beginnt.

Dies steht in Beziehung zu background-clip, denn wenn background-clip padding-box ist, aber background-origin auf dem Standardwert border-box belassen wird, wird ein Teil des background-image abgeschnitten, was wünschenswert sein kann oder auch nicht.

Hier ist die schematische Darstellung

Und ein visuelles Beispiel

Browserkompatibilität

Funktioniert in: Safari 5, Chrome 7, Firefox 3.6+, Opera 10, IE 9

Ich habe nur diese modernen Browser getestet und die Unterstützung ist gut. Es kann (und wird wahrscheinlich auch) etwas weiter zurück in den Nicht-IE-Browsern gehen.

Wenn Sie eine vollständigere Browserkompatibilität wünschen, können Sie immer die Double-Div-Methode verwenden.

<div id="lightbox">
   /* Set transparent background with PNG
       add padding to push inside box inward */

   <div id="lightbox-inside">
      /* Set white background in here */
   </div>

</div>

Ein weiterer Vorteil der Double-Div-Methode ist, dass Sie wirklich abgerundete Ränder erzielen könnten. Leider bleiben bei der Background-Clip-Methode der äußere Rand rund, aber die Kante des Hintergrunds bleibt gerade.

Schade, dass wir nichts wie background-radius haben, um das zu beheben

#lightbox
   border-radius: 16px;
   padding: 8px;

   /* NOT REAL */
   background-radius: 8px;
}

Kuriositäten

Danksagung

Danke an Alex Hall für die ursprüngliche Idee und Hilfe.

Hier ist eine einfache Demo, die auch die verschiedenen Werte von background-clip zeigt

Check out this Pen!

und background-origin

Check out this Pen!