Cookie

предосторожность


Эта статья была опубликована более чем год назад, там, возможно, были события.
Пожалуйста, примите это во внимание.

В сегодняшнем уроке снова говорить о HTML графика издание интеграция CSS. В моей статье Несколько месяцев назад я говорил о техническом (также широко используется Google) из CSS спрайтов. На практике это поместить наиболее часто повторяющиеся изображения на странице один большое изображение, который будет вызываться несколько раз с нашим CSS.

Как вопрос личных предпочтений, я, как правило, избегать использования Gimp всякий раз, когда я должен создать другой пункт в меню навигации, Я предпочитаю, чтобы создавать свои собственные кнопки фоны, а затем думать о стилях через CSS. Это первое меню лучше индексируются поисковыми системами, во-вторых, избежать “отходы” время, чтобы создать мне каждую кнопку нового изображения.

Это CSS спрайтов является хорошо отработанной технологией, которая не только ускоряет время загрузки страницы, но это повышает совместимость различных браузеров.

Сегодня мы видим, как создать простой, как обращение навигационное меню с этой техникой. Следующий результат.

Начнем с создания “скелет” наше меню в HTML-странице.

<HTML>
  <глава>
  <ссылка HREF ="style.css" отн ="таблицы стилей" тип ="текст / CSS" />
  </глава>
  <тело>
    <ДИВ>
    <A HREF ="#" класс ="кнопка">Информация</a>
    <A HREF ="#" класс ="кнопка">О компании</a>
    <A HREF ="#" класс ="кнопка">Контакты ...</a>
    </ДИВ>
  </тело>
</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.

результат Это простое, но привлекательное, с оттенком Глянцевая.

Это не достаточно?


TheJoe

Я держу это в качестве хобби блог от 2009. Я графики энтузиастов, технология, Программное обеспечение с открытым исходным кодом. Среди моих статей не будет трудно найти о музыке, и некоторые личные размышления, но я предпочитаю, чтобы направить линию блога в основном технологии. Для получения дополнительной информации связаться со мной.

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, dove ci sono anche le altre.
ora nel foglio di stile mi dice css generator di inserire

#container li { фон: URL(csg-50289151dcb6a.png) no-repeat top left; }

e le css rules per le immagini.

la domanda è:
nel mio foglio css ci sono varie sezioni di background che richiamano le varie immagini (che io ho assemblato), su righe diverse e non in un solo richicamo , quindi come devo fare?

    TheJoe · 13 августейший 2012 в 8:44 AM

    Vedo che il tema del sito (se si tratta del sito che hai linkato) è molto complesso, può essere lungo e frustrante improvvisarsi designer con un tema così complicato. что сказал, se proprio vuoi cimentarti, passiamo alla pratica.

    Non amo soluzioni come i generatori automatici, tuttavia le regole per l’inclusione di uno sprite restano sempre le stesse.

    0_ (opzionale) creare una copia di backup prima di iniziare. Potrebbe salvarci la vita,
    1_ caricare le immagini nella directory delleappunto delle immagini,
    2_ caricare il nuovo css nella directory deiappunto dei css,
    3_ controllare che il css riferisca alle immagini e non a path assoluti,
    4_ includere il nuovo css nella sezione “глава” сайт,
    5_ verificare che non ci siano istruzioni nei diversi css che vadano in conflitto le une con le altre,
    6_ caricare tutto online.

    Nel tuo caso verifica di avere una sezione con idcontainerche abbia al suo interno un elenco “в”. Solo così la regola css può funzionare. Se poi ci sono conflitti devi assegnare un “Я бы” или “класс” diversa ad ogni rispettivo tag. Detto così può sembrare facile, ma il più delle volte è un lavoro lungo che le prime volte comporta anche una ingente perdita di tempo. 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. 🙂

оставьте ответ

Ваш электронный адрес не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатывается комментарий данных.