Css: What's a Good Way to Create a Raised Box Effect

CSS: What's a good way to create a raised box effect?

I found this question while trying to figure this out as well, and I think what you're looking for is something like this http://jsfiddle.net/9Lt2477w/.

.raisedbox { 
    padding: 10px;
    border: 1px solid #77aaff;
    box-shadow:  -1px 1px #77aaff,
         -2px 2px #77aaff,
         -3px 3px #77aaff,
         -4px 4px #77aaff,
         -5px 5px #77aaff;
}

Thanks to http://sam-morrow.com/playground/css-cubes.py for the help here. I didn't realize you could just keep adding additional lines into the box-shadow property.

Fluent Design card lift effect

What makes the effect to looks like it is lifting is the transform: translate3d, see translate3d w3cschools docs.

When the box-shadow changes on :hover the element itself moves in a different position, delivering the effect.

So by giving transform: translate3d(0px, -1px, 0px); ( translate3d(x,y,z) ), the element moves 1px up and shadow casts down.

.card {  padding: 15px; /* JUST TO LOOK COOL */  border: 1px solid #eee;  /* JUST TO LOOK COOL */  box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px;  transition: all .3s ease-in-out;}
.card:hover {  box-shadow: rgba(0, 0, 0, 0.22) 0px 19px 43px;  transform: translate3d(0px, -1px, 0px);}

<div class="card" style="width:19.5rem">  <div class="card-body">   Lorem ipsum dolor sit ameta, card content  </div></div>

CSS Raised 3d image

You can use the css property box-shadow that also allows multiple shadows that will take the form of the element's bounding rectangle.

Snippet

body{    background:chocolate;}img{    box-shadow: 5px 5px white,                4px 4px white,                 3px 3px white,                 2px 2px white,                 1px 1px white,                5px 5px 5px black;    border:1px solid white;}

<img src="http://lorempixel.com/250/250/animals">

How to create profession box shadow effect in div using css

I've created exactly same box with background like that application. Hope it may help you.

html {      font-size: 10px;    }
    body {      font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;      font-size: 100%;      font-weight: 400;      line-height: 1.42857143;      background-color: #f4f4f4;      color: #404040;    }
    .content {      float: left;      width: 870px;    }      .content::after {        content: "";        clear: both;        display: table;      }
    .box {      padding: 5px 15px;      background: #fff;      box-shadow: 0 1px 2px #c9c9c9;      -moz-box-shadow: 0 1px 2px #c9c9c9;      -webkit-box-shadow: 0 1px 2px #c9c9c9;      border-radius: 2px;      margin-bottom: 15px;    }    .box:hover {      box-shadow: 0 2px 2px #bababa;      -moz-box-shadow: 0 2px 2px #bababa;      -webkit-box-shadow: 0 2px 2px #bababa;    }      .box h5 {        font-size: 1.4rem;        margin-top: 10px;        margin-bottom: 10px;        line-height: 1.1;      }      .box p {        font-size: 1.4rem;        font-weight: 400;        line-height: 1.5;        margin: 0 0 10px;      }

<div class="content">
  <div id="your-id" class="box">    <div class="box-content">      <h5>Caption</h5>      <p id="your-id">Not Mentioned</p>      <h5>Skills/Competencies</h5>      <p id="your-id">Layout  ,CSS  ,JavaScript  ,jQuery  ,HTML5  ,WordPress  ,Web Design  ,Web Development  ,HTML  ,PHP  ,AJAX  ,Cross-browser Compatibility  ,CSS3  ,UI/UX  ,Expert Frontend Developer  ,Responsive Web Design  ,Website Development  ,Web 2.0  ,Dreamweaver  ,Web Applications  ,Image Manipulation  ,Drupal  ,MySQL  ,Web Application Design  ,Web Interface Design  ,SVG  ,Front-end Development            </p>      <h5>Resumes</h5>      <p id="your-id">not mentioned</p>    </div>  </div><!-- .box -->  </div>

Create a inset effect using CSS in websites

Don't know if this will help, but using 1 px borders that are slightly lighter and darker than the background of 2 adjacent elements can emulate this. For Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Untitled</title>
<style type="text/css">
div{background:#555;}
.top{border-bottom:#333 solid 1px;}
.bot{border-top:#777 solid 1px;}
</style>
</head>
<body>
<div class="top">this</div>
<div class="bot">andthis</div>
</body>
</html>

EDIT:

As a side note, switching light and dark in the example above will give you a slightly raised/embossed border effect.

Can you apply 3d box shadow effects (lifted corners) on top and bottom of div?

I just wrapped your box with another div and got the desired output

EDIT: Demo had some alignment issue before, thanks for @zaqx for pointing out that. this is the updated fiddle.

Here is the fiddle

body {
  background-color: #e2e2e2;
}
.box h3{
    text-align:center;
    position:relative;
    top:80px;
}
.box {
    width:70%;
    height:200px;
    background:#FFF;
    margin:40px auto;
}

/*==================================================
 * Effect 2
 * ===============================================*/
.effect2
{
  position: relative;
}
.effect2:before, .effect2:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  box-shadow: 0 15px 10px #777;
  transform: rotate(-3deg);
}
.effect2:after
{
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

.effect-wrapper {
  position: relative;   
}
 .effect-wrapper:before, .effect-wrapper:after {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 15px;
    left: 16%;
    width: 52%;
    top: 8%;
    height: 5px;
    max-width: 300px;
    background: #777;
    box-shadow: 0 15px 10px #777;
    transform: rotate(183deg);
}

.effect-wrapper:after {
    transform: rotate(177deg);
    right: 16%;
    left: auto;
}

<div class="effect-wrapper">
    <div class="box effect2 effect3">
        <h3>Effect 2</h3>
    </div>
</div>

Multiple shadows in box-shadow for elevated elements in Material Design

Two shadows are blending together to achieve sharper or custom-shaped gradient from element edge to the end of shadow - effect you often can't achieve with single shadow. In the example below, resulted shadows are different:

#single {  box-shadow: 0 1px 4px rgba(0,0,0,1);  height: 100px;  margin-bottom: 20px;  width: 100px;}
#multiple {  box-shadow: 0 1px 4px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.5);  height: 100px;  width: 100px;}

<div id="single"></div><div id="multiple"></div>

css create rounded shadow under a square image

I think I figured it out. I basically used the spread property of the Box Shadow to shrink its width smaller than the element which it was associated with. It is the fourth px element in this code:

box-shadow: 0px 30px 40px -25px rgba(0, 0, 0, 1);

I then moved the shadow down vertically until I was happy with how much shadow it was showing.

Demo Here

Css: What's a Good Way to Create a Raised Box Effect