https://wiki.sidson.city/index.php?action=history&feed=atom&title=Template%3ASootyeffect.css 2026-04-29T17:28:45Z Revision history for this page on the wiki MediaWiki 1.41.1 https://wiki.sidson.city/index.php?title=Template:Sootyeffect.css&diff=2216&oldid=prev 2025-12-06T08:12:13Z

<p>Created page with &quot;.soot_wrap { height: 100vh; width: 100%; background-size: cover; background-position: center bottom; position: relative; overflow: hidden; } .soot, .soot:after, .soot::before { content: &#039;&#039;; position: absolute; top: 0; right: 0; bottom: 0; left: 0; <span dir="auto"><span class="autocomment">This is where all the little soot particles are. there rendered as a radial gradient.: </span> background-image: radial-gradient(4px 4px at 100px 10px, #fff, transparent), <span dir="auto"><span class="autocomment">adjusted to 30px: </span>...&quot;</span></span></p> <p><b>New page</b></p><div>.soot_wrap {<br /> height: 100vh;<br /> width: 100%;<br /> background-size: cover;<br /> background-position: center bottom;<br /> position: relative;<br /> overflow: hidden;<br /> }<br /> <br /> .soot,<br /> .soot:after,<br /> .soot::before {<br /> content: &#039;&#039;;<br /> position: absolute;<br /> top: 0;<br /> right: 0;<br /> bottom: 0;<br /> left: 0;<br /> /* This is where all the little soot particles are. there rendered as a radial gradient. */<br /> background-image: radial-gradient(4px 4px at 100px 10px, #fff, transparent), /* adjusted to 30px */<br /> radial-gradient(6px 6px at 200px 12px, #fff, transparent), /* adjusted to 40px */<br /> radial-gradient(3px 3px at 300px 8px, #fff, transparent), /* adjusted to 20px */<br /> radial-gradient(4px 4px at 400px 11px, #fff, transparent), /* adjusted to 50px */<br /> radial-gradient(6px 6px at 500px 4px, #fff, transparent), /* adjusted to 10px */<br /> radial-gradient(3px 3px at 50px 2px, #fff, transparent), /* adjusted to 45px */<br /> radial-gradient(4px 4px at 150px 8px, #fff, transparent), /* adjusted to 35px */<br /> radial-gradient(6px 6px at 250px 30px, #fff, transparent), /* adjusted to 25px */<br /> radial-gradient(3px 3px at 350px 20px, #fff, transparent), /* adjusted to 50px */<br /> radial-gradient(4px 4px at 550px 15px, #fff, transparent); /* adjusted to 40px */<br /> background-size: 650px 650px;<br /> animation: sootAnim 3s linear infinite;<br /> }<br /> <br /> .soot:after {<br /> margin-left: -250px;<br /> opacity: 0.5;<br /> filter: blur(2px);<br /> animation-direction: reverse;<br /> animation-duration: 6s;<br /> }<br /> <br /> .soot::before {<br /> margin-left: -350px;<br /> opacity: 0.7;<br /> filter: blur(1px);<br /> animation-direction: reverse;<br /> animation-duration: 9s;<br /> }<br /> /*<br /> 0 percent: render all the particles at the top of the screen with no opactity<br /> <br /> 25 percent slowly move downwards and set the opacity to 0.7<br /> <br /> 100 move all the way off the screen and set the opacity back to 0 making it invisable. <br /> <br /> this makes it look like a clean smooth loop<br /> */<br /> @keyframes sootAnim {<br /> 0% {<br /> transform: translateY(0);<br /> opacity: 0;<br /> }<br /> 25% {<br /> opacity: 0.7;<br /> }<br /> 100% {<br /> transform: translateY(130px);<br /> opacity: 0;<br /> }<br /> }</div>

MoonSid