TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Broider: Pixel Art CSS Borders

582 pointsby thesephistover 2 years ago

28 comments

gorgoilerover 2 years ago
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 <i>Pattern</i>: <a href="https:&#x2F;&#x2F;swiat-owocow.pl&#x2F;grafiki&#x2F;wallpaper-win30.png" rel="nofollow">https:&#x2F;&#x2F;swiat-owocow.pl&#x2F;grafiki&#x2F;wallpaper-win30.png</a>
评论 #34555635 未加载
评论 #34557061 未加载
felideonover 2 years ago
The creator has an interesting home page, too: <a href="https:&#x2F;&#x2F;maxbittker.com" rel="nofollow">https:&#x2F;&#x2F;maxbittker.com</a>
评论 #34557168 未加载
评论 #34555650 未加载
评论 #34556030 未加载
评论 #34556065 未加载
评论 #34555622 未加载
评论 #34556025 未加载
raldiover 2 years ago
This is delightful fun, but suffers a bit from Mystery Meat Navigation (<a href="https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Mystery_meat_navigation#Iconographic_navigation" rel="nofollow">https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Mystery_meat_navigation#Iconog...</a>)<p>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.
评论 #34554895 未加载
hexagonsunover 2 years ago
<a href="https:&#x2F;&#x2F;imgur.com&#x2F;a&#x2F;fATiS7p" rel="nofollow">https:&#x2F;&#x2F;imgur.com&#x2F;a&#x2F;fATiS7p</a>
评论 #34554798 未加载
pyridinesover 2 years ago
This is awesome! One minor gripe: In Firefox, the borders flash every time they repaint
评论 #34555176 未加载
pogletover 2 years ago
Sea theme: <a href="https:&#x2F;&#x2F;i.imgur.com&#x2F;DZrrXnM.png" rel="nofollow">https:&#x2F;&#x2F;i.imgur.com&#x2F;DZrrXnM.png</a>
o_____________oover 2 years ago
Nice, save the pixel state in the URL so they&#x27;re shareable! ..., Max
ricardonunezover 2 years ago
What a cool little tool, the simplicity is brilliant. For those on mobile, rotate to landscape to see additional options.
评论 #34554628 未加载
koromakover 2 years ago
I&#x27;m so sorry...<p>.broider { border-image: url(&quot;data:image&#x2F;png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAAAXNSR0IArs4c6QAAAjRJREFUeF7tnEFyAyEMBPE38v+3+Rv2Obhqx1MaLIw7VySBmpF2IdncBj9RArdoNIINgIZFANDTgd7HeDg5&#x2F;o29qmw7hQLUkdMbtgB9A5JjcjzQ1Qm68dXmuD3VnV&#x2F;Flz00PeEMxI0PUEEAoAKQKgkUuvi9cFZodUOq&#x2F;tWWsl0PrQKp+gN0qiCAhoEA1OzR1ZKsPhTVhm3XQxUwNa4SBqgiOI0D9NdK3hSIbd79HmovWDjIHpqeUPWwasm6&#x2F;un8ABomCtDTgIbzaQ&#x2F;XrtB2AuEFABSgYQLhcCgUoGEC4XAoFKBhAuFwtkLVbym7j34un3Q+ABW3Xa5AAApQt6iv7T9e8mpClZ5bMipedXx1PrLkVy+gCsj1X50PQM0dURUH0NVA3ZJQO2aut928mv+LQqsB24kUF1DNH6DTBgC0qMjZvR2oyme3HusCc&#x2F;Mrl7w7obJfPQ7QMGGAfjtQ1aRVT6z+rVKY30s4d32uvX1SAuj1x7oAFV8zo1DRM1xArr1U6Oqedlp8gIZ3FKAADRMIh0OhAA0TCIdDoQANEwiH206h7m2QOgqHeclwAJWIPAOAerykNUAlIs9AAl3d09zLh+p9rfJX+FTPBqj5NTRAzes8FBr+nyXHAVUJqXFVkj&#x2F;XQxUwNQ5Q86EA0PBDAaAA&#x2F;U&#x2F;g0y&#x2F;2SoFqnB5KD73WyGqFfL1CVQLV8e6zfHX9s788y6cnVC&#x2F;WVYW7&#x2F;un8ABomCtDTgIbzaQ&#x2F;XrtB2AuEFABSgYQLhcE8DujBkS1iknAAAAABJRU5ErkJggg==&quot;) 28 &#x2F; 28px &#x2F; 0 round; border-width: 28px; border-style: solid; }
Brajeshwarover 2 years ago
Wow! This reminds me of something similar I did and am proud of. I gave the tools to designers&#x2F;developers in companies that we were pitching to help them design &quot;smooth rounded corners&quot; in either CSS or Flash during the early 2000s.<p>I don&#x27;t remember the years but around 2004-2006, smooth rounded corners were still hard to do if you do not know &quot;feathering&quot; in the graphic software and then using it in CSS or as sprites for Flash.<p>I have lost the tool and the code but here is the article I wrote after reading happy emails from developers. <a href="https:&#x2F;&#x2F;brajeshwar.com&#x2F;2005&#x2F;splice9-bitmap-window-resizer-component-01b&#x2F;" rel="nofollow">https:&#x2F;&#x2F;brajeshwar.com&#x2F;2005&#x2F;splice9-bitmap-window-resizer-co...</a>
onion2kover 2 years ago
I used this technique for making Super Mario World style borders for HTML elements a couple of years ago. <a href="https:&#x2F;&#x2F;ooer.com&#x2F;blog&#x2F;2020-09-10-image-border&#x2F;" rel="nofollow">https:&#x2F;&#x2F;ooer.com&#x2F;blog&#x2F;2020-09-10-image-border&#x2F;</a>
milchekover 2 years ago
Very cool, would be great to have a way to share these or to view ones others have made as presets&#x2F;templates. Here is a &#x27;double bevelled&#x27; border: <a href="https:&#x2F;&#x2F;imgur.com&#x2F;wPxvdCZ" rel="nofollow">https:&#x2F;&#x2F;imgur.com&#x2F;wPxvdCZ</a>
评论 #34556289 未加载
anongraddebtover 2 years ago
Really cool! (logged in just to let you know). Put a smile on my face while playing with it.
6510over 2 years ago
<a href="https:&#x2F;&#x2F;jsfiddle.net&#x2F;h40bv6sr&#x2F;" rel="nofollow">https:&#x2F;&#x2F;jsfiddle.net&#x2F;h40bv6sr&#x2F;</a><p>One cant share the creation in the tool.<p>Just put the data uri behind the page link.
sgd99over 2 years ago
I tried: <a href="https:&#x2F;&#x2F;codepen.io&#x2F;shreydan&#x2F;pen&#x2F;ZEjRPwx" rel="nofollow">https:&#x2F;&#x2F;codepen.io&#x2F;shreydan&#x2F;pen&#x2F;ZEjRPwx</a>
tambourine_manover 2 years ago
Congratulations on building something so amazing and simple
ericmcerover 2 years ago
Really cool, love little design tools like this.
dinklebergover 2 years ago
This is fantastic. Always a joy to see these small, single purpose CSS tools.
sp332over 2 years ago
Nice, but how do I save it?
评论 #34553460 未加载
eneloopyover 2 years ago
Pretty cool! Could use a way to clear without needing to manually erase
diego_moitaover 2 years ago
Nice. A small problem: the color input doesn&#x27;t work on Safari.
aceazzameenover 2 years ago
This is wonderful!
jbverschoorover 2 years ago
This is not how a 9patch works…. It’s currently a 2 patch boring auto rotating and flipping border
评论 #34555073 未加载
Eduardover 2 years ago
Yass, it&#x27;s mulzitouch
redmattredover 2 years ago
This is great. Well done.
LouDNLover 2 years ago
Absolutely brilliant!
brailsafeover 2 years ago
Neat
slater-over 2 years ago
this is SO cool