We’re proper in the midst of a heatwave right here within the UK, and issues have been slightly quiet on this weblog whereas I’ve been very busy with varied different tasks. So I’d thought I’d take slightly break at this time and check out one thing slightly bit enjoyable – an animated CSS solar illustration, to seize the summer season spirit (and the relentless warmth)!
Initially I began layering divs, however then I realised I might create the entire thing with only a single component, utilizing background gradients! The primary (static) model was fairly easy – I didn’t even want any pseudo parts (fig 01).
However it felt fairly fundamental. I needed to present the solar’s rays a bit extra life, and add some animation. So I added two pseudo parts (::earlier than and ::after).
Layered gradients
The 2 pseudo parts, and the component itself, all have mutliple layered background gradients. These use radial-gradient for the glow, and conic-gradient for the rays. conic-gradient has blended browser assist on the time of writing, so the demo can solely be seen in Chrome or Safari – you gained’t see something in Firefox. Though Firefox helps radial-gradient, as a result of we’re utilizing it together with conic-gradient the entire declaration is dropped.
I gave the principle physique of the solar a barely fuzzy edge by including just a few pixels between the orange color cease and the clear area – I didn’t need it to really feel too sharp and strong:
.solar::after {
background: radial-gradient(
yellow,
orange 27%,
clear calc(27% + 3px) 100%
);
}Z-index and backgrounds
I ran right into a little bit of a z-index problem when layering my gradients – ideally I needed the physique of the solar to be on the principle component and the pseudo parts to solely comprise the solar’s rays, in order that I might animate them independently. However I couldn’t get the z-indexes to play properly. It appears the background of the component is at all times going to be behind the pseudo parts, it doesn’t matter what, which type of is smart – though if that is incorrect please let me know!
I might have simply received round this by nesting a component, however I needed to maintain the purity of the single-element answer! Ultimately I made a decision to not scale the second set of rays anyway, however having the choice could be helpful (with out resorting to something too advanced).
Masks-image
To offer the rays a mushy edge I used mask-image with a radial gradient over the component. Picture masking is just like clip-path in that it’s a solution to present or cover a part of a component. However as an alternative of offering a path to chop out the form, it’s extra like drawing over the areas you need to present. You should utilize a PNG, SVG or gradient to masks, for instance.
mask-image requires a prefix for some browsers (together with Chrome):
.solar {
-webkit-mask-image: radial-gradient(rgba(0, 0, 0, 1) 40%, clear 65%);
mask-image: radial-gradient(rgba(0, 0, 0, 1) 40%, clear 65%);
}As a result of I’m animating the size of the rays I duplicated this property onto the pseudo component too, in order that the identical proportion would stay hidden because it scales.
Animation
I animated the 2 pseudo parts in order that they rotated at completely different charges. This wasn’t fairly sufficient, so I animated the size of one among them too, to present the impression of a pulsating glow.
Right here’s the total demo:
