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

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

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

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

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

Ещё один вариант создания спрайтов — это использование 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;
}

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

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

Использовал такое для автогенерации листа и стиля под него в проекте, где содержимое этого листа регулярно меняется (иконки свойств товаров, всего около тысячи)
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);
}
}