7 ms·
Broider: Pixel Art CSS Borders
- sp332 4y agoNice, but how do I save it?
- nicoburns 4y agoCopy 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.
- zeeZ 4y agoNot visible on mobile, had to toggle desktop view to see it.
- citizenkeen 4y agoHold landscape.
- ericmcer 4y agoReally cool, love little design tools like this.
- pyridines 4y agoThis is awesome! One minor gripe: In Firefox, the borders flash every time they repaint
- wodenokoto 4y agocmd+shift+r
- brailsafe 4y agoNeat
- o_____________o 4y agoNice, save the pixel state in the URL so they're shareable! ..., Max
- diego_moita 4y agoNice. A small problem: the color input doesn't work on Safari.
- Eduard 4y agoYass, it's mulzitouch
- tambourine_man 4y agoCongratulations on building something so amazing and simple
- ricardonunez 4y agoWhat a cool little tool, the simplicity is brilliant. For those on mobile, rotate to landscape to see additional options.
- Aeolun 4y agoI don’t see any extra options on iOS? I was hoping for a download button.
- aceazzameen 4y agoThis is wonderful!
- hexagonsun 4y agohttps://imgur.com/a/fATiS7p https://imgur.com/a/fATiS7p
- SCLeo 4y agoThank you, you made me smile. :)
- milchek 4y agoVery 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 https://imgur.com/wPxvdCZ
- MayeulC 4y agoOne of the comments points out that the state is saved in the URL.
- dinkleberg 4y agoThis is fantastic. Always a joy to see these small, single purpose CSS tools.
- raldi 4y agoThis is delightful fun, but suffers a bit from Mystery Meat Navigation (https://en.wikipedia.org/wiki/Mystery_meat_navigation#Iconographic_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 4y agoToggles symmetry. Def not obvious.
- redmattred 4y agoThis is great. Well done.
- jbverschoor 4y agoThis is not how a 9patch works…. It’s currently a 2 patch boring auto rotating and flipping border
- whstl 4y agoYou can have a real 9 patch if you disable symmetry. It's not obvious, but it's the lower-left icon.
- eneloopy 4y agoPretty cool! Could use a way to clear without needing to manually erase
- gorgoiler 4y agoBrilliant… 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 https://swiat-owocow.pl/grafiki/wallpaper-win30.png
- serf 4y agowow , 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.
- chaboud 4y agoIt’s probably a funny artifact of the architecture and the impracticality of image-based background on the hardware of the day that this was made available. PatBlt() was a fast way to fill a given rectangle with a color (or xor it), but it was also a fast way to blit the pattern brush currently selected to the device context (hdc). No doubt the 2D accelerated hardware capability this was made to work with was tied up in being able to quickly scan out to the clip region while selecting the corresponding byte per line. Win GDI was a fascinating hardware centric abstraction.
- Nition 4y agoWindows 95-2000 still had the pattern option as well: https://i.imgur.com/WVePNGj.jpg https://i.imgur.com/WVePNGj.jpg Fun times were had by my young self, though like you I had forgotten all about it until just now. --- Edit: Oh wow, it's secretly still an option, even in Windows 11! Try this: - Get rid of your wallpaper image, set it to Solid Color instead. - Open regedit. - Go to HKEY_CURRENT_USER/Control Panel/Desktop. - Add a new String Value called Pattern. - Set the value of Pattern to the data from one of these: https://i.imgur.com/C2KcZFE.jpg https://i.imgur.com/C2KcZFE.jpg Or presumably a custom one, since the data just seems to be the pixels to colour, but I'm not sure in what format. I just tried it with Tulip though and now I have a desktop tulip pattern!
- felideon 4y agoThe creator has an interesting home page, too: https://maxbittker.com https://maxbittker.com
- slimsag 4y agoWow that is super cool! Damn!
- serf 4y agofeels like it was influenced by Kid Pix / broderbund
- pokpokpok 4y agoseen
- tobyhinloopen 4y agoWow
- Fnoord 4y agoThat (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 4y agojust tell him https://maxbittker.com/mailto https://maxbittker.com/mailto
- est 4y agoThat's cool! It only works with ASCII characters though.
- herunan 4y agoOh and he’s behind https://twitter.com/NYT_first_said https://twitter.com/NYT_first_said. Such a fun Twitter account.
- 6510 4y agohttps://jsfiddle.net/h40bv6sr/ https://jsfiddle.net/h40bv6sr/ One cant share the creation in the tool. Just put the data uri behind the page link.
- poglet 4y agoSea theme: https://i.imgur.com/DZrrXnM.png https://i.imgur.com/DZrrXnM.png
- anongraddebt 4y agoReally cool! (logged in just to let you know). Put a smile on my face while playing with it.
- LouDNL 4y agoAbsolutely brilliant!
- Brajeshwar 4y agoWow! 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-component-01b/ https://brajeshwar.com/2005/splice9-bitmap-window-resizer-co...
- onion2k 4y agoI 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/ https://ooer.com/blog/2020-09-10-image-border/
- sgd99 4y agoI tried: https://codepen.io/shreydan/pen/ZEjRPwx https://codepen.io/shreydan/pen/ZEjRPwx
- slater- 4y agothis is SO cool
- koromak 4y agoI'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; }