Move posts to separate folder, update URLs to use slugs

src/posts/css-image-values-spec.md

@@ -0,0 +1,52 @@
+---
+layout: "../layouts/BlogPost.astro"
+title: "The CSS Image Values Spec"
+slug: css-image-values
+description: "The CSS Image Values Spec allows you to cleanly blow up pixel art on the web."
+added: "Jun 07 2015"
+tags: [technical]
+---
+
+I started looking at the [CSS Image Values Specification](http://dev.w3.org/csswg/css-images-3/) recently and was fascinated by it, particularly the [image rendering](http://dev.w3.org/csswg/css-images-3/#the-image-rendering) section.
+
+Say you take a small image sprite, like one that you would use in a video game:
+
+<img src="/assets/linksprite.gif" style="width:32px;" />
+
+Now, when you decide to blow this picture up, something happens that's not totally unexpected.
+
+<img src="/assets/linksprite.gif" style="width:300px;" />
+
+It's all blurry and gross.  As we expect.
+
+But, there's a better way to deal with it.  Add the following into your CSS:
+
+```css
+.image-class {
+  /* Firefox */
+  image-rendering: -moz-crisp-edges;
+
+  /* Safari */
+  image-rendering: -webkit-optimize-contrast;
+
+  /* IE */
+  -ms-interpolation-mode: nearest-neighbor;
+
+  /* Everything Else */
+  image-rendering: pixelated;
+}
+```
+
+Yes, it's a lot for one effect, but hey.  It's cross-browser.
+
+Now check out your glorious image!
+
+<img src="/assets/linksprite.gif" style="width:300px; image-rendering: -moz-crisp-edges; image-rendering: -webkit-optimize-contrast; -ms-interpolation-mode: nearest-neightbor; image-rendering: pixelated;" />
+
+Whoa!  Beautiful!  So let's dig into this.  Why are there SO many different values?  Well, put simply, each browser just hasn't hit standard yet.  But, it's coming.
+The CSS Image Values spec is still being constantly updated and reviewed.  It only just recently consolidated all of these values (`crisp-edges`, `optimize-contrast`, `nearest-neighbor`, and `pixelated`) by officially standardizing `image-rendering` to have either `pixelated`, `crisp-edges`, or `auto` as its values.
+As you can see [in the example on the spec website](http://dev.w3.org/csswg/css-images-3/#the-image-rendering), `auto` and `crisp-edges` have their own uses, but `pixelated` is best for this pixel art example.
+
+One thing that will be interesting to look out for moving forward is the Microsoft Edge browser.  They're slowly phasing out all of the `-ms` prefixes, so I'm personally curious to see it they're going to use the standard and use `image-rendering: pixelated` or if they're going to stick to the `nearest-neighbor` idea.  Only time will tell.
+
+Enjoy making giant pixelated images, until next time!