[HN Gopher] Broider: Pixel Art CSS Borders
___________________________________________________________________
Broider: Pixel Art CSS Borders
Author : thesephist
Score : 515 points
Date : 2023-01-27 23:24 UTC (23 hours ago)
(HTM) web link (maxbittker.github.io)
(TXT) w3m dump (maxbittker.github.io)
| aceazzameen wrote:
| This is wonderful!
| gorgoiler wrote:
| 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
| brianberlin wrote:
| My family had a Macintosh when I was a kid and it had a similar
| feature in MacPaint called brush mirrors.
| serf wrote:
| 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.
| Nition wrote:
| Windows 95-2000 still had the pattern option as well:
| 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
|
| 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!
| gorgoiler wrote:
| Thank you for posting this. I spent a long time hating on
| "M$" back in the day when they were embracing and extending
| everything, including the web. As the years go by though, I
| have built only an ever increasing respect for how Windows
| manages to retain backwards comparability with the
| Neolithic ages. ...and now, this. Incredible.
|
| The numbers themselves look to be eight bytes of eight
| bits. The 50% gray gives it away: >>>
| 0b01010101 85 >>> 0b10101010 170
|
| What happens if you put more than 8 bytes in there? Or a
| negative number? What about " aU aU aU aU", the bytes for
| the grayscale? Give it a poke!
| Nition wrote:
| Makes sense; the pattern is 8x8 pixels, each number
| representing one row.
| chaboud wrote:
| It'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.
| brailsafe wrote:
| Neat
| sp332 wrote:
| Nice, but how do I save it?
| nicoburns wrote:
| 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.
| zeeZ wrote:
| Not visible on mobile, had to toggle desktop view to see it.
| citizenkeen wrote:
| Hold landscape.
| o_____________o wrote:
| Nice, save the pixel state in the URL so they're shareable! ...,
| Max
| diego_moita wrote:
| Nice. A small problem: the color input doesn't work on Safari.
| slater- wrote:
| this is SO cool
| koromak wrote:
| I'm so sorry...
|
| .broider { border-image: url("data:image/png;base64,iVBORw0KGgoAA
| AANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAAAXNSR0IArs4c6QAAAjRJREFUeF7tnE
| FyAyEMBPE38v+3+Rv2Obhqx1MaLIw7VySBmpF2IdncBj9RArdoNIINgIZFANDTgd7
| HeDg5/o29qmw7hQLUkdMbtgB9A5JjcjzQ1Qm68dXmuD3VnV/Flz00PeEMxI0PUEEA
| oAKQKgkUuvi9cFZodUOq/tWWsl0PrQKp+gN0qiCAhoEA1OzR1ZKsPhTVhm3XQxUwN
| a4SBqgiOI0D9NdK3hSIbd79HmovWDjIHpqeUPWwasm6/un8ABomCtDTgIbzaQ/Xrt
| B2AuEFABSgYQLhcCgUoGEC4XAoFKBhAuFwtkLVbym7j34un3Q+ABW3Xa5AAApQt6i
| v7T9e8mpClZ5bMipedXx1PrLkVy+gCsj1X50PQM0dURUH0NVA3ZJQO2aut928mv+L
| QqsB24kUF1DNH6DTBgC0qMjZvR2oyme3HusCc/Mrl7w7obJfPQ7QMGGAfjtQ1aRVT
| 6z+rVKY30s4d32uvX1SAuj1x7oAFV8zo1DRM1xArr1U6Oqedlp8gIZ3FKAADRMIh0
| OhAA0TCIdDoQANEwiH206h7m2QOgqHeclwAJWIPAOAerykNUAlIs9AAl3d09zLh+p
| 9rfJX+FTPBqj5NTRAzes8FBr+nyXHAVUJqXFVkj/XQxUwNQ5Q86EA0PBDAaAA/U/g
| 0y/2SoFqnB5KD73WyGqFfL1CVQLV8e6zfHX9s788y6cnVC/WVYW7/un8ABomCtDTg
| IbzaQ/XrtB2AuEFABSgYQLhcE8DujBkS1iknAAAAABJRU5ErkJggg==") 28 /
| 28px / 0 round; border-width: 28px; border-style: solid; }
| Eduard wrote:
| Yass, it's mulzitouch
| tambourine_man wrote:
| Congratulations on building something so amazing and simple
| Brajeshwar wrote:
| 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...
| eneloopy wrote:
| Pretty cool! Could use a way to clear without needing to manually
| erase
| jbverschoor wrote:
| This is not how a 9patch works.... It's currently a 2 patch
| boring auto rotating and flipping border
| whstl wrote:
| You can have a real 9 patch if you disable symmetry. It's not
| obvious, but it's the lower-left icon.
| onion2k wrote:
| 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/
| felideon wrote:
| The creator has an interesting home page, too:
| https://maxbittker.com
| serf wrote:
| feels like it was influenced by Kid Pix / broderbund
| pokpokpok wrote:
| seen
| tobyhinloopen wrote:
| Wow
| Fnoord wrote:
| 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 wrote:
| just tell him https://maxbittker.com/mailto
| est wrote:
| That's cool!
|
| It only works with ASCII characters though.
| slimsag wrote:
| Wow that is super cool! Damn!
| herunan wrote:
| Oh and he's behind https://twitter.com/NYT_first_said. Such a
| fun Twitter account.
| skerit wrote:
| Seems like it died the day Elon turned off all API support.
| ericmcer wrote:
| Really cool, love little design tools like this.
| milchek wrote:
| 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 wrote:
| One of the comments points out that the state is saved in the
| URL.
| sgd99 wrote:
| I tried: https://codepen.io/shreydan/pen/ZEjRPwx
| dinkleberg wrote:
| This is fantastic. Always a joy to see these small, single
| purpose CSS tools.
| anongraddebt wrote:
| Really cool! (logged in just to let you know). Put a smile on my
| face while playing with it.
| pyridines wrote:
| This is awesome! One minor gripe: In Firefox, the borders flash
| every time they repaint
| wodenokoto wrote:
| cmd+shift+r
| LouDNL wrote:
| Absolutely brilliant!
| poglet wrote:
| Sea theme: https://i.imgur.com/DZrrXnM.png
| hexagonsun wrote:
| https://imgur.com/a/fATiS7p
| SCLeo wrote:
| Thank you, you made me smile. :)
| ricardonunez wrote:
| What a cool little tool, the simplicity is brilliant. For those
| on mobile, rotate to landscape to see additional options.
| Aeolun wrote:
| I don't see any extra options on iOS? I was hoping for a
| download button.
| raldi wrote:
| 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 wrote:
| Toggles symmetry. Def not obvious.
| theelous3 wrote:
| [flagged]
| raldi wrote:
| I just tried it for the first time on a laptop; there, when
| squares light up in the symmetric cells as you mouse over a
| target, it's a bit more intuitive. On mobile, it's a lot
| harder to figure out.
| 6510 wrote:
| https://jsfiddle.net/h40bv6sr/
|
| One cant share the creation in the tool.
|
| Just put the data uri behind the page link.
| redmattred wrote:
| This is great. Well done.
___________________________________________________________________
(page generated 2023-01-28 23:01 UTC)