Chris Hannah

css

Create a 9-Patch Border with Broider #

Pretty cool little tool by Max Bittker to make 9-patch borders in CSS. Reminds me very much of the pixel art in GameBoy games. If you notice a new border anywhere on my website soon, you know where it’s from.

Adding a Touch Bar Icon to Your Website #

With the MacBook Pro’s new Touch Bar, you can now create your own favicon that will appear there when a user sets it as a bookmark. The same file is also use to create an alpha mask when adding your website as a Pinned Tab.

It’s a small bit of code, that you add to your <HEAD> section, just by your other favicons.

Just specify that it is a “mask-icon”, add the location for the file (has to be SVG), and then specify a colour to be used. The colour is the background on the Touch Bar icon, and it’s also the colour used in the Pinned Tab mask.

Code:

<link
    rel="mask-icon"
    href="safari-pinned-tab.svg"
    color="#dc7604"
>

As an example, you can see the new touch bar icon I made for Radical Thinker.

If you haven’t already, you can also set an icon for when a user adds your website to their home screen on iOS. This is done similarly, but doesn’t have to be an SVG.

Code:

<link
    rel="apple-touch-icon"
    sizes="180x180"
    href="apple-touch-icon.png"
>