Broider: Pixel Art CSS Borders

[gorgoiler]

Brilliant… and nostalgic. Windows 3’s control panel had a facility to draw tiled pixel patterns which was a simpler version of this. It was called the Pattern: https://swiat-owocow.pl/grafiki/wallpaper-win30.png

[serf]

wow , I had forgotten all about that -- when I saw the sub window I was hit with some serious nostalgia.

3.x had some interesting priorities with regards to what a user may want to do, you don't realize (remember..) that in some ways the users of the past were more empowered than they are now until something like that is thrown in front of you to remember.

[brianberlin]

My family had a Macintosh when I was a kid and it had a similar feature in MacPaint called brush mirrors.

[felideon]

The creator has an interesting home page, too: https://maxbittker.com

[herunan]

Oh and he’s behind https://twitter.com/NYT_first_said. Such a fun Twitter account.

[serf]

feels like it was influenced by Kid Pix / broderbund

[Fnoord]

That (the borders, when slide is not entirely to left) makes me think of Qi charging / induction.

Also I love it how you can remove parts you saw or aren't interested in. Fekt like a Google Keep kind of note taking.

[hathym]

just tell him https://maxbittker.com/mailto

[slimsag]

Wow that is super cool! Damn!

[tobyhinloopen]

Wow

[raldi]

This is delightful fun, but suffers a bit from Mystery Meat Navigation (https://en.wikipedia.org/wiki/Mystery_meat_navigation#Iconog...)

The pencil and eraser I get, and I thought one of the controls was Undo, but that one seems to be a toggle? And I have no idea what the last one is.

[jagged-chisel]

Toggles symmetry. Def not obvious.

[hexagonsun]

https://imgur.com/a/fATiS7p

[SCLeo]

Thank you, you made me smile. :)

[pyridines]

This is awesome! One minor gripe: In Firefox, the borders flash every time they repaint

[wodenokoto]

cmd+shift+r

[poglet]

Sea theme: https://i.imgur.com/DZrrXnM.png

[o_____________o]

Nice, save the pixel state in the URL so they're shareable! ..., Max

[ricardonunez]

What a cool little tool, the simplicity is brilliant. For those on mobile, rotate to landscape to see additional options.

[Aeolun]

I don’t see any extra options on iOS? I was hoping for a download button.

[koromak]

I'm so sorry...

.broider { border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAAAXNSR0IArs4c6QAAAjRJREFUeF7tnEFyAyEMBPE38v+3+Rv2Obhqx1MaLIw7VySBmpF2IdncBj9RArdoNIINgIZFANDTgd7HeDg5/o29qmw7hQLUkdMbtgB9A5JjcjzQ1Qm68dXmuD3VnV/Flz00PeEMxI0PUEEAoAKQKgkUuvi9cFZodUOq/tWWsl0PrQKp+gN0qiCAhoEA1OzR1ZKsPhTVhm3XQxUwNa4SBqgiOI0D9NdK3hSIbd79HmovWDjIHpqeUPWwasm6/un8ABomCtDTgIbzaQ/XrtB2AuEFABSgYQLhcCgUoGEC4XAoFKBhAuFwtkLVbym7j34un3Q+ABW3Xa5AAApQt6iv7T9e8mpClZ5bMipedXx1PrLkVy+gCsj1X50PQM0dURUH0NVA3ZJQO2aut928mv+LQqsB24kUF1DNH6DTBgC0qMjZvR2oyme3HusCc/Mrl7w7obJfPQ7QMGGAfjtQ1aRVT6z+rVKY30s4d32uvX1SAuj1x7oAFV8zo1DRM1xArr1U6Oqedlp8gIZ3FKAADRMIh0OhAA0TCIdDoQANEwiH206h7m2QOgqHeclwAJWIPAOAerykNUAlIs9AAl3d09zLh+p9rfJX+FTPBqj5NTRAzes8FBr+nyXHAVUJqXFVkj/XQxUwNQ5Q86EA0PBDAaAA/U/g0y/2SoFqnB5KD73WyGqFfL1CVQLV8e6zfHX9s788y6cnVC/WVYW7/un8ABomCtDTgIbzaQ/XrtB2AuEFABSgYQLhcE8DujBkS1iknAAAAABJRU5ErkJggg==") 28 / 28px / 0 round; border-width: 28px; border-style: solid; }

[Brajeshwar]

Wow! This reminds me of something similar I did and am proud of. I gave the tools to designers/developers in companies that we were pitching to help them design "smooth rounded corners" in either CSS or Flash during the early 2000s.

I don't remember the years but around 2004-2006, smooth rounded corners were still hard to do if you do not know "feathering" in the graphic software and then using it in CSS or as sprites for Flash.

I have lost the tool and the code but here is the article I wrote after reading happy emails from developers. https://brajeshwar.com/2005/splice9-bitmap-window-resizer-co...

[onion2k]

I used this technique for making Super Mario World style borders for HTML elements a couple of years ago. https://ooer.com/blog/2020-09-10-image-border/

[milchek]

Very cool, would be great to have a way to share these or to view ones others have made as presets/templates. Here is a 'double bevelled' border: https://imgur.com/wPxvdCZ

[MayeulC]

One of the comments points out that the state is saved in the URL.

[anongraddebt]

Really cool! (logged in just to let you know). Put a smile on my face while playing with it.

[6510]

https://jsfiddle.net/h40bv6sr/

One cant share the creation in the tool.

Just put the data uri behind the page link.

[sgd99]

I tried: https://codepen.io/shreydan/pen/ZEjRPwx

[tambourine_man]

Congratulations on building something so amazing and simple

[ericmcer]

Really cool, love little design tools like this.

[dinkleberg]

This is fantastic. Always a joy to see these small, single purpose CSS tools.

[sp332]

Nice, but how do I save it?

[nicoburns]

Copy the CSS in the second text box. It's generating a PNG border-image and encoding it as a base64 dat url so that it can be embedded directly in the CSS.

[eneloopy]

Pretty cool! Could use a way to clear without needing to manually erase