Панелька с картинками

Давно руки чесались, но это ж в ФШ аж 5 мин посидеть надо, перетружусь еще. ) Самое главное – в размерах не ошибиться. Поэтому сначала делаем панель определенной ширины, отступы у ссылок, принт скрин и в ФШ иконки накладывать.

 


CSS

 

Общий вид панели: делаем прозрачный фон, отменяем тень и фиксируем, чтоб не бегала.

#head {
background: transparent;
box-shadow: none;
transition: all 1666s ease-in-out 0s;
-moz-transition: all 1666s ease-in-out 0s;
-webkit-transition: all 1666s ease-in-out 0s;
-o-transition: all 1666s ease-in-out 0s;
-ms-transition: all 1666s ease-in-out 0s;
position: relative; top: 40px;}

Теперь уберем синюю стрелочку и полоску, которые раньше выглядывали, когда панель была скрыта.

#head-line{background: transparent;}
#head-line div {display: none;}

Оформим ссылки

#head-panel a {color: #FFF !important; font-family: Arial; font-size: 14px;  text-decoration: none;}

Сделаем отступы у  ссылок для иконок

.mynavi a {margin: 0 4px 0 40px;}

И наконец панелька. Положение по центру и ширина. Потом можно идти рисовать и тогда добавит сюда же фон.

#head-panel{margin: 0 auto; width: 980px; background:url(АДРЕС КАРТИНКИ);}

Все. Всем красоты!


 

Обсудить у себя 8
Комментарии (11)

Молодец.

ато 

Замечительно, Юль) Только ты бы еще рассказала размеры картинки и в каких пропорциях размещать иконки, чтобы люди могли себе под себя сделать)

а я же объяснила этот момент. скриншот и в фотошопе накладываем. в том то и дело, что размер может быть любой в зависимости от ширины панели и расстояния отступов. если не умеют, то это не ко мне за помощью ) 

не.ну можно, конечно, все до px рассчитать. но это ж блин так долго )))

ну да… долго)

Кстати, раз у тебя руки не дошли, я сама разместила ссылку на твой клуб в своем клубе :3

Ой, Юлька, спасибочки!  я и правда что-то все откладывала, да откладывала...

та няма за що 

Извините просто до меня не доходит… Скажите пожалуйста, а куда адрес иконок вставить? Пожалуйста ответьте

иконки в фотошопе на панель накладываешь и эта полоска с ними будет фоном для head-panel ))) перечитай еще. если не умеешь работать в редакторе, лучше не берись. 

Чтобы комментировать надо зарегистрироваться или если вы уже регистрировались войти в свой аккаунт.

Войти через социальные сети: