houdini-cosmic-starfield
v0.1.1
Published
Generate a dynamic cosmic starfield with optional cosmic clouds and customizable gradient using CSS Houdini
Downloads
12
Readme
CSS Houdini Cosmic Starfield
From Stephanie Eckles @5t3ph - author of ModernCSS.dev.
Generate a dynamic cosmic starfield with optional cosmic clouds and customizable gradient.
How to Use
While Houdini paint worklets have the best support out of available Houdini features, they still currently require a polyfill to ensure they are applied cross browser.
So, first include the following once in your project.
<script src="https://unpkg.com/css-paint-polyfill"></script>
Note: The polyfill will not work if the worklet is applied to pseudo elements, and may have issues with customization when applied to the
body
element.
Then, include the paint worklet script after the polyfill is loaded:
<script>
CSS.paintWorklet.addModule("https://unpkg.com/houdini-cosmic-starfield");
// Trickery to get the polyfill to draw the worklet in Firefox and Safari
setTimeout(() => {
document.querySelector("ANCESTOR_ELEMENT").style.width = "100.01%";
document.querySelector("ANCESTOR_ELEMENT").style.width = "100%";
}, 500);
</script>
Finally, use it in your styles! For best results, assign as the background-image
to a dedicated element.
.cosmic-starfield-element {
/* Number of stars */
--cosmic-starfield-stars: 4280;
/* 'true' or do not include to hide the clouds */
--cosmic-starfield-clouds: true;
/* String array of at least two hex codes */
--cosmic-starfield-gradient-colors: #471f60, #231b6e;
/* Use the worklet! */
background-image: paint(cosmic-starfield);
}
!important
- provided gradient colors must be in hex format.
What is CSS Houdini?
Check out other Houdini paint worklets and more info at Houdini.How.