How to codify this layout? [closed]

Question

How to codify this layout? [closed]

Navigation

#1 by (1 votes)
#2 by (1 votes)

-2

1 - How to give this aspect of the "div" be on a plane higher than the body, generating the shadow? 2 - In this case, the section has a certain transparency and the div is solid?

html css

asked by anonymous 27.07.2017 / 21:13

2 answers

Upload and Download Files - Open source How to make each click on the checkbox worth a number? [closed]

score 1 · Answer 1

This can be done with a very simple shading effect:

.teste1 {
  width: 100%;
  height: 100px;
  background-color: gray;
  display: flex;
  justify-content: center;
}
.teste2 {
  width: 100px;
  height: 100px;
  background-color: gray;
  box-shadow: 0 0 2px 0 rgba(0,0,0,0.12), 0 5px 5px 0 rgba(0,0,0,0.24);
}

<div class="teste1">
  <div class="teste2">

  </div>
</div>

Notice that the two divs have the same color, the rule is that in one applied a slight shading, so the depth level is at your discretion

Box shadow css tricks

score 1 · Answer 2

You basically need to play with background-color , a rgba(r, g, b, 0.5) should solve, and the reveal effect, you can do with box-shadow

html, body {
  position: relative;
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
  background-color: rgb(0,150,136);
}

#header {
  position: absolute;
  height: 30px;
  width: 100%;
  background-color: rgb(238,238,238);
  box-shadow: 0px 0px 5px silver;
}

#subheader {
  position: absolute;
  left: 0px;
  right: 0px;
  height: 60px;
  width: 400px;
  margin: auto;
  background-color: rgb(224,224,224);
  box-shadow: 0px 0px 10px black;
}

#content {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: 400px;
  margin: auto;
  height: calc(100% - 120px);
  background-color: rgba(224,224,224,0.5);
  box-shadow: 0px 0px 10px black;
}

#box {
  background-color: rgb(224,224,224);
  height: 60px;
}

<div id="header">
  <div id="subheader"></div>
</div>

<div id="content">
  <div id="box"></div>
</div>