This is an example of how to use CSS filters to change your website's style into Halloween mode in just a few lines of CSS.
It is super scary!
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Nosifer&display=swap');
.halloween {
background-image: linear-gradient(red, darkred);
filter: grayscale(1) invert(1) brightness(1.1);
mix-blend-mode: luminosity;
}
.halloween h1, .halloween h2, .halloween h3,
.halloween h4, .halloween h5, .halloween h6 {
font-family: Nosifer !important;
}
</style>
In our example, we use the .halloween class to turn on styles. The switcher at the beginning of the page adds or removes it from the body.
To start, we set our website background to a linear gradient in shades of red.
It should be bloody!
Next, we use a few useful filters:
Finally, we need to mix our red background with content! We choosed "luminosity" as a blend mode, but you can try other modes for best readability. Please note that Safari doesn't support all modes listed at this URL.
The last element that will add a scary look to our site is the font! We chose Nosifer because it is bloody!
That's all for this mini tutorial. We wish you a great Halloween and a fantastic fall!
An online editor for busy developers.
© 2024 Shuffle. All rights reserved.