corenominal

Full stack web developer, interested in all the things, but especially the web, code, design, Linux, OS X, PHP, WordPress, JavaScript & robots.

Tagged: codepen

SVG logo animation: Man on a rock, floating in space, waving

I was looking at my site’s SVG logo and I thought to myself, it’d be cool if the little dude would offer up a little waving arm. So, I played around with some JavaScript and came up with the following pen.

See the Pen Man on a rock, floating in space, waving by Philip Newborough (@corenominal) on CodePen.

I’ve got no idea if the above is a valid method for animating a SVG, but it seems to work and I think it looks cool. I’ll probably use it with the mouseover and mouseout events, like the following pen.

See the Pen Man on a rock, floating in space, waving: hover by Philip Newborough (@corenominal) on CodePen.

HTML5 Canvas Sprite Animation – Alien

Tonight, I made an attempt at creating a HTML5 Canvas sprite animation. The process is actually quite simple, if not a little fiddly. I figure that I’ll need to get good at this, if I want to finish my game. Anyhow, an example of one of the sprites I created can be seen below. The sprite loops through 4 states, using a spritemap to show a different alien for each state. I’m thinking of using this one as part of my game’s intro.

See the Pen Canvas Sprite – Alien Loop by Philip Newborough (@corenominal) on CodePen.

HTML5 Canvas Blocks #4

The thought of having to choose a colour for something does not sit comfortably with me. I have read all about colour theory, like a million times, but I still feel mentally paralysed when faced with having to pluck a colour from the rainbow. It’s a sickness, I tell you.

So, anyhow, I currently find myself in said position. Normally, my first line of defence is to revert to good old black ‘n’ white, however, this time I’ve made a mental promise to myself to go wild and choose some actual colours. To be clear, I’m not planning on using the colours below. I think they’re a little too wild, but I do the like the combination. The colours are those featured on the Beastie Boys album art for Hot Sauce Committee Part Two.

See the Pen HTML5 Canvas Blocks #4 by Philip Newborough (@corenominal) on CodePen.

Or maybe I should?

Hiding an Image’s Pixel Border with CSS box-shadow

This is an edge case: I’m working on a WooCommerce project where I’m importing tens of thousands of product images from a supplier. The problem is, all the images have a 1 pixel black border and they look terrible when they’re displayed on the site. I have no idea why the supplier thought this was a good idea, but there you go.

To workaround the issue, I decided to attempt to hide the image border using the CSS3 box-shadow property. First, I wrapped the img element inside a div element. I then applied an inset box-shadow property to the div element, before adjusting the z-index of the img element to make it sit below the div. See the demo below.

See the Pen Hiding an Image’s Pixel Border with CSS by Philip Newborough (@corenominal) on CodePen.