Nya!

@nyabsol

Official Titty Kitty

girl i mean they

meowza!
June/21/Kitty
fuuuuck what do i write here

Nya!@nyabsol7/5/2022, 6:45 PM

absurd creature @jane

Ronja @ronja7/1/2022, 1:24 PM

a piece of space

#css

You must log in to comment.

in reply to @ronja's post:

Curi Lagann @HedgeMom7/1/2022, 3:56 PM

I swear to god I'm gonna figure out how to do this lol (yours looks SO cool!!!)

Lex @Lexfeathers7/1/2022, 4:53 PM

wow, i love seeing how web sites work!

Lotte 'just an idiot' May @LotteMakesStuff7/1/2022, 6:06 PM

messed up!

✨ aria (dub) | zeni(th)@trashcataria7/1/2022, 10:49 PM

whoaaa this is super cool and trippy!

Caro @caro10/2/2022, 11:30 PM

oh hello

signal eleven @widr10/3/2022, 1:36 AM

frick i wanna riff on this but apparently cohost strips css mask-image properties. @jkap halp

hazycora @hazy10/30/2022, 6:18 AM

I tried remaking the effect:

<div style="position: relative;">
<div style="background-image: url(https://www.nasa.gov/sites/default/files/styles/full_width/public/thumbnails/image/stsci-h-p2016a-m-2000x1374.png);  background-size: 100% 100%; background-repeat: no-repeat;background-attachment: fixed;overflow: hidden;height: 400px;width: 400px;"></div>
<div style="background-image: url(https://i.imgur.com/y3UhEIL.png); height: 400px; background-size: 400px; background-repeat: no-repeat; position: absolute; top: 0px; z-index: 1;width: 400px;"></div>
</div>

a wrapper element is used with position relative (cohost adds their own, but it has margins which youd need to account for, and i felt like future-proofing just in case those numbers ever changed in future cohost UI). inside of it, two divs each with a width and height of 400px (could be anything though). each has a background image specified. The first one has background-attachment set to fixed, and the background-size set to 100% 100%. it also has overflow set to hidden, to make the background image not bleed out of the element. The second one has absolute positioning, with top set to 0px, to make the div go to the top of that wrapper element we made with position relative. it has a z-index of 1, so that it appears on top of the first image, rather than behind it. the image has a white background but is transparent in the middle, so you can see through it in the center but it covers the space image on all the edges.

signal eleven @widr10/30/2022, 8:20 AM

yeah i'm aware of how it works, and if i want a different tear with its own rough edges to appear on top of this tear it has to be either masked or square.

hazycora @hazy10/30/2022, 5:45 PM

i really dont see how that could possibly be necessary, given you can always make a png file using the transparency as a mask? i guess im just not understanding what you are trying to do, id like to give whatever it is a try if i just understood :/ hard to explain though, thats fair

signal eleven @widr10/30/2022, 7:39 PM

you can do that but then it can't act as a window onto a fixed background

unarei @noa11/5/2022, 7:13 PM

can't it?

background image, background-attatchment:fixed
foreground png mask using transparent pixels

i'm not sure what you're saying. maybe if you want two different background-attachment:fixed things nearby eachother, yeah that would take some effort and you'd have to hack it a bit

signal eleven @widr11/6/2022, 5:20 AM

if you want to make a tear into an entirely different fixed background image with an irregular shape that nonetheless appears on top of the other, you need to mask the element itself, not just render an image with transparency.

layer 1. all the stuff you see above
layer 2. transparent png image of another tear in the page
layer 3. an element with a fixed background that is masked to the transparent "inside" of the hole, and thus only visible there

unarei @noa11/6/2022, 6:24 AM

i think we agree. some cases can be handled with fancy positioning but for borderless combining of two fixed images, access to css 'mask' is needed

Pinned Tags