Оформление *меню

Mar 19, 2016 07:13

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;                                                                             /*- - не повторять картинку - -*\           }

меню, оформление

Previous post Next post
Up