css - ボックスの周りのガラス (不透明/透明) 境界線?

Question

CSSでボックスの周りに一種のガラス効果の境界線を得ることができるかどうか疑問に思っています. たとえば、などdivを含むナビゲーションです。これは、私が意味するものの例ですul

score 5 · Accepted Answer

2020年のガラス効果

2012 年にこれに回答したとき、当時のブラウザーで十分にサポートされていた機能のみを使用しました。後世のために以下に見つけることができますが、最初に、元の質問のものとは少し異なる、少し興味深いガラス効果を共有します.

また、余分な要素を 1 つまたは 2 つ気にすることもなくなりましたが、プレゼンテーション要素が嫌いな場合は、古い回答をチェックして、疑似要素を使用してそれらを回避する方法を確認してください。

完全なデモ

.glass {
  backdrop-filter: contrast(130%) brightness(120%) blur(2px);
  background:
    radial-gradient(
      ellipse at 16.7% -10%,
      hsla(0, 0%, 100%, 0.44) 24%,
      hsla(0, 0%, 100%, 0.4) 25%,
      hsla(0, 0%, 100%, 0.2) 45%,
      hsla(0, 0%, 100%, 0.1)
    );
  background-size: 300% 100%;
  border-radius: 10px;
  box-shadow:
    0 2px 1px hsla(0, 0%, 100%, 0.5) inset,
    0 -2px 1px hsla(250, 70%, 5%, 0.3) inset,
    0 -2px 6px hsla(0, 0%, 100%, 0.25);
}



/* -------------------------------------------
   Decorative (not relevant to technique)
   ------------------------------------------- */
html {
  background:
    radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32.9%, rgba(255,255,255,0) 33%) 0 0,
    radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13.9%, rgba(255,255,255,0) 14%) 0 0,
    radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19.9%, rgba(255,255,255,0) 20%) 0 110px,
    radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13.9%, rgba(255,255,255,0) 14%) -130px -170px,
    radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13.9%, rgba(255,255,255,0) 14%) 130px 370px,
    radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13.9%, rgba(255,255,255,0) 14%) 0 0,
    linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%);
  background-size: 470px 470px, 970px 970px, 410px 410px, 610px 610px, 530px 530px, 730px 730px, 100% 100%;
  background-color: #840b2a;
  font: 17px/21px Segoe UI, Tahoma, Helvetica, sans-serif;
  height: 100%;
  idth: 100%;
}

.frame {
  padding: 20px;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.content {
  background: lemonchiffon;
  border: 1px solid sienna;
  padding: 20px 25px;
  width: 300px;
}

.content > :first-child { margin-top: 0; }
.content > :last-child { margin-bottom: 0; }

c {
  background: rgba(255,255,255,.5);
  box-shadow: 0 0 3px rgba(0,0,0,.4);
  color: #840b2a;
  font-family: Consolas, Courier New, Courier, monospace;
  font-weight: bold;
  padding: 0 3px;
}

<div class="glass frame centered">
  <section class="content">
    <p>A glass-effect frame using pure CSS.</p>
  </section>
</div>

分解する

背景フィルター

窓ガラスの後ろにあるものをぼかすと、光がガラスを通過する際に焦点がずれているような印象を与えます。また、コントラストと明るさを上げて、表面反射効果で背景を際立たせます。

backdrop-filter: contrast(130%) brightness(120%) blur(2px);

CSS グラデーション

これは、ガラスの表面から不均一に反射する光の印象を伝えます。この例では、放射状グラデーションを使用して、光源がペインから有限の距離にあることを暗示していますが、線形または円錐状のグラデーション (サポートが少ない) を使用して、別の照明効果を伝えることもできます。

楕円の端が表示されないように、背景のサイズも大きくなります。

background:
  radial-gradient(
    ellipse at 16.7% -10%,
    hsla(0,0%,100%,.44) 24%,
    hsla(0,0%,100%,.4) 25%,
    hsla(0,0%,100%,.2) 45%,
    hsla(0,0%,100%,.1)
  );
background-size: 300% 100%;

複数のボックスシャドウ

いくつかの挿入された影は、上端を強調表示し、他の影を陰にするために使用されます。外側の影は、ボックスの端の周りの背景に光が投じられていることを意味します。これらの影の位置と強度を変更すると、暗黙の光源の位置について異なることが暗示されます。

box-shadow:
  0 2px 1px hsla(0,0%,100%,.5) inset, /* Highlight upper edge */
  0 -2px 1px hsla(250,70%,5%,.3) inset, /* Shade lower edge */
  0 -2px 6px hsla(0,0%,100%,.5); /* Imply light cast around the edges */

2012年のガラス効果（元の回答）

より単純な CSS を使用して、これに非常に近い効果 (質問の例とほぼ同じ) を実現できます。この例では、RGBA 境界色と複数のボックスシャドウを持つ 1 つの要素を使用して、ハイライトとシャドウを追加します。

.box {
  background: #f0edcc;
  background-clip: padding-box;          /* Background stops at border */
  border: 4px solid rgba(255,255,255,.2);
  border-radius: 3px;
  box-shadow:
     0    0   1px  rgba(255,255,255,.8), /* Bright outer highlight */
     0    0   3px  rgba(0,0,0,.8),       /* Outer shadow */
     1px  1px 0    rgba(0,0,0,.8) inset, /* Inner shadow (top + left) */
    -1px -1px 0    rgba(0,0,0,.8) inset; /* Inner shadow (bottom + right) */
  padding: 10px;
}



/* -------------------------------------------
   Decorative (not relevant to technique)
   ------------------------------------------- */
html {
  background: 
    radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32.9%, rgba(255,255,255,0) 33%) 0 0,
    radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13.9%, rgba(255,255,255,0) 14%) 0 0,
    radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19.9%, rgba(255,255,255,0) 20%) 0 110px,
    radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13.9%, rgba(255,255,255,0) 14%) -130px -170px,
    radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13.9%, rgba(255,255,255,0) 14%) 130px 370px,
    radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13.9%, rgba(255,255,255,0) 14%) 0 0,
    linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%);
  background-size: 470px 470px, 970px 970px, 410px 410px, 610px 610px, 530px 530px, 730px 730px, 100% 100%;
  background-color: #840b2a;
  font: 13px/17px Segoe UI, Tahoma, Helvetica, sans-serif;
  height: 100%;
  width: 100%;
}

c {
  background: rgba(255,255,255,.5);
  box-shadow: 0 0 3px rgba(0,0,0,.4);
  color: #840b2a;
  font-family: Consolas, Courier New, Courier, monospace;
  font-weight: bold;
  padding: 0 3px;
}

.box {
  bottom:0;
  height: 150px;
  left:0;
  margin:auto;
  position:absolute;
  top:0;
  right:0;
  width: 250px;
}

.box > :first-child { margin-top: 0; }
.box > :last-child { margin-bottom: 0; }

<div class="box">Your message.</div>

box-shadowRGBA 境界線の色は、IE9 以降の Firefox、Chrome、Opera、および Safari の最新バージョンでのみサポートされていることに注意してください。(ただし、後者のブラウザーの古いバージョンは、プロパティのプレフィックス付きのバージョンをサポートしている場合があります。) どちらもサポートしていないブラウザーでは、これは内側の黄色いボックスだけに劣化します。

score 1 · Accepted Answer

現在のところ、Glass/Blur 効果の幅 CSS を作成することはできません。ただし、幅の透明な境界線とボックスの影を使用すると、背景を減衰させることができます.

私のjsfiddleで結果を見ることができます：http://jsfiddle.net/DoubleYo/hyETB/1/

score 0 · Accepted Answer

例の境界線にはパターンがあるため、おそらくアルファチャネルを備えた1つ以上のPNG背景画像が必要になります（親の背景が必要な場所で必要な範囲で輝くことができるようにするため）。ここでは、均一なRGBA色の境界線だけでは不十分です。

次に、その背景を持つ要素に別のブロック要素をネストします。1つの背景画像、例のHTML：

<div id="glass-box">
  <div id="inner">
    <p>Text</p>
  </div>
</div>

CSSの例：

#glass-box
{
  background: transparent url(glass.png) 0 0 no-repeat;
}

#glass-box #inner
{
  margin: 10px;
  background-color: white;
}

代わりにtransparent、不透明度が1.0未満のRGBAカラーを試してみることもできます。おそらく、任意の色相の上に投影できる半透明のグレースケールガラスの背景画像を使用するでしょう。

複数の境界線がネイティブでより適切にサポートされるまで（私のコメントを参照）、ブロック要素をネストし、それぞれに異なる境界線を与えることで、複数の境界線を実現できます。これらの要素の一部に余白があると、目的の効果を得るためにネストする必要のある要素の数を減らすのに役立ちます。

そして、CSSの背景と境界線レベル3の複数の背景画像がより適切にサポートされるまで（ただし、すでにCRであるため、幸運かもしれません）、異なる位置にある（異なる）背景画像を使用して、複数の背景画像の錯覚を実現できます。ネストされた（配置された）ブロック要素。そうすれば、固定サイズのボックスや背景画像は必要ありません。

css - ボックスの周りのガラス (不透明/透明) 境界線?

3 に答える 3