Geek asks and answers

Glass (opaque / transparent) border around drawers?

I am wondering if I can get some kind of glass border around the boxes in CSS. For example, a navigation div containing ul, etc. This is the type of thing I'm trying to describe.

http://puu.sh/uAqw

Thank!

+3
source share
3 answers

You can achieve an effect very close to this using pure CSS. This example uses a single element with an RGBA border color and several box shadows to add highlights and shadows.

Demo: http://dabblet.com/gist/2775781

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

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

, box-shadow RGBA IE9 + Firefox, Chrome, Opera Safari. ( .) , , .

+3

CSS Glass/Blur. .

jsfiddle: http://jsfiddle.net/DoubleYo/hyETB/1/

+1

, , , PNG - ( , ); RGBA .

, . , 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 RGBA < 1,0; , , .

, (. ), , . , .

And as long as CSS Backgrounds and Borders Level 3 multiple background images are better supported (but this CR is already, so you might be lucky), you can achieve the illusion of multiple background images using different positional (different) background images for nested (positioned) ) block elements. This way you do not need a box and a background image of a fixed size.

0
source

More articles:


All Articles