!rant

Soo, I made a very hacky thing with CSS

Nice! ++

cool looking thing!

Changed color and highlighted in inspector

Source please?

I just realized that the color changing thingy does not need to be rotated ¯\_(ツ)_/¯

That looks sexy!

@HampusMa https://gist.github.com/D3add3d/...

Thanks

You earned a subscription, m8!

Interesting

@HampusMa well thank you good sir :)

Nice

Very nice! One of our clients requested something like this last year, and we pushed back as hard as we could because it wasn't really supportable with their site setup at the time, and it was bound to break at some point. But alas, they pushed hard enough and got the right people involved, so we did it. I'm sure they've requested to have it removed since then, because this particular client can't make up their damn mind on what they want 😂

@ElbowDeepInElmo well, this is supposed to be a website of my no longer existing company that I might or might not re-establish in Czech Republic (I'm living in Slovakia currently) and I did this in like 10 minutes (including some searching for workarounds for some CSS weirdnesses)

also yay for grid

@AlexDeLarge true but this is what I came up with after 10 minutes of tinkering :D

I've experimented with that moving gradient quite a lot. It does look cool, especially when you combine it with a background clip property for text. (preview: http://invoicer.centario.cz/). But it's very cpu heavy even when used on small elements, so when possible it's better to make an inner div that's overflow is hidden, has like 200% width and height and use the transform translate3d so that it uses gpu with better fps.

@Alkotronikk nice but only works in Chrome, right?

@Alkotronikk k čomu to slúži ten formulár? :D

Chrome, Safari, Firefox, Edge... basically anything but IE, where the text should get a fallback color.

@D3add3d ke zpracování csv dat z programu co používáme k fakturaci.

@Alkotronikk I thought it had to use webkit prefix 🤔 unless we are talking about different ways of achieving that or it got implemented in all major browsers in the meantime

@Alkotronikk *checking MDN* yup, got implemented, okay then 😃

Apply rule of thirds to the text and it'll look even better.

Have you used hsv/hsl? If not, they are easier for gradients 😊

@c3ypt1c which text? I wasn't really paying much attention to any text on the page when I was creating the effect, it's there as a filler

@iamgio naah, I used a tool I found online to make the gradient, my main focus was on the scroll-over effect

edit: waht I meant by that: no, just simple hex colors

@D3add3d isn't hsv easier here? Just increment hsv value on scroll up and decrement on scroll down
Edit: up to you, just trying to help

@D3add3d basically, squish the text so it looks more like as if it was on a piece of paper.

@c3ypt1c oh so you are talking about the lorem ipsum, yea, that has no css applied to it, I just put it there so there was something else than a blank page, that's not going to be there

@iamgio um... the gradient is static - the colors are not changing but the whole background is moving, not my code, I used an online tool for that, as I said earlier the main thing here is the scrolling over another element effect

Good job for CSS.
Official warning for Win10.

@Noob dual-boot elementary OS, I use Win 10 mainly for gaming and I have disabled all sneaky telemetry collecting parts of Windows 😉

Im not sure if its the gif or my colorblindness, but I just see the page being scrolled...

@Codex404 that's the point, it's scrolling on top of another element with a fancy blade effect

@D3add3d Try Win7 for gaming, for me it works much better.

@Noob I was using Win 7 for 5 years but my SSD died and Win 10 supports DX11 and DX12 so ¯\_(ツ)_/¯ It is everyone's free choice to use whatever OS they want ;)

@D3add3d nothing special about that I think? I did it multiple times with images.

The biggest problem I have had was two images next to each other with one angled side like this:
|------/ /|
| / / |
| / / |
| / / |
|/ /------|

Rainboooow XD

(the page will look like this in the end but without randomized color bars)

@D3add3d May I add that the text on the header could be better in terms of readability if it were darker and maybe a bit bold?

@BlueNutterfly I know, changed it to 8rem since the last screenshot (was 6rem)

@BlueNutterfly also: holy shit, thanks for all the ++ 😱