It's been a while since I published my Pure html5 / css3 animated image captions and I thought I'd revisit the subject. The following demo is a slightly different take on the last - instead of hiding the captions and revealing them on mouseover this time I'm hiding the images and showing the captions first. The resulting animated images/captions are then animated using css3 2d and 3d transforms. Normally if you flip and element using transforms, it appears as a mirror-image, however if you use the backface-visibility property (set to hidden), the resulting element is then hidden. This is the key to the following animations.

the set-up

1) The html used is as before, a <figure> element containing an <img> and a <figcaption>, the only difference being this time I'm allowing myself to use a containing <div> that specifies the type of animation (horizontal, diagonal, vertical…).

<div class="vertical">
	<figure>
		<img src="images/joni-mitchell.png" alt="Joni Mitchell" width="200" height="200" />
		<figcaption class="orange">Joni Mitchell</figcaption>
	</figure>
</div>

2) The containing <div> has a position of relative, and from there on the <figure>, <img> and <figcaption> elements are all set to position absolute so they are all positioned on top of each other.

3) Now, the <img> tab is flipped over using a transform. Because it has a backface-visibility of hidden it is now invisible.

4) The final effect is achieved on mouseover. On mouseover, the <figure> element is flipped using a transform that is animated using a css3 transition.

5) Once it if flipped, the <img> which is now flipped back becomes visible whilst the <figcaption> which is flipped over becomes hidden.

And here's the full demo of my Animated image captions using the css backface-visibility property

So you have several desktops set up in Mission Control and you have assigned various apps to each desktop. Now when you want to change your desktop picture you open up System preferences, navigate to the Desktop & Screensaver panel and apply a new picture. At this point OSX 10.8* changes only the picture on the currently active desktop so, if you want to change all desktops to the same picture you have to swap to each desktop and change it manually. Fine if you only have 2 or 3, but if you have many desktops how can you change them all at the same time?

*this probably applies to OSX 10.7 as well - I don't know, as I jumped straight from OSX 10.6 to OSX 10.8.

This is where Automator comes in. Automator allows you to script many tedious tasks on you mac (see my previous posts on using Automator), in this case we will be selecting a new picture and then rewriting the desktop preferences file to use only that selected picture. The finished Automator script will be a ”Service“. It will be available in the Finder under Finder -> Services -> Change All Desktop Picutres…

1) Open Automator

Automator is in the Applications folder. Open it and select “Service” as the document type.

2) Start building your script

At the top of the workflow pane (the right-hand column where it says “Drag actions or files here to build your workflow.”) you will see “Service receives selected text in any application” where ‘text’ and ‘any application’ are select boxes. Change the select boxes to read “Service receives no input in Finder”.

3) Adding the first action “Ask for Finder Items”

From the Library column on the left of the Automator window select “Files & Folders” then from the second column double-click on “Ask for Finder Items” (or drag it in to the workflow).

4) Configuring the “Ask for finder Items” action.

First, change the “prompt” message to “Choose a desktop picture:”, then Select “Start at:” and navigate to where you keep your desktop pictures (I keep all mine in the default: /Library/Desktop Pictures/ folder). Finally make sure that “Allow Multiple Selection” is unchecked.

5) Adding the “Run Shell Script” action

Select “Utilities” from the library and then double-click or drag the “Run Shell Script” action to add it to your workflow.

6) Configuring the “Run Shell Script” action

Once you've added the action, make sure that the first two select boxes are set to:

Shell: /bin/bash
Pass input: to stdin

Now in the text area (Where it says cat), delete cat and replace it with the following shell script:

read -e PICTURE;
 
function set_all_desktops
{
defaults write com.apple.desktop Background "{default = {ImageFilePath='$PICTURE'; };}";
killall Dock
}

set_all_desktops

6) Saving and running the new Service

Choose File -> Save and call it “Change All Desktop Pictures…” and you're done. Now to run your new service switch to the Finder and choose Finder -> Services -> “Change All Desktop Pictures…”. In the dialog that opens simply select the new picture and click on “Choose” and all your desktops will be updated.

In this example we have built the script as a Finder Service, however you could also build it as an Application which could then be put in the dock. In fact I already have and you can download it from the Automator Actions section of my Software page.

CSS3ButtonBuilder lets you visually create sophisticated CSS only buttons (without the use of background images) that are cross-browser. By simply adjusting sliders or numerical input you can adjust the values for various CSS3 properties and see the results in real-time in the preview window. When you are done, you can output cross-browser CSS3 markup for inclusion in your sites stylesheet. CSS3 ButtonBuilder also lets you save and re-load your designs for later use or adjustment.

The application features:

A live updating preview that also lets you change the button text and the background colour so that you can see how your design will work on the same background colour as your site.

Sliders to adjust all numerical values (as well as numerical input for precision).

Fully featured rgba colour pickers — clicking on a colour-well opens an rgba colour picker that lets you adjust the rgb values as well as the transparency. You can also choose form pre-set colours and lock the sliders for greyscale output.

