updated fancy-buttons page and screen cast blog post

source/_posts/2010-10-30_01-44-zero-to-fancy-buttons.markdown

@@ -6,4 +6,18 @@ Here's a quick screencast demonstrating how you can use [fancy buttons](http://g
 
 <video width="640" height="360" preload="none" controls poster="http://s3.imathis.com/video/zero-to-fancy-buttons.png">
   <source src="http://s3.imathis.com/video/zero-to-fancy-buttons.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/>
-</video>
+</video>
+
+Here's a [live demo](/projects/fancy-buttons/demo/) and here's the [project page](/projects/fancy-buttons/)
+
+**Update:** For those who've asked, the color picker I'm using in this screen cast is from [xScope](http://iconfactory.com/software/xscope), an excellent set of tools by the Iconfactory. It has:
+
+1. A dimension measurement tool. [See it in action](http://iconfactory.com/graphics/software/xscope/xScope.mov).
+2. Screen rulers
+3. Screen resolution frames
+4. The color picker (Loupe)
+5. Guides
+6. Frames (adjustable floating marker boxes)
+7. Crosshairs (for easy alignment)
+
+This is one of my favorite apps out there. I use these tools all the time and they're great for in browser designers.

source/projects/fancy-buttons/index.markdown

@@ -31,20 +31,15 @@ require 'fancy-buttons'
 
 Then import fancy-buttons in your sass file:  
 {% highlight css %}
-@import fancy-buttons
+@import "fancy-buttons";
 {% endhighlight %}
 
-Here's a screenshot of some fancy buttons from the github project example. **Hover to see what they look like without CSS gradients**.
-<div class="hover_switcher">
-  <img class="show" src="http://s3.imathis.com/dev/compass/fancy-buttons/demo.png" alt="Fancy Buttton Demo" title="Fancy Buttton Demo"/>
-  <img class="hide" src="http://s3.imathis.com/dev/compass/fancy-buttons/demo-no-gradients.png" alt="Fancy Buttton Demo - Without Gradients" title="Fancy Buttton Demo - Without Gradients"/>
-</div>
 
 #### What's It Doing?
 Here's a sample of what CSS rules this mixin handles for you:
 
 1. Button reset - to get browsers to the same starting point
-2. Rounded corners, Text shadows, and Gradients + vendoring
+2. CSS3: Rounded corners, Text shadows, Gradients, Inset box shadows, and browser vendoring
 3. Background image fallback
 4. Padding, Text size, line-height, etc
 5. Default, Hover, and Active states for all styles
@@ -53,72 +48,7 @@ Here's a sample of what CSS rules this mixin handles for you:
 That's a lot of CSS to write, effectively reduced to a single mixin. Of course, it's also great that you can use the bare minimum HTML.
 
 ##### What's Compass and Where's the CSS?
-In the screencast I'm writing my styles in [Sass](http://sass-lang.com) which is much cleaner and more powerful than CSS.
-Every time I save the file, Compass automatically compiles the Sass to regular or compressed CSS. If you're not familiar with Compass,
-you should [check it out](http://wiki.github.com/chriseppstein/compass/) because this is the future of open source design.
-Without compass I'd be posting stylesheets and images, and trying to explain how you could customize them. Compass lets me
-package my stylesheets as a plugin so it's easier to share, and easier to use.
-
-#### Custom Gradients
-As of Fancy Buttons 0.3.6 you can use glossy, matte, or your own custom gradients, and it has a new inverted click style.
-For a full list of changes, read [the changelog](http://github.com/imathis/fancy-buttons/blob/master/CHANGELOG.markdown).
-To use your own gradients you'll need to learn how to use the gradients mixin, you can [read the source here](http://github.com/chriseppstein/compass/blob/master/lib/compass/frameworks/compass/stylesheets/compass/css3/_gradient.sass).
-It's pretty simple.
-
-##### Writing Custom Gradients
-The demo shows some small buttons using custom radial gradients. I'll show you how
-you can use custom gradients in your projects with the new gradients mixin in Compass 0.10.0-pre2.
-
-Write a "custom-fancy-gradient" mixin that takes two variables, light and dark versions of the base color.
-This will produce a simple matte gradient.
-
-{% highlight sass %}
-// A custom gradient mixin
-=custom-fancy-gradient(!color1, !color2)
-  +v-gradient(!color1, !color2)
-{% endhighlight %}
-
-To use a different gradient style for when the button is clicked create a mixin named "invert-custom-fancy-gradient".
-In this example, I'm changing the colors a bit, and reusing the main custom gradient mixin. That way if I decide to
-change the type of gradient, I only have to change it in one place.
-
-{% highlight sass %}
-// The inverted mixin gets triggered when the user clicks
-=invert-custom-fancy-gradient(!color1, !color2)
-  !color1 = lighten(!color2, 10)
-  !color2 = lighten(!color2, 25)
-  +custom-fancy-gradient(!color1, !color2)
-{% endhighlight %}
-
-To use your custom gradient for every button in your project, set a global variable like this.
-
-{% highlight sass %}
-!fb_gradient_type = "custom"
-{% endhighlight %}
-
-If you want to only use the custom gradient for some buttons you can always do something like this.
-
-{% highlight sass %}
-button.custom
-  +fancy-button-structure
-  +custom-fancy-button-colors(#ddd)
-{% endhighlight %}
-
-The demo uses a really nice custom radial gradient. Here's what the custom gradient mixin looks like for that.
-
-{% highlight sass %}
-=custom-fancy-gradient(!color1, !color2)
-  !color2 = darken(!color2, 5)
-  +radial-gradient("50% 10%, 10, 50% 10%, 30", !color1, !color2)
-
-=invert-custom-fancy-gradient(!color1, !color2)
-  !color1 = lighten(!color2, 10)
-  !color2 = lighten(!color2, 25)
-  +custom-fancy-gradient(!color1, !color2)
-{% endhighlight %}
-
-If you want to write your own radial gradient mixin, I suggest browsing the examples on [The art of web](http://www.the-art-of-web.com/css/radial-gradients/).
-It's pretty tricky, but you can get some awesome effects with a little bit of fiddling.
+In the screencast I'm writing my styles in [Sass](http://sass-lang.com) which is much cleaner and more powerful than CSS. Every time I save the file, Compass automatically compiles the Sass to regular or compressed CSS. If you're not familiar with Compass, you should [check it out](http://wiki.github.com/chriseppstein/compass/) because this is the future of web design. Without compass I'd be posting stylesheets and images, and trying to explain how you could customize them. Compass lets me package my stylesheets as a plugin so it's easier to share, and easier to use.
 
 ##### IE Support
 In IE the buttons don't have rounded corners. So far, I haven't found a solution that lets me use clean html without javascript.