We’re proper in the midst of a heatwave right here within the UK, and issues have been a bit quiet on this weblog whereas I’ve been very busy with varied different tasks. So I’d thought I’d take a bit break at the moment and check out one thing a bit bit enjoyable – an animated CSS solar illustration, to seize the summer time spirit (and the relentless warmth)!
Initially I began layering divs, however then I realised I may 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).
Nevertheless 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 combined browser help on the time of writing, so the demo can solely be seen in Chrome or Safari – you received’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 primary physique of the solar a barely fuzzy edge by including a number of 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 challenge when layering my gradients – ideally I needed the physique of the solar to be on the primary component and the pseudo parts to solely include the solar’s rays, in order that I may 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 may have simply acquired round this by nesting a component, however I needed to maintain the purity of the single-element resolution! 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 complicated).
Masks-image
To offer the rays a comfortable edge I used mask-image with a radial gradient over the component. Picture masking is just like clip-path in that it’s a method to present or cover a part of a component. However as a substitute of offering a path to chop out the form, it’s extra like drawing over the areas you need to present. You need to use 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 so that they rotated at completely different charges. This wasn’t fairly sufficient, so I animated the size of certainly one of them too, to present the impression of a pulsating glow.
Right here’s the total demo:
