Accessibility Specialist. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
Yes, I wanted to use filters, but in my opinion it was better to use images, because CSS filters require some performance of the browser itself to render these same filters. This means that there may be performance problems on mobile versions if the site uses several similar elements that have CSS filters. But you are absolutely right that it is often better to use filters instead of multiple images.
Accessibility Specialist. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
I think you would be fine with a filter on an image as I am (almost) certain that the browser will apply the filter once and then cache the image as we don't change the filters.
It is a good point though and probably one that would need testing if you use this extensively. 👍
I realised I didn't say it in the original comment, but the way you implemented it is great, one of the better glitch effects I have seen!
Thank you. I should supplement the article and point out the possibility of using a filter instead of images, although people can use your comment as one of the options for implementing pseudo-elements without images. 😁 Thank you for your detailed opinion about the post. 😊
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Awesome. ❤🦄
Quick suggestion, you can save 2 network requests for the jpgs (about 450kb!) by simply using CSS filters.
It also saves you some time having to create the images.
All I did was use the same background image and then rotate the hue 120deg and 240deg.
You have to add a few more properties to make it "tint" the colour so I ended up with:
I am sure with a bit of fine tuning it could be made to be perfectly the same, but for now it was close enough as an example.
Yes, I wanted to use filters, but in my opinion it was better to use images, because CSS filters require some performance of the browser itself to render these same filters. This means that there may be performance problems on mobile versions if the site uses several similar elements that have CSS filters. But you are absolutely right that it is often better to use filters instead of multiple images.
I think you would be fine with a filter on an image as I am (almost) certain that the browser will apply the filter once and then cache the image as we don't change the filters.
It is a good point though and probably one that would need testing if you use this extensively. 👍
I realised I didn't say it in the original comment, but the way you implemented it is great, one of the better glitch effects I have seen!
Thank you. I should supplement the article and point out the possibility of using a filter instead of images, although people can use your comment as one of the options for implementing pseudo-elements without images. 😁 Thank you for your detailed opinion about the post. 😊