Автор Тема: CSS sprite за li bullets с различни иконки  (Прочетена 1199 пъти)

0 Потребители и 1 Гост преглежда(т) тази тема.

SocialEvil

  • Sr. Member
  • ****
  • Благодарности
  • -Казани: 3
  • -Получени: 4
  • Публикации: 463
CSS sprite за li bullets с различни иконки
« -: 18 Декември 2013, 16:43:11 »
Здравейте,
искам да си направя едно web меню, да заредя само един sprite.png и всеки li bullet от менюто, да бъде с различна иконка, която има две състояния. Едното безцветно, едното цветно. (Текстът да си е отделно, спрайта да важи само за bullets).
Че нещо се оплетох жестоко и в момента ми е каша в глават.
Не искам за всеки елемент да слагам background-image. Може ли да стане само с един?
Please allow me to introduce myself
I'm a man of wealth and taste
I've been around for a long, long year
Stole many a man's soul and faith

Stan

  • Hero Member
  • *****
  • Благодарности
  • -Казани: 27
  • -Получени: 135
  • Публикации: 641
Re: CSS sprite за li bullets с различни иконки
« Отговор #1 -: 18 Декември 2013, 17:09:37 »
Здравейте,
искам да си направя едно web меню, да заредя само един sprite.png и всеки li bullet от менюто, да бъде с различна иконка, която има две състояния. Едното безцветно, едното цветно. (Текстът да си е отделно, спрайта да важи само за bullets).
Че нещо се оплетох жестоко и в момента ми е каша в глават.
Не искам за всеки елемент да слагам background-image. Може ли да стане само с един?

Да, може да стане с един background-image и с няколко background-position.

SocialEvil

  • Sr. Member
  • ****
  • Благодарности
  • -Казани: 3
  • -Получени: 4
  • Публикации: 463
Re: CSS sprite за li bullets с различни иконки
« Отговор #2 -: 18 Декември 2013, 17:29:25 »
На кой елемент да го лепна тоя background-image? Щото като го лепна на #menu ul li, и напиша width i height (за да може да се вижда само по 1 картинка, а не целия sprite.png), самите li се смаляват и ми преебават текста в <a> таговете
Please allow me to introduce myself
I'm a man of wealth and taste
I've been around for a long, long year
Stole many a man's soul and faith

Stan

  • Hero Member
  • *****
  • Благодарности
  • -Казани: 27
  • -Получени: 135
  • Публикации: 641
Re: CSS sprite за li bullets с различни иконки
« Отговор #3 -: 18 Декември 2013, 17:54:28 »
Ако заданието не изисква да задаваш ширина или височина на ли-тата не го прави. Точно на #menu ul li можеш да го лепнеш спрайта. Въпроса е как да го реализираш спрайта. Може да го направиш на определена дължина да редуваш картинките(примерно на 900px може и много по-малко зависи от ограничението на максималната дължина на li елемента) да редуваш картинките картина1 + 900пх + картинка1(безцветна) + 900пх + картинка2 + 900пх + картинка2(безцв.) и т.н. и с височина - височината на картинките - 10-20-30 пх или колкото е там. Предполагам цветната и безцветната картинка ще зависи от това дали бутона е активен или не ?
Друг вариянт е да наблъскаш максимално една до друга въпросните картинки по вертикала или хоризонтала и да създадеш  елементи в самите списъци(обикновенно спанчета с инлайн-блок свойство) с фиксирана дължина и височина и в тях да сменяш позицията на спрайта.

SocialEvil

  • Sr. Member
  • ****
  • Благодарности
  • -Казани: 3
  • -Получени: 4
  • Публикации: 463
Re: CSS sprite за li bullets с различни иконки
« Отговор #4 -: 18 Декември 2013, 19:31:11 »
Бе, вярно, бе. Вместо да ги слагам по хоризонтала, ги сложих по вертикала и сега всичко е тип-топ :) Добра идея ми даде, мерси :)
Please allow me to introduce myself
I'm a man of wealth and taste
I've been around for a long, long year
Stole many a man's soul and faith

HanKrum

  • Hero Member
  • *****
  • Благодарности
  • -Казани: 123
  • -Получени: 73
  • Публикации: 1002
  • Кибик
Re: CSS sprite за li bullets с различни иконки
« Отговор #5 -: 19 Декември 2013, 10:13:41 »
Аз съм го направил така:
Код: CSS
  1. #nav { position: relative;
  2.        background-image: url(../pic/glb.png);
  3.        background-position: top left;
  4.        background-attachment: fixed;
  5.        background-repeat: no-repeat;
  6.        background-color: #b6b6b6;
  7.        border: #444 solid 1px;
  8.        width: 190px;
  9.        text-align: right;
  10.        margin-top: 10px; }
  11.  
  12. #nav li { background-image: url(../pic/sc.png);
  13.           background-position: right;
  14.           background-repeat: no-repeat;
  15.           list-style: none;
  16.           padding-right: 20px;
  17.           cursor: pointer; }
  18.  
  19. #nav li:hover { background-image: url(../pic/scw.png);
  20.                 background-color: #444;
  21.                 color: #fff; }

Резултата е:
"Силата на правителството се крепи на невежеството на народа, и те знаят това и винаги ще се борят против просвещението." Лев Толстой