from Hacker News

Broider: Pixel Art CSS Borders

by thesephist on 1/27/23, 11:24 PM with 54 comments

• by gorgoiler on 1/28/23, 4:31 AM

  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

• by felideon on 1/28/23, 4:54 AM

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

• by raldi on 1/28/23, 3:33 AM

  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.

• by hexagonsun on 1/28/23, 2:44 AM

  https://imgur.com/a/fATiS7p

• by pyridines on 1/28/23, 12:39 AM

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

• by poglet on 1/28/23, 6:00 AM

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

• by o_____________o on 1/28/23, 12:55 AM

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

• by ricardonunez on 1/28/23, 2:04 AM

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

• by koromak on 1/28/23, 8:17 PM

  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; }

• by Brajeshwar on 1/28/23, 10:16 AM

  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...

• by onion2k on 1/28/23, 10:20 AM

  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/

• by milchek on 1/28/23, 3:17 AM

  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

• by anongraddebt on 1/28/23, 7:00 AM

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

• by 6510 on 1/28/23, 5:18 AM

  https://jsfiddle.net/h40bv6sr/

  One cant share the creation in the tool.

  Just put the data uri behind the page link.

• by sgd99 on 1/28/23, 10:30 AM

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

• by tambourine_man on 1/28/23, 1:00 AM

  Congratulations on building something so amazing and simple

• by ericmcer on 1/28/23, 12:02 AM

  Really cool, love little design tools like this.

• by dinkleberg on 1/28/23, 3:18 AM

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

• by sp332 on 1/27/23, 11:48 PM

  Nice, but how do I save it?

• by eneloopy on 1/28/23, 4:01 AM

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

• by diego_moita on 1/28/23, 12:56 AM

  Nice. A small problem: the color input doesn't work on Safari.

• by aceazzameen on 1/28/23, 2:07 AM

  This is wonderful!

• by jbverschoor on 1/28/23, 4:02 AM

  This is not how a 9patch works…. It’s currently a 2 patch boring auto rotating and flipping border

• by Eduard on 1/28/23, 1:00 AM

  Yass, it's mulzitouch

• by redmattred on 1/28/23, 3:34 AM

  This is great. Well done.

• by LouDNL on 1/28/23, 9:23 AM

  Absolutely brilliant!

• by brailsafe on 1/28/23, 12:50 AM

  Neat

• by slater- on 1/28/23, 12:22 PM

  this is SO cool