1)
2)
3)
Может ещё кому оно надо.
В общем так. Сидела вчера, думала как разнообразить дизайн. и попробовала оформить блок меню в шапке. Всё очень просто, так же как оформляем блоки постов и сайдбар. Тень я сделала внутренюю ( inset).В итоге получился вот такой код (код не полный, только цвет, тень и картинка) Меняйте по своему вкусу))
1.)
#page .nav .item a{
background-color: rgba(255, 255, 255, 0.62);
border-radius: 5px;
box-shadow: 0 0 6px 0 #2E7B34 inset;
background-image: url(код картинки);
background-repeat: no-repeat;
}
При наведении увеличила тень блока и поменяла картинку:
2), 3.)
#page .nav .item a:hover{
background-color: rgba(255, 255, 255, 0.62); /*- -цвет блока- -*\
border-radius: 5px;
box-shadow: 0 0 12px 0 #2E7B34 inset; /*- -тень блока - -*\
background-image: url(код картинки); /*- -картинка- - -*\
background-repeat: no-repeat; /*- - не повторять картинку - -*\ }