В прошлом посте я уже показывал, как с помощью изменения фона можно создавать красивые кнопки. Изменение фона отлично подходит для простых кнопок, для более сложных лучше измененить фоновое изображение. Особенно, если кнопки будут расположены в меню.
Основная проблема заключается в задержке вывода кнопки, когда браузер загружает изображение кнопки. Из-за этого создается мерцание. Есть несколько способов для того, чтобы избежать этого. Одним из них является метод pixy. Вместо нескольких фоновых изображений в нем используется одно, и это изображение будет выравниваться влево для обычного состояния и вправо, при наведении курсора на кнопку.
Для начала нужно создать объединенное изображение кнопки. Одна часть будет для обычного состояния, вторая при наведении курсора на кнопку. В моем случае размеры кнопки равны 300х40.
Теперь зададим стили:.
body { font-family: "Myriad Pro", Frutiger, "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif; font-size: 1.4em; } ul { margin: 0; padding: 0; list-style-type: none; } li { display: inline: /* :KLUDGE: Removes large gaps in IE/Win */ } a { display: block; width: 150px; height: 39px; line-height: 39px; color: #c1e11c; text-decoration: none; background: #94B8E9 url(pixy-button.gif) no-repeat left bottom; text-indent: 50px; text-transform: uppercase; } a:hover { background-color: #369; background-position: right bottom; color: #fff; } li.firstSelected a { height: 40px; line-height: 40px; }
Как вы могли заметить высоту кнопки я задал равную 39px, нет это не ошибка. Это сделано специально, из-за того, что при всоте 40px, сверху будет слишком жирная рамка между кнопками. Чтобы избежать этого для всех, кнопок задаем высоту равную 39px, а для первой кнопки 40px.
Зададим меню:
<ul> <li class="firstSelected"><a href="#">Home</a></li> <li><a href="#">News</a></li> <li><a href="#">Tools</a></li> <li><a href="#">About</a></li> </ul>
Вот так наше меню будет выглядеть в готовом виде:
Только вчера об этом думал, так что пост как нельзя в тему!
Reply
Ой, благодарю
Reply
Отличная статья.Респект автору.
Reply
ролловер 🙂
Делаю так же.
Только вместо background-position: right bottom;
делаю так:
background-position: -39px 0;
Reply
спасибо, то, что я искал
Reply
Спасибо, очень интересно.
Reply