glynmoody, to philosophy
@glynmoody@mastodon.social avatar

’s final hours recounted in found in Vesuvius ash - https://www.theguardian.com/books/2024/apr/29/herculaneum-scroll-plato-final-hours-burial-site?CMP=Share_iOSApp_Other there are going to be many more amazing discoveries from these scrolls as they are deciphered...

grickle, to Dogs
@grickle@mstdn.social avatar
iamdtms, to random
@iamdtms@mas.to avatar
pablolarah, to webdev
@pablolarah@mastodon.social avatar
bramus, to random
@bramus@front-end.social avatar

Adding something new to all my iframed content (read: @CodePen demos) from now on: a little snippet to prevent horizontal overscroll.

That way, the parent document doesn’t suggest the “scroll left/right to navigate” gesture when trackpad scrolling the iframe.

simevidas,
@simevidas@mastodon.social avatar

@bramus

> The element from which the value is propagated must then have a used overflow value of visible.

So <html> is always overflow:visible. It’s never a scroll container, not even when you explicitly apply overflow:auto to <html> because it just propagates up, and <html> stays overflow:visible.

But this is all irrelevant because the overscroll spec says that

> the viewport participates in scroll chaining https://drafts.csswg.org/css-overscroll-1/#scroll-chaining-and-boundary-default-actions

so overflow:auto on <html> should not be necessary.

taoish, to histodons

Youssef Nader -- one of the 3 who won the Vesuvius Prize by reading a charred, unopened papyrus scroll from 79 CE -- from his blog breaking it down.

"The ink detection Journey of the Vesuvius Challenge"

https://youssefnader.com/2024/02/06/the-ink-detection-journey-of-the-vesuvius-challenge/

@histodons

christianselig, to random
@christianselig@mastodon.social avatar

Change of pace with an HTML/CSS question! I have a transparent div at the top of the page, position fixed, and text positioned normally underneath it. How do I offset the text so it is never visible under the top bar when scrolling? https://codepen.io/iamthatis/pen/zYbPXpJ

jools912,

@christianselig Wrap the text to be scrolled in <div id="scroll">...</div> and add this to the CSS:

{
position: relative;
top:100px;
overflow: scroll;
height: 100vh;
}

nono2357, to ai
Luke, (edited ) to random
@Luke@typo.social avatar

Attention and , stop making objects fade in on .

When the fails or fails to load, the site is worthless and people bounce.

bramus, to random
@bramus@front-end.social avatar

Casually dropping this here before I start my weekend … 👋

https://www.youtube.com/watch?v=UszGZofQrpw

simevidas, (edited )
@simevidas@mastodon.social avatar

@bramus

> ‘root’
> Specifies to use the document viewport as the scroll container.

https://drafts.csswg.org/scroll-animations-1/#scroll-notation

I don’t get this. How can the viewport, which is a type of scrollport, be a scroll container?

edit: Also, which viewport is meant by “document viewport”?

https://drafts.csswg.org/cssom-view/#visual-viewport

rixx, to random
@rixx@chaos.social avatar

TIL: you can scroll to text fragments directly with links by adding "#:~:text=<url-encoded-text>".

Supporting browsers will jump to the first of the given text blocks, and highlight all of them if you supply multiple. It's supported by Chrome and Safari, but with Firefox aiming to add support at some point. There's also a cool plugin to generate links like that for you.

Via @simon / https://til.simonwillison.net/html/scroll-to-text

rixx,
@rixx@chaos.social avatar

@pradyunsg @simon No idea about historical decision making, but Mozilla's position is currently listed as positive: https://mozilla.github.io/standards-positions/#scroll-to-text-fragment

stephaniewalter, to UX
@stephaniewalter@front-end.social avatar

Scrolljacking 101 (16min): https://www.nngroup.com/articles/scrolljacking-101/
Usability issues with scrolljacking (disorientation, frustration especially on mobile and task oriented sites) and some best practices to implement this in a more usable way

havn, to piracy
@havn@writing.exchange avatar

🧵After a video by , on whether or not is , I got some thoughts. (This isn't a response to the video, but I'll link it anyway.)