You can select whether your button will have a solid background colour or a CSS3 gradient. The gradients are fully customizable — you can add as many different colour-stops as you like and adjust their values as well as choosing the direction (horizontal, vertical, diagonal, radial) of the gradient.

You can save your designs and re-load them at anytime to re-use the code or adjust the design. Save your work simply by clicking on the ‘Save’ button and typing a name for the design. Open a saved design by clicking on ‘Load’ and selecting the design from the list. Clicking on the X icon to the left of the saved button thumbnail will delete it.

When you are happy with your button design you can easily and quickly output the CSS3 markup needed to apply the design to either an anchor <a> element or a form element <button> or <input>.

The application preferences allows you to select which web browsers you would like to generate compatible CSS3 markup for. CSS3 ButtonBuilder generates code that supports the 5 major browsers: Chrome, Firefox, Safari, Opera and Internet Explorer*. As default the app will always output the standard WC3 properties for your design.

* full browser support (particularly in the case of IE), refers to the use of the most up to date version of the browser.

Take the pain out of hand-coding cross-browser CSS3 buttons with CSS3 ButtonBuilder! Now on the Mac App Store.

The ResponsiveResize extension for Safari help speed up development of responsive design by automatically re-sizing the Safari viewport with pixel precision to one of several preset widths. In each case the space taken up by the scroll bar is accounted for. If the particular width you want to work to is not one of the preset values there is also in input field to type your required viewport width.

Basically I've been working on some responsive site designs recently (including a 'soon to be completed' re-design of this site) and I was annoyed to discover that the Safari window can't be resized smaller than 376px - no good if you want to check your design at 230px!. After a bit of experimentation I found out you can take it right down to 84px if you do it programmatically, and so the ReponsiveResize extension was born.

Most of the presets cover iPhone (230px by 480px) & iPad (768px by 1024px) as these were the target for the sites in question.

The style of the extension toolbar borrows the 'iOS' theme from my ButtonBar+ multiple bookmark bar extension.

You can download the ResponsiveResize Safari Extension from my downloads page.

For better or for worse CSSEdit was discontinued when MacRabbit released Espresso 2. I'm sure I wasn't the only one eagerly awaiting CSSEdit version 3 with CSS3 capabilities but unfortunately it never came — or rather it came incorporated in to Espresso and was discontinued as a stand-alone app.

Well, I tried Espresso but it doesn't really suit my workflow and so I continue to use CSSEdit 2.6.1. However, there is a way CSSEdit can be hacked to get some CSS3 goodness in there...

If like me you are using CSSEdit on a daily basis you've probably long since abandoned the Visual Editor (GUI) panel for most things and work solely in the Source Editor panel. Typing with auto-completion is what makes CSSEdit so fast and easy to use and it's exactly here that we can add our CSS3 properties and values.

First of all open your apps folder, locate CSSEdit and control-click on the icon. Then select 'Show Package Contents' from the contextual menu and open the 'Contents' folder. Inside the 'Contents' folder, locate and open the 'Resources' folder and then locate the file 'AutoCompletion.plist'. Rename it (or move it somewhere else), then download the following replacement .plist file:

CSS3 properties for CSSEdit: https://gist.github.com/2272849

Put the new AutoCompletion.plist file in to the 'Resources' folder and re-start CSSEdit. Now when you type you should find that you have all CSS3 properties and values available. I've also included various vendor specific properties and a few useful extras.

Note: Many of the properties in the full CSS3 spec are not currently implemented in any browser. If you want to exclude anything, simply locate it in the .plist file and comment it out using standard html comments eg:

<!--<key>hanging-punctuation</key>
	<array>
		<string>none</string>
		<string>first</string>
		<string>last</string>
		<string>force-end</string>
		<string>allow-end</string>
		<string>inherit</string>
	</array>-->

If you are a CSSEdit user I hope you find it useful - I find it has really speeded things up for me!

I recently had to style a table for a shopping cart with rounded corners and a drop shadow. So how is this done? It would be great if you could just slap "border-radius: x" straight on to the <table> element and it would be done but unfortunately this doesn't work. You have to get a rounded corner on to each <th> or <td> at the corners of the table.

So how do you do that? Add a class to each corner cell? I suppose you could but it would mean ugly html. CSS to the rescue! By using child selectors you can get those round corners in there without touching the html at all…

For example: to target the top left-hand cell (assuming you have a header on your table), you target th:first-child (the first <th> element); likewise to get the top right-hand cell you target th:last-child.

To get the bottom left-hand cell you need to target the first cell of the last row of the table. In this case, your selector will be: tr:last-child td:first-child…

…and for the final corner: tr:last-child td:last-child

Finally, the zebra striping on the table is done using the :nth-child selector: tr:nth-child(even) will select only the even numbered rows (note: in the following example I have used tr:nth-child(even) td as I am using gradients (the gradients need to be on the <td> element else they stick out of the rounded corner in Firefox).

Here's a live example of my CSS3 tables with rounded corners on dabblet.com

The html markup for the table was generated using my own Create Table plugin for Coda.