Tag Archive for css

Edge Animate

I always try to follow up a negative, ball-slicing rant with something positive. Both for my own mental health and those mysterious ghost readers of my blog (which I probably don’t have anyway).

Adobe is usually one of my favourite companies to take a crap on. Sure, they often deserve it. Being so big and bloaty and annoyingly necessary. This time though, they’ve really done it.

I’m talking about Edge Animate.

Stop the world, you’ve finally done something GOOD and USEFUL. I’m surprised I’m saying that. Just saw a talk this morning at FITC  from Sarah Hunt from Adobe. Quite frankly, i’m impressed.

Get this – what if you could have flash-like animations without flash? What if you could animate something pretty damn cool without having to hand code every transition? What if there was a visual tool that marries javascript and css to produce these lovely animations?

There is: Adobe’s Edge Animate.

If you are familiar with Flash or After Effects, this will be a breeze. Hell, its better than dealing with Flash and its annoying tweening system. Make your vector animations using their keyframe editor, handily making automatic keyframes and transitions (formerly known as tweens for the former flash heads) . Then, you get to spit them out as a bunch of css and js files. That simple.

About time. Though I feel bile rising in my throat in grudging, I have to say: “thank you, Adobe”.

When a discovery pushes you forward

Wow, I just love when this happens. I make one tiny discovery (usually while trawling google for help on some problem I’m having) and it pushes me into a completely new way of doing things.

In this case, it was the discovery of special CSS selectors. This will sound pretty dry and mundane to those who aren’t interested in playing with CSS for fun (and profit!) but to me, its a god send that opens up a whole new world of possibilities as well as solving some of the more nagging and annoying issues I’ve had over the years.

Since a picture is worth a thousand words, lets take the example of the table for the recipe in the previous post. So tired of dry, dull ugly tables, I went off on a tangent to try and improve it a bit. Here it is again:

Ingredient Volume/5mL Percentage
Base (24mg/mL, 50/50) 2.5mL 50.00%
Vegetable Glycerine 1.10mL 22.00%
Propylene Glycol 0.50mL 10.00%
TPA Absinthe Flavour 0.75mL 15.00%
Liquid Menthol 0.05mL 1.00% (1 drop)
Liquid Stevia 0.10mL 2.00% (2 drops)

I wanted a header row that would match the look of my site, rounded corners for that sleek look, and to colour every second row. Now the old way was putting in-line css into every other friggin td and forget about border-radius working properly on <thead> elements. Why? I haven’t a clue.

This is the breakthrough moment for me: special CSS selectors. I found that I could target the children of of the table elements (th, tr, td, etc) by their sequence.

For example, lets take the header row. There are three th’s in it. If I applied border radius to the top right and left corners, i would be left with two dips between the first and second, and the second and third th.  But check this out:

th {background-colour:rgba(255,255,255,0.05);}
th:first-child {border-top-left-radius:12px;}
th:last-child {border-top-right-radius: 12px;}

Note that I can target the first child (left th) and last child (right th) while leaving the centre one alone. All, of course, share the same background colour. Fantastic!

Why stop there though? I still want every second row to be coloured for ease of reading (tables of data make me blind too). In addition to being able to target the first and last child, i can also target the nth child by number which would be in the form:

tr:nth-child(2) {some parameters}

Meh. Useful, but not so much in this case. I suppose I could do something messy like:

tr:nth-child(2), tr:nth-child(4) ... etc

What a mess that would be. Well here’s what made my day: you can select every nth child!  Like-a-dis:

tr:nth-child(2n)

Voilà. Every second instance of tr now has a background colour.

The fun doesn’t stop there. Check out this link I dredged up. It has a whole host of special CSS selectors to make your stylesheet-hacking life a helluva lot easier:

The 30 CSS Selectors you Must Memorize

Still revising…

Yes the blog still looks like shit. I admit it. I’m still messing with the CSS, be patient :) i’ll have it my usual unreadable day-glo in no time :)