-2

Could please someone help me to make the tabs as in mac os x in css ?

<div class="tabs">
   <div class="tab active"> <img src="" /> <span> General </span> </div>
   <div class="tab"> <img src="" /> <span> Appearance </span> </div>
   <div class="tab"> <img src="" /> <span> Bookmarks </span> </div>
   <div class="tab"> <img src="" /> <span> Tabs </span> </div>
</div>

mac os x tabs

Thanks in advance!

seven-phases-max
  • 11,765
  • 1
  • 45
  • 57
vitaly
  • 33
  • 6

1 Answers1

0

Try use "box-shadow: inset" for inside shadows. 

.tab{
  background-color: #D3D3D3;
  width: 100px;
  height:50px;
  display:inline-block;
  line-height: 50px;
  text-align:center;
}
.tab:hover{
  -moz-box-shadow:    inset 0 0 10px #000000;
  -webkit-box-shadow: inset 0 0 10px #000000;
  box-shadow:         inset 0 0 10px #000000;
}
Nikita Chernykh
  • 270
  • 1
  • 4
  • 18
  • @vitaly I think this discussion can help with having it on the left and right https://stackoverflow.com/questions/17572619/inset-box-shadow-only-on-one-side – Nikita Chernykh Nov 30 '17 at 21:58