CSS спрайты из командной строки

[p_a]

Спасибо за перевод. Да и сама статья хороша, все по делу, без лишней «воды».

[pro100tak]

Мне нравится. Но открыт вопрос — большинство верстальщиков сидят за виндовыми машинами. Что им делать? Может какой-нибудь скрипт на PowerShell?

[p_a]

Сборки ImageMagick доступны для Unix, Mac OS X, iPhone и Windows.
www.imagemagick.org/script/binary-releases.php

[Evengard]

В избранное! Этот пост быстро вообще мне прояснил, как делаются спрайты — вручную, в плане CSS, не говоря о таких удобствах, как imagemagick предоставляет… :)

[homm]

Между спрайтами нужно оставлять не менее 3=х пикселей, чтобы на разных устройствах при масштабировании не было видно соседних картинок.

[homm]

Сам пользовался этим сервисом, остался доволен. Единственный минус — результирующая картинка отдается в 64-х битах, что для веба не нужно абсолютно. Но результирующую картинку в любом случае нужно оптимизировать, поэтому это обстоятельство не слишком мешает.

[ezj]

а как с помощью imagemagic сделать такой отступ между картинками?

[Kane]

Ещё один вариант создания спрайтов — это использование compass. Приведу пример из презентации iskin:

 $icons: sprite-map("icons/*.png")
.logo
  background: spirit($icons, logo)
.contacts
  background: spirit($icons, contacts)

Это сгенерируется код вроде такого:

.icon {
  background: url('/images/icons.png?123') 0 0 no-repeat;
}
.contacts {
  background: url('/images/icons.png?123') 0 -24px no-repeat;
}

[r00tkit]

Эх, подумал, что Counter-Strike: Source спрэи

[k0rv1n]

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

[dordzhiev]

Думаю снижает нагрузку на сервер частыми запросами.

[homm]

Это настолько распространенная техника, что объяснять вам здесь смысла не имеет никакого. google://CSS+спрайты

[dordzhiev]

bit.ly/9VkzyZ

[dordzhiev]

Простите, честно не понимаю как оно сюда попало :)
bit.ly/eZoVFP

[kuzvac]

Замечательно, спасибо за перевод.

[noonesshadow]

Использовал такое для автогенерации листа и стиля под него в проекте, где содержимое этого листа регулярно меняется (иконки свойств товаров, всего около тысячи)
PS: тег source не отработал в предпросмотре

public function generateIconSheet() {
$xtraIcon = array(
// сюда ставил дополнительные иконки, которые хотел разместить на листе, такие как распродажа, лидер продаж, etc
);


$sql = («SELECT variantID, icoOn, icoOff FROM feature WHERE NOT ISNULL(icoOn)»);
$sqlRes = mysql_query($sql);
$sheet = new Imagick();
$cssCoords = array();
$xCoord = 0;
$yCoord = 0;
$cssStr = "";
while ($r = mysql_fetch_assoc($sqlRes)) {
extract($r);
if (!$sheet->addImage(new Imagick(utils::IMGDIR. $icoOn))) {
echo «ERROR!!!»;
}
$cssStr .= ".ON .ico".$variantID." { background-position: -$xCoord".«px -$yCoord».«px;}\r\n»;
$xCoord += (utils::ICONSHEET_ICON_WIDTH + 2*utils::ICONSHEET_ICON_DISTANCE);
if ($xCoord > utils::ICONSHEET_WIDTH) {
$yCoord += (utils::ICONSHEET_ICON_HEIGHT + 2*utils::ICONSHEET_ICON_DISTANCE);
$xCoord = 0;
};
if (!$sheet->addImage(new Imagick(utils::IMGDIR. $icoOff))) {
echo «ERROR!!!»;
}
$cssStr .= ".OFF .ico".$variantID." { background-position: -$xCoord".«px -$yCoord».«px;}\r\n»;
$xCoord += (utils::ICONSHEET_ICON_WIDTH + 2*utils::ICONSHEET_ICON_DISTANCE);
if ($xCoord >= utils::ICONSHEET_WIDTH) {
$yCoord += (utils::ICONSHEET_ICON_HEIGHT + 2*utils::ICONSHEET_ICON_DISTANCE);
$xCoord = 0;
};
}

$result = $sheet->montageImage( new ImagickDraw(),
utils::ICONSHEET_ICONS_PER_ROW.«x»,
utils::ICONSHEET_ICON_WIDTH.«x».utils::ICONSHEET_ICON_WIDTH."+".utils::ICONSHEET_ICON_DISTANCE."+".utils::ICONSHEET_ICON_DISTANCE,
imagick::MONTAGEMODE_UNFRAME,
«0x0+0+0»
);
if ($result) {
$result->quantizeImage(128, Imagick::COLORSPACE_YIQ, 10, FALSE, FALSE);
echo $result->writeImage(«sheet.gif»);
file_put_contents(«sheet.css», $cssStr);
}
}