CODEWITHSUNDEEP
htmlcss
Zecrow
Zecrow

Reputation: 233

How to make inset bottom shadow or make it image

html

  <div class="menu">
        <a href="">Menu1</a>
        <a href="">Menu2</a>
        <a href="">Menu3</a>
        <a href="">Menu4</a>
        <a href="">Menu5</a>
        <a href="">Menu6</a>
        <a href="">Menu7</a>
    </div>

css:

header div.menu
{
    background: url('img/menu_bg.png') no-repeat;
    height: 42px;
    width: 930px;
}
header div.menu a
{
    font-family: 'Neo_medium';
    text-decoration: none;
    color: #323232;
    display: inline-block;
    height: 42px;
    line-height: 42px;
    padding-left: 15px;
    padding-right: 15px;
}
header div.menu a:hover
{
    /*box-shadow: inset 0 4px 2px 5px #b1defe;*/
        background: url('img/menu_item_bg.png') no-repeat;
}

enter image description here

so I need to make it like in this picture, and I don't know how to do it by picture or by box-shadow inset if is possible, if I use the background picture as blue shadow, it doesn't look good, it looks roughly, i think that better make it by box-shadow but how?

Upvotes: 0

Views: 100

Answers (1)

Sathya
Sathya

Reputation: 5308

.menu
{
color: white;
background-color: @action-btn-color;
background-image: -webkit-linear-gradient(#FDFDFD, #FFFFFF);
background-image: -moz-linear-gradient(#FDFDFD, #FFFFFF);
background-image: -o-linear-gradient(#FDFDFD, #FFFFFF);
background-image: linear-gradient(#FDFDFD, #FFFFFF);
border: solid 1px #B7B7B7;
text-align: center;
padding: 4px;
cursor: default;
}

change colors based on your needs.

Upvotes: 1

Related Questions