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
mouseout events, like the following pen.
As the title says, useful pens for everyday front end development, nice.
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.
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.
Or maybe I should?
Yesterday was Valentine’s Day and CodePen featured some pretty nice “love” inspired pens. This one was my favourite, I could watch it for hours.
We have a JS console now! Hopefully it works exactly as you expect it to. As in, you can log things to the console and see the results, and you can type things into the console and see the results.
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.