Border image?

("Help" section for this thing.)

CSS gives you a way of using a single image to define borders for an element. You set how the image should be sliced into a 3x3 grid, by defining a margin from each edge. Printists could think of this as an inverse bleed, maybe? Back in the day we used to do this with <table>s but we have other tools now.

Controls

Hopefully it is somewhat easy to understand the tool? You paste an image. Keep pasting to see a few random margin variants.

In the left pane you can edit the offsets so they align with your image. Click and drag the cyan and magenta shaded areas, those are your handles.

The right pane is meant as a preview. You can resize the textarea there, to get a feel for how the border looks at different sizes of thing to contain.

That textarea is also what you can consider the "output" of this tool. The text it contains should be the css to replicate the effect, if you point it at the right image. Ez!

Also, note the "stretch modes" selectable on top of the right pane. It changes the behavior in an interesting way.

Author's note

A thing about me is i don't wanna do math. It's fun to imagine but i don't really wanna do the work. Anyway so css margin image seems powerful AF but finding what values to put is a bit annoying. Maybe a visual aid could help tho - and so here we are!

This is all in-browser, as in, nothing should leave your computer. There's a lot of capabilities in the browser already, i'm trying to lean on these as much as possible. As a consequence this is all pretty simple stuff, all the code is in the index.html... you should be able to save it to your computer and access it that way. For what nefarious purposes i do not know...

My website sixeyes home page

mhmmm

Commentar

Note: comments are posted manually when i feel like it. This is all static html baby plus i have other things to do also.

😸

WiseKind

I like this website a lot. It's just someone out there, expressing their every random thought in the form of a colorful web experiment. I love it.

However, all of your Javascript is blocked by my extension, called "LibreJS".

I use this extension to protect myself from nonfree javascript, which can include tracking pixels and ads, but it also blocks any scripts that aren't explicitly licensed as free software. You can read more about why this is important here: The Javascript Trap editors note: by Stallman ⭐

Yes, Javascript counts as coyprightable software that can be distributed under a license, just like any other software. Even from within the browser sandbox, running nonfree software can lead to many of the same social injustices you hear about with nonfree programs, like Chrome tracking your browsing activity, or DRM software locking you out of stuff you paid for "for safety", or some other nonsense they hide in the TOS.

I read your Javascript code, and it looks like you don't really care about hiding what your website really does, or tracking users. You just wanted to make someting cool. That's why I ask that you take one more step to set your Javascript free by following the instructions mentioned above so that your scripts will not be blocked by LibreJS, so everyone can benefit from your creative work, and to help resolve the popular misconception that protecting your technological freedom doesn't apply to code that runs inside a web page.

Thank you.

Sixeyes [editor]

Hey! First of all, thank you for finding your way all the way out here! Also, your message was very interesting, and something that occupied my mind for quite a while.

Well. If i may be bold, think we share the same values! For the same reasons you mentioned, i've strived to never make any cross-domain requests from any of my web content. There should be zero cookies, or external frames, javascript, et cetera. For a long while, i refused doing javascript too.

These days it's very easy for people to betray one another without knowing. My friends link google fonts. My government embeds youtube videos. Frankly, i don't know what to do about it, but at least i want to lead by example.

Anyway. For the average user, i don't think a license is a good heuristic for what will hurt you or not. Something like an ad blocker would be better, or whatever's a decent firewall for the browser: block ads, block third party fuckery...

Then, think about the kind of web presence i have here, i feel its more of a, duct tape and spray paint kinda situation. The "small web" that i love, it's mostly a bunch of strange animals hanging out, in the shadows of the giants who own the infrastructure. We don't have time for licenses, not really...!

(In that spirit, i implore you or anyone to just copy whatever they can from wherever they can. If my sources is visible is because i want them to be. There is nothing but the commons.)

Anyway! I tried adding it to this thing. But i don't know if i will bother going forward. Maybe if i remember it...