CSS-only reveal/frame comparison generator

Earlier this year, I made an image reveal/frame comparison generator for use with cohost!.

With website set to close at the end of this year, I have updated the tool to output that's easier to use outside of cohost!.

The idea is that you supply two image URLs, tweak a few settings, and get something like this back:

An image of the ct.js mascot, a sort of a blue blob-cat with an innocent smile
The same image, but the cat now has two knives 👀
?
Template by YellowAfterlife.
Dragging might not work with touch!

(if you are on iOS, resize-dragging is not currently supported - tap here for an animated preview)
An image of the ct.js mascot, a sort of a blue blob-cat with an innocent smile

And this works without any JavaScript!

The generator is available online, and in this post I go over how it works and what else it can do.

Continue reading

Changing scroll speed in Firefox using CSS

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla, turpis eget vestibulum vulputate, enim orci tempor enim, vel consectetur ipsum orci sit amet enim. Aliquam nec viverra justo. Pellentesque viverra cursus quam eget maximus. Nullam iaculis mauris leo, et pharetra nisi ultricies in. Mauris varius hendrerit nulla, quis aliquet sapien. Pellentesque eu ultrices nibh. Nunc mollis porta tincidunt. Praesent risus nibh, vestibulum eu gravida et, dignissim eu velit. Mauris quis iaculis mauris.

Nulla facilisi. Suspendisse malesuada tortor sed augue tempor sodales vitae vitae felis. Suspendisse urna nunc, luctus sit amet libero et, vestibulum pellentesque sem. Vivamus mollis felis id nisi ultricies, vitae lacinia est egestas. Pellentesque quis quam non dolor ultricies pulvinar. Nunc sodales diam tristique pharetra vehicula. Fusce consequat eu turpis vitae consequat. Ut aliquet sem felis, vel venenatis mi commodo a. Donec volutpat egestas enim, at vestibulum ligula vestibulum eget. Nunc facilisis ex felis, et fermentum arcu pellentesque sed. In molestie eros nec metus molestie iaculis. Cras eu sem consectetur ex consequat blandit at auctor lacus. In finibus dolor vitae leo dignissim, non egestas dolor consectetur. Vestibulum sit amet sem sit amet nulla dignissim rhoncus sed nec est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla, turpis eget vestibulum vulputate, enim orci tempor enim, vel consectetur ipsum orci sit amet enim. Aliquam nec viverra justo. Pellentesque viverra cursus quam eget maximus. Nullam iaculis mauris leo, et pharetra nisi ultricies in. Mauris varius hendrerit nulla, quis aliquet sapien. Pellentesque eu ultrices nibh. Nunc mollis porta tincidunt. Praesent risus nibh, vestibulum eu gravida et, dignissim eu velit. Mauris quis iaculis mauris.

Nulla facilisi. Suspendisse malesuada tortor sed augue tempor sodales vitae vitae felis. Suspendisse urna nunc, luctus sit amet libero et, vestibulum pellentesque sem. Vivamus mollis felis id nisi ultricies, vitae lacinia est egestas. Pellentesque quis quam non dolor ultricies pulvinar. Nunc sodales diam tristique pharetra vehicula. Fusce consequat eu turpis vitae consequat. Ut aliquet sem felis, vel venenatis mi commodo a. Donec volutpat egestas enim, at vestibulum ligula vestibulum eget. Nunc facilisis ex felis, et fermentum arcu pellentesque sed. In molestie eros nec metus molestie iaculis. Cras eu sem consectetur ex consequat blandit at auctor lacus. In finibus dolor vitae leo dignissim, non egestas dolor consectetur. Vestibulum sit amet sem sit amet nulla dignissim rhoncus sed nec est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

(live demo - compare scrolling speeds in Firefox)

For quite a while now, a thing that bugged me in Firefox was the inconsistent scrolling speeds across the pages. On some it would seem just fine, while on others you could have a list that scrolls at a ridiculously slow pace. My searches on the subject were inconclusive - while, of course, you can regulate the scroll speed via scripting, that definitely wasn't the case on all these pages.

The culprit, as it turns out, was pretty simple - while most of the browsers scroll the elements for an amount of (screen) pixels per key press or mouse wheel change, Firefox scrolls the elements based on the their font size. Which, on one hand, makes sense, but there's a catch - it's based only on the scrolling element's font size. Content' font sizes are ignored.

So that is why you get odd scrolling speeds - people most often set up styles for the actual content (paragraphs\labels\etc.) and not the scroller\container element.

Luckily, this also means that scrolling speeds can be adjusted easily - you change the container font-size to (100*X)%, and then add a rule to change it's child element sizes to (100/X)%:

Continue reading

Userstyle: Green fix for GameMaker Community forums

Userstyle for GameMaker Community forums, fixing theme colours back to loved green ones.

If you've been visiting GameMaker Community lately, you might've noticed that forum software update has switched the light theme to new default IPB blue theme.
That is going to be fixed soon (hopefully!), but until then, there's a small solution if you're not too keen of mixed standard blue-green-pink(?!) palette.

First, ensure that you have a browser plugin to add support for userstyle. Seems that a commonly used one is Stylish, but there are also other options.
Also ensure that forum is set to default (blue) theme.

Then, create a new style in said plugin.
"Applies to domain" field would to be set to "gmc.yoyogames.com", obviously. CSS contents can be downloaded here:

Download CSS

After clicking "Save" and refreshing page, theme will appear green-coloured, more or less mimicking the previously used green theme (except maybe slightly softer, since it's a quick CSS recolour of new standard theme).

Optionally, you can also download a ZIP archive with related files, so you can easily substitute links in CSS and host images wherever loads fastest for you.

Should be good.