Articles categorised by Code

Yesterday, the world did not end. So, today is "Be kind to front-end web developers day". Today, we pretend that Bugs, Internet Explorer 8 and below, Retina Devices and low bandwidth DO NOT EXIST. We pretend that older browsers look like shit on your Web 3.0 site.

There's a new wave of CSS madness, ushered in by the recent additions to the W3 Filters Specification. An important issue that keeps coming up is the new drop-shadow filter and whether it serves a purpose. We already have the wonderful box-shadow property that allows one to specify a horizontal offset, vertical offset, optional blur radius and optional spread radius. So why another drop-shadow option?

With CSS filters, you can manipulate your images within your code itself, which makes for interesting possibilities, especially while using transitions or animations. You can blur images, convert them to black-n-white, boost saturation or brightness and more, with just a line of CSS.

Captions on hover are smoother and cooler with a touch of animation. With the power of CSS3, we can create transitions that are hardware accelerated and therefore performance-optimised (or way faster!) than anything you can cook up with JavaScript.

Here's a simple CSS solution to create those lovely embossed effects on lines and text in your content. I've cooked up a quick demo on a subtle grey background image.

I needed a blog. I needed it bad. This was my way of giving back to the incredible online web development community and its benevolence. (I still owe a few coders some beers…)