How to create a sphere using pure css.
Css spheres may sound impossible (or at least very tedious) considering that we need to position hundreds of divs and everything but that is not actually the truth. In fact, we can make a realistic CSS sphere using only one div and minimal CSS! In fact, we don’t even need to make a real sphere, we can just make a div that looks like a sphere using a radial gradient.
We will start slow. We will just add a simple div and give it a class “sphere”.
<div class = 'sphere'></div>
How to use CSS to its full potential
Calc is one of the CSS tools which not everyone knows about. It allows you to add calculations in your CSS code. This can be used to make your website more responsive and also remove some annoying overflows: example.
width: calc(100vw - 16px);
This is another useful way to make your css animations come to life. Most of the time, we use linear, ease, ease-in-out, and other pre-defined beziers wasting half of the day finding the perfect bezier. The cubic-bezier() function allows us to create a custom bezier. At first, the numbers…