? Editing: Post:21.body Save Delete Cancel
Content changed Sign & Publish new content

BinChan's ZeroNotes

Messy Notes about using ZeroNet and other things
All code published here are under CC-BY-SA licence, if not compatible, then MIT license X)

Follow in NewsfeedFollowing

TOC by date
TOC by tag
View in light theme

Latest comments:

Add new post

Title

21 hours ago · 2 min read ·
3 comments

tag:
Body
Read more

Not found

Added A Base64 Background Image

on Apr 22, 2018 · 1 min read
tag: css

Yet some css magic, copied from a Github Dark Theme:

body {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAgMAAAANjH3HAAAACVBMVEUaGhohISElJSUh9lebAAAB20lEQVRIx4XWuZXDMAwE0C0SAQtggIIYoAAEU+aKOHhYojTrYP2+QfOW/5QIJOih/q8HwF/pb3EX+UPIveYcQGgEHiu9hI+ihEc5Jz5KBIlRRRaJ1JtoSAl5Hw96hLB1/up1tnIXOck5jZQy+3iU2hAOKSH1JvwxHsp+5TLF5MOl1/MQXsVs1miXc+KDbYydyMeUgpPQreZ7fWidbNhkXNJSeAhc6qHmHD8AYovunYyEACWEbyIhNeB9fRrH3hFi0bGPLuEW7xCNaohw1vAlS805nfsrTspclB/hVdoqusg53eH7FWot+wjYpOViX8KbFFKTwlnzvj65P9H/vD0/hibYBGhPwlPO8TmxRsaxsNnrUmUXpNhirlJMPr6Hqq9k5Xn/8iYQHYIuQsWFC6Z87IOxLxHphSY4SpuiU87xJnJr5axfeRd+lnMExXpEWPpuZ1v7qZdNBOjiHzDREHX5fs5Zz9p6X0vVKbKKchlSl5rv+3p//FJ/PYvoKryI8vs+2G9lzRmnEKkh+BU8yDk515jDj/HAswu7CCz6U/Mxb/PnC9N41ndpU4hUU7JGk/C9PmP/M2xZYdvBW2PObyf1IUiIzoHmHW9yTncliYs9A9tVNppdShfgQaTLMf+j3X723tLeHgAAAABJRU5ErkJggg==);
background-clip: border-box;
background-origin: padding-box;
background-attachment: scroll;
background-repeat: repeat;
background-size: auto;
background-position: left top;
}

Now my messy ZeroNotes looks a bit less boring, if you agree X)

Type 2:


  body {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAQAAACR313BAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAADukAAA7pAQ4zQhwAAAAHdElNRQfiBBcUDReCRCnpAAABE0lEQVQY0z3PyUojAQCE4a+71ZZJYjxkwAViXImI2yjCgIgIiqAv5LsJKh68KBjwJK4IE9IeJDpq1BjmME3Xqag61F+BbS2n/vqvOV9udOlSVvYaCI2ruHWFn5blJRhSd+YlAD/MGdL06U5DR9uEnBoh6PiWFzv24FMbiUEhEcqWJI4M+PICcmYN6tEIrIqca6Jk3oGOMZOu3VlUCFRd6qTcv9Ct23n6ZDFUzMqC2JZ+J9nNWmTDh5IBVWWJQ7Ep715BEOnXRmzYvoaWujfTSt5VzMu0ppj5yLY9K/rCLIpVU5f325N9Lc9RCrWirVfRo4oF9y4kZjwFQmNGXboXWTLij1pKXjHKpnW5bHNXIZsL7fwDj5lMfozT7uoAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTgtMDQtMjNUMTI6MTM6MjMrMDg6MDC2NVXpAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE4LTA0LTIzVDEyOjEzOjIzKzA4OjAwx2jtVQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAAASUVORK5CYII=);
  }
  body, body.loaded .right, .comment {
    background-color: #2c2c2c !important;
  }

body is the whole page, .right and .comment is the right panel. Find sth weird :3 They are set with the same color~ aka Optical Illusion

15 Comments:

user_name1 day ago
Reply
Body
caryosceluson May 08, 2018
Reply

binchan2: Hmm, imo ZeroBlog has only two panels, so "right panel" == "content panel" when I was saying "s/he may feel the left panel is in different color, even every small cell in left panel looks a bit darker that the right panel bg color~".

Hmm, not sure if it looks darker for me. More like it feels like having a slightly different hue, i guess.

binchan2on May 04, 2018
Reply

caryoscelus: > Content panel.
...
Interesting, i have the opposite impression that the panel on the right is a bit darker than the left (and of course both are darker than the center, but that's not an "illusion" per se).

Hmm, imo ZeroBlog has only two panels, so "right panel" == "content panel" when I was saying "s/he may feel the left panel is in different color, even every small cell in left panel looks a bit darker that the right panel bg color~".

But the optical illusion is not very obvious, I agree that the color difference is more related to color mixing, compare to the image in the wiki page

caryosceluson May 01, 2018
Reply

binchan2:
About the center, do you mean the panel of content, or the border?

Content panel.

Afterimage

Heh, the video there is kinda "hilarious".

Anyway, it's bad for eyes to watch the LED screen for too long time ;)

Yeah, i'm always wondering at how can people work on their overly-bright screens. Although i myself spend way too much time staring at screen. Adopting some kind of sound interface might be a good idea. E-ink also sounds good, but last time i checked (few years ago, heh) it could usually be found in devices with severe hardware or software limitations.

binchan2on Apr 29, 2018
Reply

caryoscelus:

Thanks for the experiement and detailed explanation!

... and of course both are darker than the center

About the center, do you mean the panel of content, or the border?

At the end of the day my hypothesis would be that my screen has some kind of "horizontal lines" (might even be due to the humdrum fact that i view bottom of the screen at the different angle than the top) that are mostly invisible when observing solid colour with trained eye and aren't really visible even on non-solid images until i start scrolling or looking very careful (and since looking careful applies to a small portion of the screen, it misses the overall effect).

Some effects may have something to do with LED display, as on the screen the color is actually mixed and pixels are not square (exception: red sub-pixel of AMOLED is almost a square). Also it may be related to Afterimage. Anyway, it's bad for eyes to watch the LED screen for too long time ;) therefore I created dark theme, and prefer using Eink products.

Then, if my brain considers it feasible that the distortions are due to the pattern scrolling, it blames that, and if it can't (either because there's no content or no pattern to scroll), it has to accept the failing of the display/view angle/etc.

XD, yep, what we see is also quite subjective.

caryosceluson Apr 28, 2018
Reply

Sorry for the late reply. I finally got to carefully inspecting the pattern on zoom and without. It actually betrayed some of my expectations..

Yep, even a reader don't scroll the screen, s/he may feel the left panel is in different color, even every small cell in left panel looks a bit darker that the right panel bg color~

Interesting, i have the opposite impression that the panel on the right is a bit darker than the left (and of course both are darker than the center, but that's not an "illusion" per se).

So from you computer the lines look rough? Do you use a 4K screen? The ppi of a screen may be the cause.. I only have a 1920x1080 monitor and the lines look fine for me.

Well, if it's a monitor problem, it's my matte (non-glossy) 1366x768 screen that's to blame i guess ;)


Anyhow, what i noticed on zooming in closely is that the pattern repetition size is in fact quite small (it can be seen easily by applying flood fill on the center panel of site screenshot..). Then i removed all the text from the page and tried scrolling so that i won't see anything but (possibly) background pattern change and.. it didn't really change!

In the end, no matter how hard i tried, i couldn't notice any significant difference on the vertical "separator" line when there were no other content to scroll with it. But as soon as i was allowing the content back, the perceived "roughness" was reliably getting back (even though i have to stress it that it is not something easily noticed).

At the end of the day my hypothesis would be that my screen has some kind of "horizontal lines" (might even be due to the humdrum fact that i view bottom of the screen at the different angle than the top) that are mostly invisible when observing solid colour with trained eye and aren't really visible even on non-solid images until i start scrolling or looking very careful (and since looking careful applies to a small portion of the screen, it misses the overall effect). Then, if my brain considers it feasible that the distortions are due to the pattern scrolling, it blames that, and if it can't (either because there's no content or no pattern to scroll), it has to accept the failing of the display/view angle/etc.

binchan2on Apr 24, 2018
Reply

caryoscelus: Interesting. Well, it's the basis of color mixing in action ;) Or did you mean that the rightest (not the middle one with text content) panel looks like it has different color?

Yep, even a reader don't scroll the screen, s/he may feel the left panel is in different color, even every small cell in left panel looks a bit darker that the right panel bg color~

Current pentagon tiling still has a bit of that "rough lines" effect, due to moire pattern effect (about the same reason why fonts are usually antialiased) ...

So from you computer the lines look rough? Do you use a 4K screen? The ppi of a screen may be the cause.. I only have a 1920x1080 monitor and the lines look fine for me.

Although i'm not sure common screen update delay would be small enough for complete melting.

Yep, that's also possible, from my side I didn't see sth weird like moire pattern effect though.

PS: woah, i'm already running out of 10K for comments here :D

Increased ;D

caryosceluson Apr 23, 2018
Reply

binchan2: Hey! I've created my own base64 image, using a perfect single pentagon tiling pattern and transparent background, and it has optical illusion effect as the background color is mono but left panel and right panel look like in different color! How is it for you? :D

Interesting. Well, it's the basis of color mixing in action ;) Or did you mean that the rightest (not the middle one with text content) panel looks like it has different color?

Current pentagon tiling still has a bit of that "rough lines" effect, due to moire pattern effect (about the same reason why fonts are usually antialiased). I'm not sure it's actually completely fixable in a way that wouldn't break on some setups, though.

"uncanny valley" is a pretty interesting effect, but I guess it's more about humanoid vs human, AI vs human intelligence, and can't fit the situation you're viewing my previous UI design. Tone as comparison (analogy) doesn't fit this situation, too, imo. As sound and image are totally two different things.

Well, "uncanny valley" is perhaps a too specific term. Sadly i can't recall any more generic term that would encompass all kinds of perception. Perhaps i should make a more detailed article about it to explain how such a stretched comparison can make sense..

For me fast scrolling is ok, because it's square and the color between different pixel is very similar. I think the effect should be similar to rotating fan, the color will mix together and looks the same, but it may differ between individuals.

Fan effect would work with appropriate speed if scrolling would have the same step as rectangle size, i guess. Although i'm not sure common screen update delay would be small enough for complete melting.

PS: woah, i'm already running out of 10K for comments here :D

binchan2on Apr 23, 2018
Reply

caryoscelus:

Hey! I've created my own base64 image, using a perfect single pentagon tiling pattern and transparent background, and it has optical illusion effect as the background color is mono but left panel and right panel look like in different color! How is it for you? :D

That might be the reason why it makes me frown on it. There is a common principle that it might be unnerving when two things are extremely similar, but still different. No idea how it's called in design, but in visual art it is sometimes referred to as "uncanny valley". It's also the reason why very close tones can be unpleasant. And there's a similar principle in evolution, i think, even though there's no perceiving agent.

"uncanny valley" is a pretty interesting effect, but I guess it's more about humanoid vs human, AI vs human intelligence, and can't fit the situation you're viewing my previous UI design. Tone as comparison (analogy) doesn't fit this situation, too, imo. As sound and image are totally two different things.

But I agree that it doens't look very comfortable, especially when looking at it carefully, but from a longer distance it looks fine ;)

Irregular pattern is ok as long as it's not too prominent. When i perceive it as 2D pattern, it's ok. Maybe just a bit too noticeable on fast scrolling. But when i perceive a line of it as an isolated 1D pattern, it is somewhat (degree depends on which pattern line happens to be neighbouring) unpleasant. If textual description is not good enough, i can make simplistic illustration tomorrow.

For me fast scrolling is ok, because it's square and the color between different pixel is very similar. I think the effect should be similar to rotating fan, the color will mix together and looks the same, but it may differ between individuals.

caryosceluson Apr 23, 2018
Reply

binchan2: I forgot to change the background of comment region to a contiguous color, now the border between the solid color and bg image is almost indistinguible :3

That might be the reason why it makes me frown on it. There is a common principle that it might be unnerving when two things are extremely similar, but still different. No idea how it's called in design, but in visual art it is sometimes referred to as "uncanny valley". It's also the reason why very close tones can be unpleasant. And there's a similar principle in evolution, i think, even though there's no perceiving agent.

Hmm, maybe removing the border between pseudo-pixels will be better, will try it later because it needs to change the base64 code. For me irregular pattern is ok, imo that's why it looks interesting

Irregular pattern is ok as long as it's not too prominent. When i perceive it as 2D pattern, it's ok. Maybe just a bit too noticeable on fast scrolling. But when i perceive a line of it as an isolated 1D pattern, it is somewhat (degree depends on which pattern line happens to be neighbouring) unpleasant. If textual description is not good enough, i can make simplistic illustration tomorrow.

binchan2on Apr 23, 2018
Reply

caryoscelus: the border between solid color and bg image can look a bit annoying depending on resolution & screen width.

I forgot to change the background of comment region to a contiguous color, now the border between the solid color and bg image is almost indistinguible :3

The neighbouring line of pseudo-pixels is perceived as a border and its irregular pattern makes it look messy.

Hmm, maybe removing the border between pseudo-pixels will be better, will try it later because it needs to change the base64 code. For me irregular pattern is ok, imo that's why it looks interesting

caryosceluson Apr 22, 2018
Reply

binchan2:
Thx for your opinion! Likely a background image won't help reader focus on the content, too, I change the background of right panel to a simple color. Does it look better esp. for large screen now?

Yeah. However, i think i liked the middle version better (it looked especially cool with the menu fade feature). Although i'm getting used to the latest one as well.

Minor nitpick: the border between solid color and bg image can look a bit annoying depending on resolution & screen width. The neighbouring line of pseudo-pixels is perceived as a border and its irregular pattern makes it look messy.

binchan2on Apr 22, 2018
Reply

caryoscelus: That's why i generally don't trust web sites and copy-paste from text editor for any considerable text input ;)

And long time ago I created an issue: Lose article content when trying to edit two articles at the same time #46 on ZeroBlog Github repo, it's probably kind of cache overflow. And it's still marked as enhancement ;_;

binchan2on Apr 22, 2018
Reply

caryoscelus: That's why i generally don't trust web sites and copy-paste from text editor for any considerable text input ;)

