Report Blog Entry
This piece of CSS will put a film grain effect over your entire page. It works on desktop and mobile and will sit over everything without interfering with anything. Great if you have an aesthetic that could use some subtle motion.
html:before { animation: grain 8s steps(10) infinite; background-image: url(https://i.imgur.com/QpnTsrV.jpg); content: ""; height: 300%; left: -50%; opacity:.2; position: fixed; top: -110%; width: 300%; pointer-events:none;}@keyframes grain { 0%, 100% { transform:translate(0, 0) } 10% { transform:translate(-5%, -10%) } 20% { transform:translate(-15%, 5%) } 30% { transform:translate(7%, -25%) } 40% { transform:translate(-5%, 25%) } 50% { transform:translate(-15%, 10%) } 60% { transform:translate(15%, 0%) } 70% { transform:translate(0%, 15%) } 80% { transform:translate(3%, 35%) } 90% { transform:translate(-10%, 10%) }}Remember: always put any CSS in between two Style tags: <style></style> That way, browsers will recognize that what you're trying to do is adjust the style. Also remember that CSS stands for Cascading Style Sheets, so the browser will activate styles from top to bottom!
Comments
Displaying 16 of 16 comments ( View all | Add Comment )
spilled_guts
thank you so much for this!!
✭jakob✭
hello everyone! if for some reason this doesnt work, go where it says "background-image: url("
and remove the imgur link and replace it with https://i.postimg.cc/qMLV5V6Z/QpnTsrV.jpg :33
thank you!! it worked!!
by minerva :]; ; Report
MacinTally
for some reason it works on https://nein-mc.neocities.org/csstest/ aka the hey space preview thingy but not on the actual site?
copy the imgur link in the code and google post images and click the first link, from there at the top of the page there should be an option to upload by URL. click that and paste the imgur URL and get the new postimg URL (copy the one that says DIRECT link, not just link) and paste it where the imgur URL originally was. for some reason imgur URLs dont work on Spacehey anymore, its pretty strange, but theres thankfully a way to work around it. hope this helped!!
by ✭jakob✭; ; Report
⟡Ziggy
Thanksss
⛧Morganna Bramah
🌫I've replaced mine with a seamlessly tiled huge fog PNG, and not sure on how to stabilize the up down/motion, to make it roll more gently from side to side... ...What portion of the code do I need to play with? 💖
UsefulLeaf
This is awesome!! Do you have any tips for other effects like this one?
Ask for Donna
sweet!
Becki Bullets
Omg! This is going perfect with my new profile layout! Thankyou
Sarah
Thank you so much!
Rainstorm Moonbow
Thanks, I can use this!
aleeex
this is so so rad!
Chriiiis
This is really neat! I learn a lot from you all CSS magicians on here!
monotony ♡◔ᴗ◔♡
Thanks for sharing, I'll probably end up using my own image, tweak opacity, and a few other fine tunes. I'll hit you up when I get it done at some point this week but I bookmarked it for now! 💕
yeah dude! all code is building blocks to making your shit happen.
the basics of this is, an image with enough contract to make the grain pop out at the .2 opacity, and the random movements that basically cover the whole screen. an image too small will have obvious patterns, but if that's what you're going for, then yeah
by Cory
;
;
Report
Good to know, glad you're okay with me making my modifications 🙏
by monotony ♡◔ᴗ◔♡; ; Report
ash lynx
this fits my profile perfectly! i love it!
XxNix_NightmarexX
stole this XD its rly subtle, nice !
is it really stealing if you can just _have it_ lmao
I'm glad you like it! tell your friends :D
by Cory
;
;
Report
VJ Daffolk
Excellent!!!
Thank you!
I removed the line that started with
because I didn't like how it looked cross-browser. It should now be a little bit more obvious, especially in Chrome or on lighter backgrounds.by Cory
;
;
Report