Alfred’s OS X Notes – Screenshots and Screen Captures

Every once in a while I need to take a screenshot or screen capture in OS X. (So what’s the difference between a screenshot and a screen capture? None really, as far as I know. But you have to include both so people searching for either will find these nuggets of wisdom.) Invariably I have to look up how to do this: I don’t have a great head for keyboard shortcuts. 😛 So, I decided to keep a notes page on how to do it. Leave a comment if you use a different method or workflow.

This first set of commands I got from an Apple support page.

Command-Shift-3 (⌘⇧3)
Takes image of whole screen and saves it to desktop.
Command-Shift-4 (⌘⇧4)
Gives you a crosshair, which you can use to select an area of the screen. Also saves to desktop.
Control-Command-Shift-3 (⌃⌘⇧3)
Whole screen, saves to clipboard.
Control-Command-Shift-4 (⌃⌘⇧4)
Crosshair area selection, saves to clipboard.

My friend Joan (V-C, not S) recommended a program called Skitch, which not only captures screenshots, but also allows you to mark them up.

Alfred’s CSS3 Notes – Text Properties

Text Shadow

text-shadow: 1px 1px 5px #BCBCBC, -1px -1px 3px #FF0000;

In this example, we have two shadows separated by commas. The first element is the horizontal offset, the second, the vertical offset; the third is the blur; and finally, the colour.

Text Stroke

Only available in Webkit. Draws a border around the text.

-webkit-text-stroke: 1px #000;

Also comes with text fill:

-webkit-text-fill-color: #fff;

This overrides the color attribute in Webkit.

RGBA Colour Opacity

Same as rgb() colour, but adds a fourth parameter for opacity. The opacity parameter is between 0 and 1, inclusive; where 0 is fully transparent, and 1 is fully opaque.

background-color: rgba(255,255,255, 0.5);

rgba() is available in all standards compliant browsers, and IE 9+. There is a workaround for dealing with the wrong-headed browsers:

color: #aaa;
color: rgba(200, 200, 200, 0.5);

As you can see we declare two values. In the case of standards compliant browsers, the rgba() declaration, which comes second, overwrites the first, and we get the benefit of the transparency. For the ludicrous browsers, the second declaration will be ignored, and they get the first declaration color.

We can also use a transparent png for backgrounds.

background: transparent url(bg.png);
background: rgba(255, 255, 255, 0.5);

This will not work with IE6, but anything after that will be OK. I encourage dropping support for IE6, to motivate individuals and corporations to upgrade, or better yet, switch to standards compliant browsers.

Alfred’s CSS3 Notes – Selectors

Target Selector

Applies styling when the selector is in a target state. Which is to say it is the target of a hash mark in the URL.

#container:target {
  background-color: #f6f6f6;

Adjacent Sibling Selector

From CSS2:

h2 + p {}
Will select the second element when it immediately follows the first. (Reference)

General Sibling Selector

From CSS3:

h2 ~ p {}
Selects all p’s that share a parent with the h2. (Reference)