BTW., the thread lead to a 👇🏻, that's probably easier to read - with links and images in Technicolor™! (And no ads.😉)

———

To me, more interesting than if it's piracy/illegal is if it's ethical/right. And when evaluating something like that, I like to ask myself:
"Would it be ok if everyone did it?"
(1/10) https://havn.blog/thoughts-on-ad-supported-technology-and-sustainable-social-media

havn,
@havn@writing.exchange avatar

But, I'm not sure I can 100 % defend my use of ad blockers. It's easy to think "I can block ads, since most people don't - so the free stuff is still available". But would it be if everyone did? At the same time, "the ad supported web" is a pretty terrible place, with bad privacy and incentive structures. Greed and exploitation ruined the web, so I should be able to "fix it", right?

I wish , that got bought and closed down by (pre-Elon), would've been a thing...
(3/10)

nhoizey, to CSS French
@nhoizey@mamot.fr avatar

🔗 “Synchronize videos, 3D-models, etc. to Scroll-Driven Animations” by @bramus

⚓️ https://nicolas-hoizey.com/links/2023/06/24/synchronize-videos-3d-models-etc-to-scroll-driven-animations/

atocci, (edited ) to AskKbin in Why is no one decorating their magazines?
atocci avatar

Edit: Added a comment and updated the option bar to match the navbar.
Sure, here you go! I've never done anything like this before so it's probably a formatting disaster, but I've done my best to clean it a bit and add some comments about what does what here. This is what I've come up with after a few hours of just poking around with the inspect element feature and reading some tutorials:

/* Navbar */
{
background: linear-gradient(to top right, rgba(229, 0, 32, .8) , rgba(242, 151, 57, .8));
box-shadow: 0px 4px 10px 1px rgba(0,0,0,0.5);
backdrop-filter: blur(10px);
position: relative; z-index: 4001
}

/* Page background image */
{
background: url(https://toaru-project.com/railgun_t/core_sys/images/main/common/logo_t.svg) no-repeat center center fixed;
background-size: contain;
}

/* Post box transparency */
.section {
opacity: 0.96;
}

/* kbin footer background */
{
background: linear-gradient(to top right, rgba(229, 0, 32, 1) , rgba(242, 151, 57, 1));
}

/* The little arrow button in the bottom right that takes you back to the top of the page */
-top {
background: linear-gradient(to top right, rgba(229, 0, 32, .8) , rgba(242, 151, 57, .8));
box-shadow: 0px 4px 10px 1px rgba(0,0,0,0.5);
backdrop-filter: blur(10px);
}

/* Options bar */
{
background: linear-gradient(to top right, rgba(229, 0, 32, .8) , rgba(242, 151, 57, .8));
box-shadow: 0px 4px 10px 1px rgba(0,0,0,0.25);
backdrop-filter: blur(10px);
position: relative
}

/* upvote color */
.vote .active.vote__up button {
color: rgba(242, 151, 57);
}

/* Media viewer background blur */
.goverlay {
background: rgba(0,0,0,.5);
backdrop-filter: blur(15px);
}

nhoizey, to CSS French
@nhoizey@mamot.fr avatar

🔗 “Synchronize videos, 3D-models, etc. to Scroll-Driven Animations” by @bramus

⚓️ https://nicolas-hoizey.com/links/2023/06/24/synchronize-videos-3d-models-etc-to-scroll-driven-animations/

anatudor, to programming
  • All
  • Subscribed
  • Moderated
  • Favorites
  • JUstTest
  • modclub
  • DreamBathrooms
  • InstantRegret
  • tacticalgear
  • magazineikmin
  • Youngstown
  • thenastyranch
  • mdbf
  • slotface
  • rosin
  • Leos
  • kavyap
  • Durango
  • normalnudes
  • ethstaker
  • everett
  • GTA5RPClips
  • cubers
  • khanakhh
  • ngwrru68w68
  • anitta
  • provamag3
  • cisconetworking
  • tester
  • osvaldo12
  • megavids
  • lostlight
  • All magazines