Перейти к содержимому


Пользователь месяца
WGN WGN 1-й за Июль
Очков активности: 850 2 темы, 75 сообщений, 7 баллов репутации
Сайт: worldgamenews.com
ТОП самых активных за этот месяц
  • Фотография TimurR
    #1

    TimurR
    Очков активности: 273 3 темы, 17 сообщений, 7 баллов репутации

  • Фотография WGN
    #2

    WGN (worldgamenews.com)
    Очков активности: 64.5 Вне конкурса за определение пользователя месяца

  • Фотография ShowPrint
    #3

    ShowPrint (ShowPrint.ru)
    Очков активности: 52.5 0 тем, 7 сообщений, 5 баллов репутации

  • Фотография BlackLion
    #4

    BlackLion
    Очков активности: 36 0 тем, 24 сообщения, 1 балл репутации

  • Фотография Vmir
    #5

    Vmir
    Очков активности: 25.5 Вне конкурса за определение пользователя месяца

  • Фотография Napoleon-007
    #6

    Napoleon-007
    Очков активности: 21 0 тем, 14 сообщений, 1 балл репутации

  • Фотография Ixman
    #7

    Ixman (o5cat.ru)
    Очков активности: 21 0 тем, 7 сообщений, 2 балла репутации

  • Фотография alekswebart
    #8

    alekswebart
    Очков активности: 19.5 1 тема, 10 сообщений, 1 балл репутации

  • Фотография r0mZet
    #9

    r0mZet (rz-style.ru)
    Очков активности: 18 2 темы, 6 сообщений, 1 балл репутации

  • Фотография profi
    #10

    profi (1informer.com)
    Очков активности: 12 0 тем, 8 сообщений, 1 балл репутации

  • Показать весь ТОП 10

Kwork.ru - услуги фрилансеров от 500 руб.

Поддержите форум! =)
Апдейты
  • Яндекс тИЦ: 19.11.2017
  • Яндекс выдача: 17.08.2018
Топ 5 участников по репутации


Помогите сделать CSS спрайт

#1 Thrash

Thrash
  • Пользователь PRO
  • 640 сообщений
  • Репутация: 54
0

Отправлено 28 August 2013 - 09:32

Ребята, мне просто необходим спрайт изображений для иконок меню.
Вот сам сайт: http://cooking-book.in.ua/
Видите? Там все картинки по отдельности. Как их запхнуть в спрайт? Читал статьи, писал код, не получилось.

 

 

  • 0
Изображение


robot

robot
  • Пользователь PRO
  • 2652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Сборник вопросов по HTML, CSS и прочее
  2. Иконка вместо ссылки в меню
  3. Урок (Viewport)#1 - основная разметка, спрайты, общие принципы
  4. Кнопка на css из изображений
  5. Закрыть контент от индексации

#2 isvetlichniy

isvetlichniy
  • Неактивные
  • 622 сообщений
  • Репутация: 93

Отправлено 28 August 2013 - 09:48

каких именно иконок? у тебя там их куча
  • 1

#3 mr.Maur

mr.Maur
  • Неактивные
  • 85 сообщений
  • Репутация: 17

Отправлено 28 August 2013 - 09:49

isvetlichniy, для иконок меню)) В начальном топике написанно)
  • 0

#4 isvetlichniy

isvetlichniy
  • Неактивные
  • 622 сообщений
  • Репутация: 93

Отправлено 28 August 2013 - 09:54

а вообще, есть куча генераторов, идем в яндекс и задаем вопрос

и еще, тебе критично использовать спрайты? я еще допускаю спрайты для изменения картинки при наведении мышки. но чтобы вот так вот для всего - надо еще хорошо подумать.
Что если например захочешь изменить одну иконку? Весь спрайт перерисовывать?
  • 0

#5 fedornabilkin

fedornabilkin
  • Модератор
  • 1122 сообщений
  • Репутация: 183

Отправлено 28 August 2013 - 10:50

Спрайты значительно снижают вес. Много картинок загружаются дольше, чем спрайт.
Я как-то сравнивал 4 иконки отдельно и на одном спрайте. Разница значительная.
А если есть макет спрайта, то и иконку заменить не сложно будет.
  • 0

Надо обсудить предложение. А тут знакосчиталка считает знаки. Про Yii2 написано.



#6 Thrash

Thrash
    Topic Starter
  • Пользователь PRO
  • 640 сообщений
  • Репутация: 54

Отправлено 28 August 2013 - 11:13

isvetlichniy, спрайты быстрее грузятся. Генераторами пользоваться умею) Составил образец спрайта, получил код, но все-равно что-то не получается
  • 0
Изображение


#7 Thrash

Thrash
    Topic Starter
  • Пользователь PRO
  • 640 сообщений
  • Репутация: 54

Отправлено 28 August 2013 - 11:34

При малой скорости интернет-соединения эти картинки прогружаются по отдельности, и смотрится это не очень солидно(
  • 0
Изображение


#8 fedornabilkin

fedornabilkin
  • Модератор
  • 1122 сообщений
  • Репутация: 183

Отправлено 28 August 2013 - 12:32

смотрится это не очень солидно

Не то что бы не солидно.
10 отдельных иконок = 10 запросов на сервак.
1 спрайт = 1 запрос на сервак
  • 0

Надо обсудить предложение. А тут знакосчиталка считает знаки. Про Yii2 написано.



#9 isvetlichniy

isvetlichniy
  • Неактивные
  • 622 сообщений
  • Репутация: 93

Отправлено 28 August 2013 - 13:32

10 отдельных иконок = 10 запросов на сервак. 1 спрайт = 1 запрос на сервак


это все так, не никого никого переубеждать. но стоит также учитывать, что вместо 5 небольших картинок нужно будет загрузить хоть и одну, но большего размера.

При малой скорости интернет-соединения эти картинки прогружаются по отдельности

посмотри на размер этих картинок. например берем первую, keks.png - размер 5.11 Кб. Я ее пересохранил фотошопом для WEB, в итоге размер стал 2.57 КБ. я думаю тебе не о чем беспокоиться даже при самом медленном соединении

ИМХО

Тоесть надо еще подумать, стоит ли оно того. Потратить кучу времени и в итоге будет ли желаемый результат? :)
  • 0

#10 Thrash

Thrash
    Topic Starter
  • Пользователь PRO
  • 640 сообщений
  • Репутация: 54

Отправлено 28 August 2013 - 14:32

isvetlichniy, раз такое дело, тогда не буду парится, оптимизирую картинки фотошопом
  • 0
Изображение


robot

robot
  • Пользователь PRO
  • 2652 сообщений
  • Репутация: 85


Похожие темы

  Название темы Автор Статистика Последнее сообщение

Оформление форума – IPBSkins.ru