Comments 22
Спасибо за перевод. Да и сама статья хороша, все по делу, без лишней «воды».
+5
Мне нравится. Но открыт вопрос — большинство верстальщиков сидят за виндовыми машинами. Что им делать? Может какой-нибудь скрипт на PowerShell?
0
Сборки ImageMagick доступны для Unix, Mac OS X, iPhone и Windows.
www.imagemagick.org/script/binary-releases.php
www.imagemagick.org/script/binary-releases.php
+6
В избранное! Этот пост быстро вообще мне прояснил, как делаются спрайты — вручную, в плане CSS, не говоря о таких удобствах, как imagemagick предоставляет… :)
0
Между спрайтами нужно оставлять не менее 3=х пикселей, чтобы на разных устройствах при масштабировании не было видно соседних картинок.
+6
Ещё один вариант создания спрайтов — это использование 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;
}
+10
Эх, подумал, что Counter-Strike: Source спрэи
-25
Пользуюсь скриптом для фотошопа. Это самый простой вариант обработки большого количества картинок за раз.
+1
UFO just landed and posted this here
Думаю снижает нагрузку на сервер частыми запросами.
0
UFO just landed and posted this here
Это настолько распространенная техника, что объяснять вам здесь смысла не имеет никакого. google://CSS+спрайты
0
UFO just landed and posted this here
Простите, честно не понимаю как оно сюда попало :)
bit.ly/eZoVFP
bit.ly/eZoVFP
0
UFO just landed and posted this here
Замечательно, спасибо за перевод.
0
Использовал такое для автогенерации листа и стиля под него в проекте, где содержимое этого листа регулярно меняется (иконки свойств товаров, всего около тысячи)
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);
}
}
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);
}
}
0
UFO just landed and posted this here
Sign up to leave a comment.
CSS спрайты из командной строки