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



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

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

Обновлено 29 августа 2013 - 10:13  Отправлено 28 августа 2013 - 09:32

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

 

 

  • 0

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

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

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

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

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

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

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

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

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

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

#5 fedornabilkin
fedornabilkin
  • Модератор
  • 1 191 сообщений
  • Репутация: 206

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

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

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



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

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

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

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

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

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

#8 fedornabilkin
fedornabilkin
  • Модератор
  • 1 191 сообщений
  • Репутация: 206

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

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

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

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



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

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

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


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

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

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

ИМХО

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

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

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

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

#11 fedornabilkin
fedornabilkin
  • Модератор
  • 1 191 сообщений
  • Репутация: 206

Отправлено 28 августа 2013 - 16:43

Тоесть надо еще подумать, стоит ли оно того.

Это точно. Если иконок не много, то не спасет. Но если их достаточное количество, то разница существенная.
  • 0

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



#12 yury
yury
  • Пользователь
  • 648 сообщений
  • Репутация: 195

Отправлено 29 августа 2013 - 10:13

Как-то так
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>tst</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{
  margin: 0;
  padding: 0;
}
.menu{
  list-style: none;
  width: 340px;
  background: url(24.jpg) repeat-y;
}
.menu li a{
  display: block;
  height: 40px;
  width: 260px;
  padding-left: 40px;
  text-decoration: none;
  font: 15px/40px Verdana, Geneva, "DejaVu Sans", sans-serif;
  color: #ff5d5c;
}
.menu li a:hover{
  color: #000;
  background-color: #ffc;
}
.keks a{
  background: url(icons.png) 4px 0px no-repeat;
}
.kniga a{
  background: url(icons.png) 4px -40px no-repeat;
}
.eda a{
  background: url(icons.png) 4px -80px no-repeat;
}
.chashka a{
  background: url(icons.png) 4px -120px no-repeat;
}
.tort a{
  background: url(icons.png) 4px -160px no-repeat;
}
.file a{
  background: url(icons.png) 4px -200px no-repeat;
}
.pen a{
  background: url(icons.png) 4px -240px no-repeat;
}
</style>
</head>
<body>
<ul class="menu">
  <li class="keks"><a href="http://cooking-book.in.ua">Главная страница</a></li>
  <li class="kniga"><a href="http://cooking-book.in.ua/gb">Книга отзывов</a></li>
  <li class="eda"><a href="http://cooking-book.in.ua/publ">Еда и здоровье</a></li>
  <li class="chashka"><a href="http://cooking-book.in.ua/blog">Рестораны и кафе (отзывы)</a></li>
  <li class="tort"><a href="http://cooking-book.in.ua/dir">Кулинарные обои / открытки</a></li>
  <li class="file"><a href="http://cooking-book.in.ua/load">Кулинарные файлы</a></li>
  <li class="pen"><a href="http://cooking-book.in.ua/index/prishli_recept/0-34">Поделись своим рецептом!</a></li>
</ul>
</body>
</html>
Использованы картинки:
* со спрайтами иконок icons.png (13Кб): Изображение
* и ваша фоновая 24.jpg (24Кб): Изображение
  • 0

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


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

Пользователь месяца
Megoydagi Megoydagi 1-й за Август
Очков активности: 30 4 темы, 8 сообщений, 1 балл репутации
Сайт: bank.net.ru
ТОП самых активных за этот месяц
  • Фотография Vmir
    #1

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

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

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

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

    SergiuS85
    Очков активности: 12 2 темы, 2 сообщения, 1 балл репутации

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

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

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

    Totti
    Очков активности: 12 0 тем, 8 сообщений, 1 балл репутации

  • Фотография kuztoday
    #6

    kuztoday
    Очков активности: 10.5 1 тема, 4 сообщения, 1 балл репутации

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

    Zevss (domles43.ru)
    Очков активности: 10.5 2 темы, 1 сообщение, 1 балл репутации

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

    Sale_account
    Очков активности: 10.5 2 темы, 1 сообщение, 1 балл репутации

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

    Megoydagi (bank.net.ru)
    Очков активности: 9 Вне конкурса за определение пользователя месяца

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

    mkreine (analiz-krovi.net)
    Очков активности: 9 1 тема, 3 сообщения, 1 балл репутации

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

Поддержите форум! =)
Топ 5 участников по репутации

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