I’m Paul Hayes

I design and build websites. I work at Last.fm and live by the sea in Brighton. I love to experiment with CSS, HTML and JavaScript. The best place to find me is on Twitter.

Face detection with canvas and webcam video

With the getUser­Me­dia API, a video ele­ment, a can­vas ele­ment and LiuLiu’s excel­lent face detec­tion algo­rithm, we can eas­ily play around with web­cam video data in the browser, plug-in free. To this end, I’ve cre­ated two exper­i­ments, one that places a mask over your face as you move and another that attempts to scale con­tent based on your dis­tance from the screen.

Use CSS transitions to link Media Queries and JavaScript

A com­mon prob­lem in respon­sive design is the link­ing of CSS3’s media queries and JavaScript. For instance on a larger screen we can restyle, but it might be use­ful to use JavaScript and pull in dif­fer­ent con­tent at the same time, e.g. higher qual­ity images. With CSS tran­si­tions, specif­i­cally their tran­si­tio­nEnd events, we can marry up our media queries and JavaScript per­fectly, with­out resort­ing to win­dow resize events.

Improving the CSS only modal

In my orig­i­nal post I explained how to cre­ate a CSS only modal pop-up using :tar­get, pseudo-elements and pointer events. This had a num­ber of caveats, any browser that didn’t sup­port pointer events would see a non-clickable page and the forward/back con­trols would nav­i­gate through dia­logues, which is usu­ally unde­sir­able. This follow-up addresses those con­cerns and cre­ates a more production-ready version.

Creating a modern modal with CSS

Using CSS3 tech­niques a modal box can be cre­ated with­out JavaScript or images. With a bit of ani­ma­tion, tran­si­tion and trans­form, it can be made that lit­tle bit more spe­cial. In this exper­i­ment, click­ing an ‘open’ link pops up a dia­logue with a smooth hard­ware accel­er­ated bounce (where sup­ported). When open all other ele­ments on the page are non-clickable. Clos­ing the modal is also ani­mated, with a min­imise effect.

Creating a sphere with 3D CSS

With CSS3’s 3D trans­forms it is pos­si­ble to cre­ate a sphere-like object, albeit with many ele­ments. Recently I’ve been look­ing at cre­at­ing applic­a­ble 3D carousels. These rely on posi­tion­ing pan­els in a cir­cle around a cen­tral point (ie. rota­tion about the Y-axis), I put these pan­els in an unordered list. A nat­ural exten­sion is to dupli­cate each <ul> and rotate about the X-axis, cre­at­ing a sphere.