CODEWITHSUNDEEP
htmlcsswebdropshadow
redleaf
redleaf

Reputation: 425

Stack two borders with drop-shadows?

How could I wrap a border around another border and have them both use inset drop-shadows (like double matting in a picture frame)?

Upvotes: 0

Views: 295

Answers (3)

0b10011
0b10011

Reputation: 18795

You can accomplish this using the :before and :after pseudo-elements. See jsFiddle demos at end of answer.

HTML

<div class="frame"><img src="../img/logo.png"></div>

CSS

.frame {
    display:inline-block;
    position:relative;
    margin:20px;
    z-index:5;
    padding:10px;
    background:#376b90;
}
.frame:before {
    position:absolute;
    content:".";
    display:block;
    font-size:0;
    color:transparent;
    /* Change left, right, top, bottom, and box-shadow to position */
    left:0;
    top:0;
    right:0;
    bottom:0;
    box-shadow:inset 0 0 3px 2px black;
}
.frame:after {
    position:absolute;
    content:".";
    display:block;
    font-size:0;
    color:transparent;
    /* Change left, right, top, bottom, and box-shadow to position */
    left:5px;
    top:5px;
    right:5px;
    bottom:5px;
    box-shadow:inset 0 0 3px 2px black;
}

Example Usage

Upvotes: 1

Chase Florell
Chase Florell

Reputation: 47377

Here are my fiddle's on the topic

OPTION 1)

You can use Pseudo Classes to accomplish this

Html

<span class="doubleMatt">
    <img src="http://lorempixel.com/400/200/" />
</span>

CSS

span,img{padding:0;margin:0;border:0;}
.doubleMatt{
    position:relative;
    display:inline-block;
    font-size:0;
    line-height:0;
}

.doubleMatt:after{
    position:absolute;
    top:1px;
    left:1px;
    bottom:1px;
    right:1px;
    border:4px solid rgba(255,255,255,0.5);
    outline:1px solid rgba(0,0,0,0.2);
    content:" ";
}​

OPTION 2)

You can use some basic (one dimensional) goodness

CSS

.basicMatt {
    background:#222;
    padding:3px;
    border:3px solid #666;
}

HTML

<img class="basicMatt" src="http://www.lorempixel.com/400/200/" />

OPTION 3)

you can use an Outline

CSS

.outlinedMatt{
    background:#fff;
    padding:8px;
    border:3px solid #222;
    outline:3px solid #666;
    margin:3px;
}

HTML

<img class="outlinedMatt" src="http://www.lorempixel.com/400/200" />

Upvotes: 1

Keith
Keith

Reputation: 1394

you could nest the divs as shown in - http://jsfiddle.net/nG4Td/2/

<div class="border">
  <div class="border2">
    <p>hello world</p>
  </div>
</div>

css

.border{
  border: 5px inset black;
  background:#ccc;
  width:200px;
  height:200px;
  padding:20px;    
}
.border2{
  border: 5px inset black;
  background:#eee;
  width:150px;
  height:150px;
  padding:20px;    
 }`

Upvotes: 1

Related Questions