|
Когда я создавал новый дизайн для Нометы, а именно делал кнопки расположенные вверху блога я вспомнил как в прошлых дизайнах других сайтов появлялась небольшая, но все же не очень приятная проблема. Когда мы делаем меню или главные ссылки "На главную", "Обо авторе", "RSS" как в Номете. Мы хотим сделать их красивыми и поэтому обойтись свойствами CSS не всегда получается сделать что-то оригинальное. Поэтому некоторые из сайтостроителей используют графику. В этой статье я расскажу как избавиться от подвисаний/дозагрузки дополнительного изображения. Приведу вам код из CSS как создаются кнопки-ссылки (пример кнопки с Нометы).
1 способ (не правильный): .menu a{
width: 120px;
height: 30px;
line-height: 30px;
text-align: center;
text-decoration: underline;
color: #EEE;
font-size: 14px;
font-weight: bold;
background-image: url(http://www.nometa.ru/menu-a.gif);
background-position: left;
margin-left: 8px;
margin-right: 8px;
display: block;
}
.menu a:hover{
background-image: url(http://www.nometa.ru/menu-a-hover.gif);
color: #FFF;
text-decoration: none;
} Если использовать код в CSS такого вида ↑, то при наведении на ссылку будет дополнительная загрузка и через пару-тройку секунд, а иногда бывает зависает и время тратиться больше. Да и чем меньше отдельных картинок загружается со страничке - тем лучше (быстрее будет и загрузка самого сайта). Поэтому нужно делать не два разных файла с изображением. В 1-ом способе это будут две разных картинки одного и того же размера:  - 1-ая картинка.
 - 2-ая картинка, которая появляется при наведении на кнопку-ссылку.
Меня всегда мучил этот вопрос: "как на некоторых сайтах делают кнопки, которые не подгружаются при наведение на нее курсора". Ну и вот тут я вспомнил что можно выставлять позиционирование картинки (слева, справа, снизу и сверху). Теперь предлагаю вашему вниманию правильный 2 способ: .menu a{
width: 120px;
height: 30px;
line-height: 30px;
text-align: center;
text-decoration: underline;
color: #EEE;
font-size: 14px;
font-weight: bold;
background-image: url(http://www.nometa.ru/menu.gif);
background-position: left;
margin-left: 8px;
margin-right: 8px;
display: block;
}
.menu a:hover{
background-position: right;
color: #FFF;
text-decoration: none;
} Вот теперь при наведении курсора на ссылку у нас не будет такой проблемы с загрузкой. Нужно сделать вместо двух одну картинку, такого вида (пример 2-ого способа): 
Размер этого изображения 240px по ширине и 120px по высоте, то есть ровно в 2 раза длиннее. Из кода CSS видно, что когда выполняется наведение курсора на кнопку-ссылку новое изображение не подгружается, а просто изображение сдвигается вправо. А так же сохраняется кроссбраузерность (то есть во всех браузерах будет работать на одинаково правильно). Не обязательно сдвигать влево или вправо, можно сделать и снизу вверх и сверху вниз, в общем как вам захочется. Данный способ я считаю правильным во всех смыслах и очень удобным как для веб-мастера, так и для посетителей. Найди меня: кнопки ссылки, html кнопка ссылка, как сделать кнопку ссылкой, ссылка в виде кнопки.
|
Статья →