css命令_命令行CSS拼写

css命令

(In Russian)

(俄语)

OK, CSS sprite tools exist. I'm pretty confident I actually made the very first one 🙂 But they break from time to time (like mine currently). And then the command line is cool (as opposed to scary) and oh-so-quick. And imagemagick is cool and oh-so-powerful. So let's see how we can create CSS sprites from the command line alone.

OK，存在CSS Sprite工具。 我非常有信心我实际上是第一个。🙂但是它们有时会中断(就像现在的我一样)。 然后命令行很酷(而不是吓人)并且很快。 imagemagick非常酷而且功能强大。 因此，让我们看看如何仅通过命令行即可创建CSS Sprite。

创建图像 (Creating the image)

Starting with a list of separate image files:

从单独的图像文件列表开始：

$ ls 
1.png  2.gif  dot.png  phoney.gif  tw.gif

• 

  - 1.png

  -1.png

• 

  - 2.gif

  -2.gif

• 

  - dot.png

  -dot.png

• 

  - phoney.gif

  -phoney.gif

• 

  - tw.gif

  -tw.gif

Creating the sprite:

创建精灵：

$ convert *png *gif -append result/result-sprite.png

Yes, that's all! The result:

是的，仅此而已！ 结果：

什么？ (What?)

So the imagemagick command is generally something like:

所以imagemagick命令通常是这样的：

$ convert image1.png image2.png image3.png -append result/result-sprite.png

But we can also replace the list of images with *s:

但是我们也可以将图像列表替换为* s：

$ convert * -append result-sprite.png

Or as in the previous case, limiting to *.gif and *.png.

或与前面的情况一样，限制为* .gif和* .png。

How about a horizontal sprite? All it takes is changing -append to +append:

水平精灵怎么样？ 它所-append就是将-append更改为+append ：

$ convert *png *gif +append result/result-sprite-horizon.png

The result:

结果：

Also note how the source images can be any format - GIF, PNG, JPEG and the result is PNG. Actually I'd recommend always trying PNG8 first:

还要注意源图像如何可以是任何格式-GIF，PNG，JPEG，结果是PNG。 实际上，我建议始终先尝试PNG8：

$ convert *png *gif -append PNG8:result/result-sprite-horizon.png

CSS位置 (CSS positions)

Now since this is all hand-made there's no auto-generation of CSS. But it's still pretty straightforward. Take the vertical sprite:

现在，由于这些都是手工制作的，因此无法自动生成CSS。 但这仍然非常简单。 取垂直精灵：

All images will have background-position-x of 0px, so that's easy.

所有图像的background-position-x为0px ，所以很容易。

The first image will also have Y-position 0px. It also happens to be 16x16 pixels. So it's:

第一张图片的Y位置也为0px 。 它也恰好是16x16像素。 所以就是：

.first {
  width: 16px;
  height: 16px;
  background: url(result/result-sprite.png) 0 0;
}

... where 0 0 position is redundant and can be omitted.

... 0 0位置是多余的，可以省略。

The second image is also 16x16, that's convenient. Its X is 0 and its Y is the height of the previous image (16px) with a minus in front. So:

第二个图像也是16x16，这很方便。 其X为0，其Y为前一个图像的高度(16像素)，前面为负。 所以：

.secondo {
  width: 16px;
  height: 16px;
  background: url(result/result-sprite.png) 0 -16px;
}

And so on. Y position of an image is Y of the previous + the height of the previous.

等等。 图像的Y位置是前一个图像的Y +前一个图像的高度。

You can use the handy-dandy test page to play around with this (or any other) sprite.

您可以使用便捷的测试页面来玩这个(或任何其他)精灵。

But.. but... figuring out dimensions by keeping track of heights? You kiddin' me?

但是..但是...通过跟踪高度来确定尺寸？ 你在骗我吗？

Imagemagick to the rescue. `identify` gives you the basic image info:

Imagemagick进行救援。 `identify`给您基本的图像信息：

$ identify 1.png 
1.png PNG 16x16 16x16+0+0 DirectClass 8-bit 260b

`identify` also has a `-format` option and supports *. So getting all the info in a neat form is easy:

`identify`还具有`-format`选项并支持* 。 因此，以整齐的形式获取所有信息非常容易：

$ identify -format "%g - %f\n" *
16x16+0+0 - 1.png
16x16+0+0 - 2.gif
6x6+0+0 - dot.png
10x16+0+0 - phoney.gif
16x16+0+0 - tw.gif

%f is filename and %g is geometry. \n is a new line as you would expect and sometimes - is just a -. So if you want to figure out the Y position of the fifth element, well, it's the sum of the heights of the previous: 16+16+6+16

％f是文件名，％g是几何。 \n是您期望的新行，有时-只是- 。 因此，如果您想找出第五个元素的Y位置，那就是前一个元素的高度之和：16 + 16 + 6 + 16

.last {
  width: 16px;
  height: 16px;
  background: url(result-sprite.png) 0 -54px
}

Some complicated math! 'scuse me while I ask my second grader if she can handle it 🙂

一些复杂的数学！ 当我问我的二年级学生是否可以应付我时，请打扰我🙂

还有一些迷糊 (And some smushing)

Imagemagick doesn't write optimal PNGs. So some optimization is due. You can do it yourself with pngout, optipng, etc. Or use web-based tools such as smush.it (you're welcome!) or punypng.com. (psst - how bout a glimpse of the past)

Imagemagick不会编写最佳的PNG。 因此，需要进行一些优化。 您可以使用pngout，optipng等自己完成此操作。 或使用基于Web的工具，例如smush.it (不客气！)或punypng.com 。 (psst-如何回顾过去)

Or how about.... smush.it on the command line:

或如何...。在命令行上smush.it：

$ curl http://www.smushit.com/ysmush.it/ws.php
       ?img=http://www.phpied.com/files/sprt/result/result-sprite.png

Result is JSON:

结果是JSON：

{"src":"http:\/\/www.phpied.com\/files\/sprt\/result\/result-sprite.png",
 "src_size":1759,
 "dest":"http:\/\/smushit.zenfs.com\/results\/5a737623\/smush\/%2Ffiles%2Fsprt%2Fresult%2Fresult-sprite.png",
 "dest_size":1052,
 "percent":"40.19",
 "id":""}

Oh looky, almost half the filesize. Let me at it! Copy the `dest` URL:

看起来不错，文件大小几乎有一半。 让我来吧！ 复制“目标” URL：

$ curl http:\/\/smushit.zenfs.com\/results\/5a737623\/
       smush\/%2Ffiles%2Fsprt%2Fresult%2Fresult-sprite.png > result/smushed-sprite.png

And that's that.

就是这样。

回顾 (Recap)

1. create image:

   创建图像：

   $ convert *png *gif -append PNG8:result/result-sprite.png
   

2. get dimensions:

   获取尺寸：

   $ identify -format "%g - %f\n" *png *gif
   
   

3. optimize:

   优化：

   $ curl http://www.smushit.com/ysmush.it/ws.php?img=http://url...
   
   

Test page to play with the result-sprite is here.

带有result-sprite的测试页在这里。

For some more ideas and a different imagemagick command for generating sprites - see the very original post announcing the csssprites.com.

有关更多想法和用于生成精灵的其他imagemagick命令-请参阅非常原始的帖子，宣布csssprites.com。

Tell your friends about this post on Facebook and Twitter

在Facebook和Twitter上告诉您的朋友有关此帖子的信息

翻译自: https://www.phpied.com/command-line-css-spriting/

css命令