Permalink
Browse files

Merge branch 'master' of github.com:heygrady/blog

  • Loading branch information...
heygrady committed Apr 21, 2012
2 parents 8215966 + fcde442 commit b8b528ec606ae977e7c94070982ffc735f2bd81c
View
@@ -14,4 +14,4 @@ vendor
node_modules
/.project
-/blog.sublime-project
+/*.sublime-*
View
@@ -1 +1 @@
-1.9.2-p290
+1.9.3-p0
View
1 .rvmrc
@@ -1 +0,0 @@
-rvm use 1.9.2
View
@@ -1,6 +1,7 @@
GEM
remote: http://rubygems.org/
specs:
+ RedCloth (4.2.9)
RedCloth (4.2.9-x86-mingw32)
albino (1.3.3)
posix-spawn (>= 0.3.6)
@@ -50,6 +51,7 @@ GEM
tilt (1.3.3)
PLATFORMS
+ ruby
x86-mingw32
DEPENDENCIES
View
@@ -62,10 +62,11 @@ default_asides: [asides/recent_posts.html, asides/github.html, asides/twitter.ht
# ----------------------- #
# Github repositories
-github_user:
+github_user: heygrady
github_repo_count: 0
github_show_profile_link: true
github_skip_forks: true
+github_skip_regex: /blog|transform3d/
# Twitter
twitter_user: heygrady
View
@@ -15,7 +15,7 @@ def initialize(tag_name, text, token)
super
@text, @height = text.split
@cache_disabled = false
- @cache_folder = File.expand_path "../.gist_cache", File.dirname(__FILE__)
+ @cache_folder = File.expand_path "../.gist-cache", File.dirname(__FILE__)
FileUtils.mkdir_p @cache_folder
end
@@ -33,7 +33,7 @@ def render(context)
@filetype = 'perl' if @filetype == 'pl'
title = @title ? "#{@title} #{File.basename(file)}" : File.basename(file)
- source = "<div><div class=\"gist\"><div class=\"gist-file\"><div class=\"gist-data gist-syntax\"" + (@height ? "style=\"height:#{@height}\"" : '') + ">#{highlight(code, @filetype)}</div><div class=\"gist-meta\"><a href='#{url}'>view raw</a><a href=\"#{@text}#file\" style=\"float:right;margin-right:10px;color:#666\">#{File.basename(file)}</a><a href=\"#{repo_url}\">From #{repo}</a> by <a href=\"#{user_url}\">#{user}</a></div></div></div></div>"
+ source = "<div class=\"gist\"><div class=\"gist-file\"><div class=\"gist-data gist-syntax\"" + (@height ? "style=\"height:#{@height}\"" : '') + ">#{highlight(code, @filetype)}</div><div class=\"gist-meta\"><a href='#{url}'>view raw</a><a href=\"#{@text}#file\" style=\"float:right;margin-right:10px;color:#666\">#{File.basename(file)}</a><a href=\"#{repo_url}\">From #{repo}</a> by <a href=\"#{user_url}\">#{user}</a></div></div></div>"
source = source.sub('highlight','gist-highlight').sub(' #file"', '#file"')
partial = Liquid::Template.parse(source)
context.stack do
View
@@ -0,0 +1,39 @@
+// set font
+.function, .constant, .variable, .key, .value, .type, .unit, .default {
+ font-family: $mono !important;
+}
+
+// colors and styles
+.function { color: $solar-blue !important; font-weight: bold !important; }
+.constant { color: $solar-blue !important; }
+.variable { color: $solar-blue !important; font-weight: normal !important; }
+.optional { font-style: italic !important; }
+.key { color: $solar-blue !important; }
+.value { color: $solar-yellow !important; }
+.type { color: $solar-green !important; }
+.unit { color: $solar-cyan !important; }
+.default { color: $base01 !important; font-style: italic !important; }
+
+// blocks
+h3.function, h3.constant {
+ background-color: #F2F2F2;
+ border: 0.5em solid #fff;
+ @include border-radius(.3em);
+ @include box-shadow(rgba(#000, 0.15) 0 1px 4px);
+ padding: 0.5em;
+ margin-bottom: 0.5em;
+}
+.documentation {
+ background-color: #F2F2F2;
+ border: 0.5em solid #fff;
+ @include border-radius(.3em);
+ @include box-shadow(rgba(#000, 0.15) 0 1px 4px);
+ padding: 0.5em;
+ margin-bottom: 1.5em;
+
+ ul {
+ margin-left: 1.3em;
+ }
+}
+ul.arguments {
+}
View
@@ -37,8 +37,31 @@ figcaption {
padding-top: 0;
}
}
+p.fine-print {
+ font-style: italic;
+ font-size: 0.7em;
+ line-height: 1.2em;
+ margin-top: -1.5em;
+}
p, li {
img {
margin: 0;
}
}
+dl {
+ margin-bottom: 1em;
+ dt {
+ font-weight: bold;
+ }
+ dd {
+ padding-left: 1em;
+ }
+}
+p, li {
+ code {
+ display: inline;
+ }
+ a code {
+ color: inherit;
+ }
+}
@@ -91,7 +91,7 @@ h3.filename {
+ pre { @include border-top-radius(0px); }
}
-p, li {
+p, li, dt, dd {
code {
@extend .mono;
display: inline-block;
@@ -12,7 +12,7 @@ <h1>Github Repos</h1>
if (!window.jXHR){
var jxhr = document.createElement('script');
jxhr.type = 'text/javascript';
- jxhr.src = '{{ root_url}}/javascripts/libs/jXHR.js';
+ jxhr.src = '{{ root_url}}/{{ site.javascripts_dir }}/libs/jXHR.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(jxhr, s);
}
@@ -21,10 +21,11 @@ <h1>Github Repos</h1>
user: '{{site.github_user}}',
count: {{site.github_repo_count}},
skip_forks: {{site.github_skip_forks}},
+ skip_regex: {{site.github_skip_regex}},
target: '#gh_repos'
});
});
</script>
- <script src="{{ root_url }}/javascripts/github.js" type="text/javascript"> </script>
+ <script src="{{ root_url }}/{{ site.javascripts_dir }}/github.js" type="text/javascript"> </script>
</section>
{% endif %}
@@ -6,7 +6,8 @@
categories: sass compass grid css
---
<p>The <a href="http://www.1kbgrid.com/">1KB CSS Grid</a> is a simplified grid system and is one of many dozens of different grids available. I started using a personal variant of this grid system recently because it seemed like a very simple code-base to understand. A common complaint about CSS grids is that they require classes in the markup that aren't much different that simply hard-coding widths in a style attribute. Of course SASS can help remove that complaint and makes grids even more flexible. Here's a tour of the 1KB CSS Grid, modified to suit my tastes and rewritten in <a href="http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html">SASS</a>.</p>
-<h4>For the uninitiated</h4>
+<p><strong>UPDATE:</strong> a Github repo has been created for <a href="https://github.com/heygrady/1KB-SCSS-Grid">the 1KB-SCSS-Grid</a>.</p>
+{% h4 For the uninitiated %}
<ul>
<li><a href="http://spyrestudios.com/css-grid-systems/">CSS Grids</a></li>
<li><a href="http://www.usabilitypost.com/2009/05/29/the-1kb-css-grid-part-1/">1KB CSS Grid</a> (part <a href="http://www.usabilitypost.com/2009/06/06/the-1kb-css-grid-part-2/">2</a> and <a href="http://www.usabilitypost.com/2009/06/19/the-1kb-css-grid-part-3/">3</a>)</li>
@@ -1,100 +0,0 @@
----
-layout: post
-title: "Recreating Photoshop Drop Shadows in CSS3 and Compass"
-date: 2011-06-21 13:10
-comments: true
-categories: compass sass css
----
-<p>A challenge all web developers face is converting Photoshop documents into real, functioning web pages. Often this is a simple matter of measuring things and picking colors but in the case of drop shadows recreating them in CSS3 can be challenging. For some reason I have yet to find a tool that will simply translate the settings from the Photoshop Layer Style Drop Shadow dialog into proper CSS3 &mdash; so I decided to create one in Compass. I created a Sass <code>@mixin</code> that relies on Compass to easily create CSS3 <code>box-shadow</code>s from the values found in Photoshop.</p>
-<!--more-->
-<h2>Photoshop Layer Style Drop Shadow Dialog</h2>
-<figure>
-<img src="http://www.zetaprints.com/help/wp-content/uploads/2009/12/photoshop_drop_shadow_settings1.png" alt="Photoshop Layer Style Drop Shadow Dialog">
-<figcaption>Photoshop Drop Shadow Dialog (<a href="http://www.google.com/search?q=photoshop+drop+shadow+dialog&tbm=isch&biw=1293&bih=1255">Internet</a>)</figcaption>
-</figure>
-<p>Above you can see the Drop Shadow dialog in Photoshop. There is an article online that does a great job of breaking down <a href="http://garymgordon.com/misc/tutorials/photoshop_tutorial/effects1/dropshadow.htm">what each of the properties do</a>. Once it's understood what Photoshop is using to calculate it's easy to translate those values into <a href="https://developer.mozilla.org/en/css/box-shadow">CSS3 <code>box-shadow</code> values</a></p>
-<dl>
- <dt>Blend Mode:</dt>
- <dd>Blends the shadow color with the background. CSS does not offer a similar property; this makes it difficult to match the colors exactly. CSS approximates a blend mode of Normal, however Photoshop uses Multiply by default. Using black (<code>#000</code>) will produce the same shadow in Normal and Multiply.</dd>
-
- <dt>Opacity:</dt>
- <dd>Sets the opacity of the shadow. This is similar to using <code>rgba()</code>. <br><em>Note: <code>rgba()</code> is currently <a href="http://css3pie.com/documentation/supported-css3-features/#rgba">not supported in CSS3PIE</a> for <code>box-shadow</code></em>.</dd>
-
- <dt>Angle:</dt>
- <dd>Controls the directions of the shadow. The <em>Angle</em> can be replicated using the <code>&lt;offset-x&gt;</code> and <code>&lt;offset-y&gt;</code> values of <code>box-shadow</code> and can be calculated with a little trigonometry.</dd>
-
- <dt>Distance:</dt>
- <dd>Controls the shadow offset in the direction of the <em>Angle</em>. This combines with the <em>Angle</em> for calculating the <code>&lt;offset-x&gt;</code> and <code>&lt;offset-y&gt;</code>.</dd>
-
- <dt>Spread:</dt>
- <dd>Determines the portion of the shadow (percentage of the <em>Size</em>) that is a solid color; the rest of the shadow is blurred. <em>Spread</em> is analogous to the <code>&lt;spread-radius&gt;</code> value of <code>box-shadow</code>.</dd>
-
- <dt>Size:</dt>
- <dd>Sets the radius of the shadow in pixels. In CSS3 the <em>Size</em> is the <code>&lt;spread-radius&gt;</code> plus the <code>&lt;blur-radius&gt;</code>.</dd>
-
- <dt>Contour &amp; Noise:</dt>
- <dd>CSS3 <code>box-shadow</code> has no equivalent values.</dd>
-</dl>
-
-<h2>CSS3 Box Shadow</h2>
-<p>Now that we have a basic understanding of what Photoshop is doing, let's look at the <a href="https://developer.mozilla.org/En/CSS/Box-shadow#Values">values that <code>box-shadow</code> accepts</a> and see how they compare.</p>
-<dl>
- <dt><code>&lt;offset-x&gt;</code> and <code>&lt;offset-y&gt;</code>:</dt>
- <dd>Moves the shadow on the x and y axis. These values are required and are always the first two length properties. These are calculated using the <em>Angle</em> and <em>Distance</em> in Photoshop.</dd>
-
- <dt><code>&lt;blur-radius&gt;</code></dt>
- <dd>The radius of the blur in addition to the spread. A blur of 10px with a spread of 10px will result in a 20px shadow where the first 10 pixels (the spread) is solid and the last 10 pixels gradually fade out (the blur). This is always the third length value and is optional.</dd>
-
- <dt><code>&lt;spread-radius&gt;</code></dt>
- <dd>Just like Photoshop, the spread is the portion of the shadow that is a solid color. Unlike Photoshop, spread is expressed in pixels instead of as a percentage of the total <em>Size</em>. A spread of 10px with a 0px blur will look similar to a 10px solid border. Spread is always the fourth length value and is optional.</dd>
-
- <dt><code>&lt;color&gt;</code></dt>
- <dd>Sets the color of the shadow. If a blur is set the shadow will automatically be slightly transparent. The spread area of the shadow will appear in the color specified. To have the entire shadow, including spread, appear transparent use <code><a href="https://developer.mozilla.org/en/CSS/color_value#section_9">rgba()</a></code>.</dd>
-</dl>
-<h2>Generating the CSS3 Values from the Photoshop Values</h2>
-<p>As mentioned before, although Photoshop and CSS3 represent the values differently, they are actually analogous to each other.</p>
-<h3>Calculating the Offsets</h3>
-<p>Photoshop uses <em>Angle</em> and <em>Distance</em> which can be used to calculate the <code>&lt;offset-x&gt;</code> and <code>&lt;offset-y&gt;</code>. Imagine a right triangle where the <code>&lt;offset-x&gt;</code> and the <code>&lt;offset-y&gt;</code> formed the right angle. The <em>Distance</em> would be the hypotenuse and the <em>Angle</em> is the inner angle. There are <a href="http://easycalculation.com/trigonometry/triangle-angles.php">online triangle calculators</a> for this basic trigonometry. Again, the <code>&lt;offset-y&gt;</code> and <code>&lt;offset-x&gt;</code> are the opposite and adjacent sides, the <em>Distance</em> is the hypotenuse.</p>
-<figure>
-<svg xmlns="http://www.w3.org/2000/svg" width="210" height="210">
- <line x1="20" x2="20" y1="10" y2="190" stroke="red" fill="transparent" stroke-width="3"/>
- <line x1="20" x2="200" y1="190" y2="190" stroke="green" fill="transparent" stroke-width="3"/>
- <line x1="200" x2="20" y1="190" y2="10" stroke="black" fill="transparent" stroke-width="3"/>
- <path d="M 170 190 A 30 30, 0, 0, 1, 178.6 168.6" stroke="gray" fill="transparent" stroke-width="2"/>
- <text x="75" y="208" fill="green">x-offset</text>
- <text x="-135" y="13" fill="red" transform="rotate(270)">y-offset</text>
- <text x="30" y="-11" fill="black" transform="translate(60,60) rotate(45) translate(0,0)">distance</text>
- <text x="176" y="114" fill="gray" transform="rotate(20)">angle</text>
-</svg>
-<figcaption>Triangle formed by <code>&lt;offset-x&gt;</code>, <code>&lt;offset-y&gt;</code>, <br><em>Distance</em> and <em>Angle</em>. (<a href="http://caniuse.com/#feat=svg-html5">requires modern browser</a>)</figcaption>
-</figure>
-<p>Using this basic understanding of triangles it becomes easy to calculate the offsets using the Photoshop Drop Shadow values. As the online triangle calculator linked above points out, <code>Sin(&Theta;) = Opposite / Hypotenuse</code>. More importantly, <code>Opposite = Sin(&Theta;) * Hypotenuse</code>. The same is true of the adjacent side: <code>Adjacent = Cos(&Theta;) * Hypotenuse</code>. And if you're remembering your trig properly &mdash; or looking at the <a href="http://easycalculation.com/trigonometry/triangle-angles.php">cheat sheet</a> &mdash; you know that only two values are needed to calculate any other two. Thankfully, <a href="https://github.com/chriseppstein/compass/issues/201">basic trig functions were added to Compass</a> in version 0.11.</p>
-<p>For those who are still totally lost:</p>
-<ul>
- <li><em>Angle</em> == &Theta;</li>
- <li><em>Distance</em> == Hypotenuse;</li>
- <li><code>&lt;offset-y&gt;</code> == Opposite;</li>
- <li><code>&lt;offset-x&gt;</code> == Adjacent;</li>
-</ul>
-<h3>Calculating the Blur and Spread</h3>
-<p> The <code>&lt;blur-radius&gt;</code> and <code>&lt;spread-radius&gt;</code> are not quite as straight-forward but are equally easy to calculate. In Photoshop, the <em>Size</em> attribute represents the total length of the shadow and the <em>Spread</em> represents the percentage of the shadow that is a solid color &mdash; the rest is blurred. In CSS the spread is added to the blur for the total shadow size. With this in mind, <code>&lt;blur-radius&gt;</code> is equal to the Photoshop <em>Size</em> minus the <code>&lt;spread-radius&gt;</code> and the <code>&lt;spread-radius&gt;</code> equals the Photoshop <em>Size</em> multiplied by the Photoshop <em>Spread</em> percentage. Again, the code example above bears this out.</p>
-<h3>The <code>@mixin</code></h3>
-<p> Below is a Sass <code>@mixin</code> that takes values from Photoshop, converts them, and creates a CSS3 <code>box-shadow</code>.</p>
-{% gist 1039282 photoshop-drop-shadow.scss %}
-<p>The code above relies on the <a href="http://compass-style.org/reference/compass/css3/box_shadow/#mixin-box-shadow">Compass <code>box-shadow()</code></a> <code>@mixin</code> to generate the correct CSS rules with all of the correct vendor prefixes.</p>
-<p>It's worth noting that two additional <code>@mixin</code>s are shown in the code above. <code>@mixin photoshop-inner-shadow</code> is for Photoshops Inner Shadow Layer Style, which is analogous to the <code>inset</code> value for <code>box-shadow</code>. <code>@mixin photoshop-text-shadow</code> is for <code><a href="https://developer.mozilla.org/en/CSS/text-shadow">text-shadow</a></code> which is implemented in Photoshop as a Drop Shadow applied to a text layer. It's also worth noting that CSS does not support a <em>Spread</em> on <code>text-shadow</code>s.</p>
-<h2>Seeing It In Action</h2>
-<figure>
- <img src="http://assets.heygrady.com/photoshop-drop-shadow/photoshop-drop-shadow.png" height="200" width="200" alt="">
- <figcaption>An image of red box with a drop <br> shadow created in Photoshop.</figcaption>
-</figure>
-<figure>
- <iframe src="http://assets.heygrady.com/photoshop-drop-shadow/photoshop-drop-shadow.html" height="200" width="200" scrolling="no" frameborder="0"></iframe>
- <figcaption>A red box with a <code>box-shadow</code> <br>(<a href="http://assets.heygrady.com/photoshop-drop-shadow/photoshop-drop-shadow.html" target="_blank">view live example</a>).</figcaption>
-</figure>
-<p>Using the <code>@mixin</code> is quite simple. Assume that we want to recreate the above Photoshop image in CSS. This image was created with the default <em>Blend Mode</em>, <em>Color</em> and <em>Opacity</em>. The <em>Angle</em> is 120&deg;, the <em>Distance</em> is 10px, the <em>Spread</em> is 50% and the <em>Size</em> is 10px. As the example below shows, all that is needed is plugging in the values as they appear in Photoshop into the <code>@mixin</code>.</p>
-{% gist 1039282 example.scss %}
-<p>The <code>@mixin</code> will automatically convert the values and create the corresponding CSS rules as shown in the example below. It is important to note that the <em>Angle</em> and <em>Spread</em> values should always be unitless while the <em>Distance</em> and <em>Size</em> values require px as the unit.</p>
-{% gist 1039282 example.css %}
-
-
Oops, something went wrong.

0 comments on commit b8b528e

Please sign in to comment.