Кнопки навигации по меню с CSS спрайтов
предосторожность
Эта статья была опубликована более чем год назад, там, возможно, были события.
Пожалуйста, примите это во внимание.
В сегодняшнем уроке снова говорить о HTML графика издание интеграция CSS. В моей статье Несколько месяцев назад я говорил о техническом (также широко используется Google) из CSS спрайтов. На практике это поместить наиболее часто повторяющиеся изображения на странице один большое изображение, который будет вызываться несколько раз с нашим CSS.
Как вопрос личных предпочтений, я, как правило, избегать использования Gimp всякий раз, когда я должен создать другой пункт в меню навигации, Я предпочитаю, чтобы создавать свои собственные кнопки фоны, а затем думать о стилях через CSS. Это первое меню лучше индексируются поисковыми системами, во-вторых, избежать “отходы” время, чтобы создать мне каждую кнопку нового изображения.
Это CSS спрайтов является хорошо отработанной технологией, которая не только ускоряет время загрузки страницы, но это повышает совместимость различных браузеров.
Сегодня мы видим, как создать простой, как обращение навигационное меню с этой техникой. Следующий результат.
Начнем с создания “скелет” наше меню в HTML-странице.
<HTML>
<глава>
<ссылка HREF ="style.css" отн ="таблицы стилей" тип ="текст / CSS" />
</глава>
<тело>
<ДИВ>
<A HREF ="#" класс ="кнопка">Информация</а>
<A HREF ="#" класс ="кнопка">О компании</а>
<A HREF ="#" класс ="кнопка">Контакты ...</а>
</ДИВ>
</тело>
</HTML>
Как вы можете видеть Я уже называется CSS файл внешний называется “style.css“.
Теперь мы можем создать фон для нашей кнопки. следующий (здесь на стороне) Это то, что я принял меня, увеличенная деталь 550%. Фактические размеры 2ПВ ширина х 56ПВ высокий. Несмотря на то, что это не так легко заметить, что это вертикальный файл разделен пополам; верхний один будет один обычно виден, тем ниже будет загружен при наведении мыши. Для обеих половин я использовал градиент с разными цветами, но мы видим его сейчас лучше.
После создания нашего “фея” мы будем называть его обратно в CSS.
кнопка {
поплавок: оставил;
высота:20ПВ;
набивка: 5ПВ 10px;
граница: 1точек твердого # c96111;
фон: #e2721b URL(Изображения / button_sprites.png) повторить-х 0 0;
текст-отделка: никто;
размер шрифта: 15ПВ;
начертание шрифта: смелый;
семейство шрифтов:'Hoefler Text',Констанция,Камбрия,Грузия,засечка;
высота линии: 20ПВ;
цвет: #FFF;
}
кнопка:зависать {
граница: 1точки твердого # 2f4c13;
фон: #4a781d URL(Изображения / button_sprites.png) повторить-х 0 -30ПВ;
}
Линии, которые интересуют нас являются #6 она является #16: слухи “фон”. Как вы можете видеть, файл изображения извлекается только один: “button_sprites.png” с различными координатами. Я принялся повторять горизонтально и фон в обоих случаях.
Остальные других инструкций только добавляет границу более темных пикселей в зависимости от того, является ли мыши на кнопку или в другом месте. Ho anche impostato dimensioni e font specifici.
результат Это простое, но привлекательное, с оттенком Глянцевая.
4 Комментарии
апаш 72 · 13 августейший 2012 в 10:11 AM
volevo farlo per velocizzare un po’ сайт, le immagini non sono così tante come sembra, il problema è che non ho sezione con id “container” li.
quindi prima di imbattermi ti chiedo se si può fare comunque
спасибо!
TheJoe · 13 августейший 2012 в 10:58 AM
Per potersi fare si può fare, ma se non sai cosa sia un “Я бы” forse è meglio che prima ti eserciti un po’. 😉
Comunque ti consiglio di tenere d’occhio questo blog, probabilmente nel prossimo articolo pubblicherò un breve tutorial che ti interesserà sicuramente.
апаш 72 · 13 августейший 2012 в 7:57 AM
ho utilizzato css generator ed ho ottenuto i codici per un’unica immagine css spriter.
Come faccio ora ad inserirla nel sito?
ho caricato la nuova immagine ottenuta con css spriter in …/miotema/images, где есть и другие.
теперь в таблице стилей он сообщает мне генератор css для вставки
#контейнер li { фон: URL(CSG-50289151dcb6a.png) без повтора вверху слева; }
и правила css для изображений.
вопрос в том:
в моем листе css есть различные разделы фона, которые напоминают различные изображения (что я собрал), в разных строках, а не в одной ссылке , так как мне делать?
TheJoe · 13 августейший 2012 в 8:44 AM
Я вижу тематику сайта (если это сайт, на который вы указали) это очень сложно, стать дизайнером с такой сложной темой может быть долго и утомительно. что сказал, если ты действительно хочешь попробовать свои силы, давай перейдем к практике.
Не люблю такие решения, как автоматические генераторы, однако правила включения спрайта всегда остаются прежними..
0_ (по желанию) сделайте резервную копию перед запуском. Это может спасти нам жизнь,
1_ загружать изображения в… именно изображений,
2_ загрузите новый CSS в каталог… именно css,
3_ убедитесь, что CSS ссылается на изображения, а не на абсолютные пути,
4_ включить новый CSS в раздел “глава” сайт,
5_ убедитесь, что в разных CSS нет инструкций, которые конфликтуют друг с другом,
6_ загрузить все онлайн.
В вашем случае убедитесь, что у вас есть раздел с id “контейнер” у которого есть список внутри “в”. Только так может работать правило css. Если есть конфликты, вам нужно назначить “Я бы” или “класс” отличается для каждого соответствующего тега. Тем не менее, это может показаться простым, но в большинстве случаев это долгая работа, которая в первый раз также связана с огромной тратой времени. Ti consiglio di farti aiutare da qualcuno che sappia lavorare con i css, oppure di dedicarci più tempo che puoi, perché il problema non si può risolvere con un commento all’articolo. 🙂