Yeah.. Actually I already have a ZeroBlog tmp folder in my system. When writing long article, I use that method ;)

Well, the design certainly looks more interesting, but i'm not sure it's overally better. Even ignoring the unmatching chatbox, it looks as if it misses something now. Perhaps non-solid background implies some kind of borders? Although i suppose it might look just fine on small screens.

Thx for your opinion! Likely a background image won't help reader focus on the content, too, I change the background of right panel to a simple color. Does it look better esp. for large screen now?

caryosceluson Apr 22, 2018
Reply

binchan2: Oops.. Looks like there is a bug in ZeroBlog that will secretly auto-sign the blog and publish it..

That's why i generally don't trust web sites and copy-paste from text editor for any considerable text input ;)

Now my messy ZeroNotes looks a bit less boring, if you agree X)

Well, the design certainly looks more interesting, but i'm not sure it's overally better. Even ignoring the unmatching chatbox, it looks as if it misses something now. Perhaps non-solid background implies some kind of borders? Although i suppose it might look just fine on small screens.

binchan2on Apr 22, 2018
Reply

caryoscelus: Blog comment body

Oops.. Looks like there is a bug in ZeroBlog that will secretly auto-sign the blog and publish it..

Select user
  • Welcome to ZeroMessage!
This page is a snapshot of ZeroNet. Start your own ZeroNet for complete experience. Learn More