The Blog

  1. CSS Tags With Outlined Borders

    I’ve just updated my online web development CV and made use of a tag-based system to display the various roles I took on for each of the projects. I was after a very specific look, whereby tags are both shaded (filled) and outlined. Screenshot of my online web development CV, demonstrating the use of CSS tags. A quick scan online didn’t produce any immediate solutions, so I decided to roll my own. The usual method of drawing complex shapes using CSS relies on pseudo elements. There’s a great post on CSS Tricks that details the many shapes that can be …

  2. Image of the Cubase 8 logo, as seen on the product's box.

    I’ve used 32-bit versions of Steinberg’s Cubase on Windows machines for over 15 years, and have come to rely on a fairly stable setup with all my favourite plugins to hand. I’d dabbled with the idea of going 64-bit before, but was limited by my trusty Tascam US-122, which never had dedicated 64-bit drivers written for it, and was generally poorly-supported after Windows XP (a ‘Vista-compatible’ driver was released, but it was pretty buggy). Only recently have I upgraded my machine to a lovely i7 with 16GB RAM, so it seemed a crying shame to stick with a version of …

  3. Snap SVG logo.

    Before I ventured on this mini project, I had no previous experience with animating SVG graphics. This article documents my journey and details my processes (and mistakes made along the way). The final product I created consists of a slideshow whereby four devices – desktop, laptop, tablet, and smartphone (basically iMac, MacBook Pro, iPad, and iPhone-esque form factors) – morph into one another, in order to showcase how the responsive websites I’ve created react to the various screen sizes. The finished article, showing each of the four morphing devices. I love Mary Lou’s work over at tympanus.net and was really …

  4. Screenshot from the Nested Flexbox article

    I’ve been using Flexbox on production sites now for some time, and on the whole it’s made life a lot easier when building product grids, or anything that requires neat, orderly boxes of content sitting in rows and columns. In a typical situation where blocks of content consist of a title, image, price, and a call to action (such as an ‘add to cart’ button), the markup would look something like this: The HTML <div class=”products”> <div class=”product-outer”> <div class=”product-inner”> <a href=”/path/to/product/” class=”featured-image”> <div class=”product-thumbnail”> <img src=”/images/image.jpg” alt=”image description”> </div> </a> <h3 class=”product-title”> <a href=”/path/to/product/”>This Is A Product Title</a> </h3> …

  5. A Brief Foray Into CSS Shapes

    Screenshot of Freakleaf's home page demonstrating CSS Shapes.

    I often use my website as a playground for new technology, so thought I’d try making use of CSS Shapes, after getting suitably inspired by this example. First off, as of August 2014, support for CSS Shapes Module Level 1 is magnificently poor (with only dev channel versions of both Chrome (unprefixed) and Safari (prefixed with -webkit-) harbouring working versions), so I had to implement it in a way that would only progressively enhance the current layout, as opposed to making changes that would destroy the vast majority of users’ experiences. The web has always played second fiddle to print …

  6. CSS Icon Backgrounds

    Screenshot of a hue wheel demonstrating the colours used in my post.

    When composing this post, I decided that each of the accompanying icons would work well against coloured discs, gradually rotating in hue as they progressed down the page. The result was something a bit like this: I opted for 12 different colours, so each icon’s hue would change by 30 (hue being measured on a scale of 0-360 degrees). After some thought, I decided to create the discs programmatically using CSS. This has the following benefits over including them as part of the icon image: If I ever decide to add, remove, or edit page content, I wouldn’t need to …