Archive for Web Design

Site redesign

For those of you who actually look here, and I’m thankful for all that do, you may have noticed a rather drastic change in colour scheme and an entire redesign of the home page.

Read more

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”.

f4player

There are times where we don’t want a lot of useless features and especially don’t want annoying restrictions. Sometimes, all we want to do is stick a bloody video into a webpage and play it. Not mess with youtube or license-rape and certainly not shell out for something that (if we weren’t so lazy) we could make in flash.

Enter f4player by Goker Cebeci.  Its simple, its lightweight (like 10kb light!), it gets the job done. Best feature is it’s free and open source. No painful installations, configurations or bullshit. It just works.

Get f4player

Of course, documentation is … sparse, but it can be figured out very easily, simply upload the player swf, the skin swf, your video  and an optional thumbnail jpeg. Paste some embed code and set your flashvars as desired. Bang. Your video is up and playing. It is just that simple.

Source is included so you can, if you are feeling tinkery, mess with it in every conceivable way and even make your own skins.

Of course, be a good open-source citizen and chuck the guy some bucks for his hard work, and of course honour the GPL3 license.

Nifty inset effect for divs

Just messing about with my stylesheets as usual. Always loved the CSS3 box-shadows and was looking for something to replace the lame blue borders I have on my divs. So I came up with a qickie universal box-shadow inset effect that can be applied to any div (indeed, any block-level element). It does not use inset so you won’t have to adjust your inner content, but it will take up more space around the div so you might want to watch your crowding. Anyway, here’s the code:

box-shadow: -4px 0px 4px 2px rgba(0, 0, 0, 0.25),4px 0px 4px 2px rgba(255, 255, 255, 0.25),0px -4px 4px 2px rgba(0, 0, 0, 0.25),0px 4px 4px 2px rgba(255, 255, 255, 0.25);

Since it uses only 25% black and 25% white as colours, it will go with pretty much anything. Of course play with the parameters and your background colours to suit your taste.

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