neumorphism

by jpeter06

HTML

<h1>
Titulo
</h1>
<div class="neocont">
  <div class="neocab">
  Cabecera
  </div>
  <div class="neobody">
  Texto dentro del body
  </div>
  <div class="neofeet">
  <button class="neobutton">Boton1
  </button>
  <button class="neobutton">Boton2
  </button>
  </div>
</div>

<div class="neocont">
  <div class="neocab">
  Cabecera
  </div>
  <div class="neobody">
  Texto dentro del body
  </div>
  <div class="neofeet">
  <button class="neobutton">Boton1
  </button>
  <button class="neobutton">Boton2
  </button>
  </div>
</div>

CSS

:root{
    --neo-bg: #ebecf0;
    --neo-color: #8992a5;
    --neo-bt-bg1: #ffaa77;
    --neo-shadow:#c8c9cc;
    --neo-light:#FFFFFF;
}

html, body{
  margin:0px;
  padding:0px;
  overflow: hidden;
  width:100%;
  height:100%;
  background:var(--neo-bg);
  color: var(--neo-color);
  display:flex;
  align-items: center;
  justify-content: center;
  flex-direction:column;
  justify-content:space-around;
}

.neocont{
  box-shadow:  6px 6px 11px var(--neo-shadow), 
             -5px -5px 11px var(--neo-light);
  border-radius: 10px;
  padding:10px;
}

.neocab{
  box-shadow: inset 1px 1px 2px var(--neo-shadow), 
            inset -1px -1px 2px var(--neo-light);
  border-radius: 8px;
  padding:6px;
}

.neobody{
    padding:6px;
}

.neofeet{
  padding:6px;
}
.neobutton{
  box-shadow:  3px 3px 6px var(--neo-shadow), 
             -3px -3px 6px var(--neo-light);
  border-radius: 8px;
  border:none;
  padding:6px;
  margin-left:4px;
  color: var(--neo-color);
  /*
  background: var(--neo-bt-bg1);
  */
}