Create a pure CSS sphere

The Anonymous Koder — Wed, 21 Jul 2021 12:47:41 +0000

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.

1. Create the div

We will start slow. We will just add a simple div and give it a class “sphere”.

<div class = 'sphere'></div>

2. Add a bit of CSS

Now we will add a bit of CSS (below is the styling for the sphere)

.sphere {
  border-radius: 50%; /* to make it a circle */
  background: 
    radial-gradient(
      circle at 30% 30%,
      #ffff00,
      #774400
    ); /* this is the radial gradient I was talking about */
}

Looks great, right? We will have a yellow sphere with the light coming from the top right corner, at least that is what we think. After seeing this codepen, we see the world’s most perfect, glorious and annoying white space. Why? What mistake did we make? It turns out that we forgot to set a width and height for the div meaning that it will be 0px X 0px since there is no content inside it.

3. Set the width

Now once we add a width and height (500px), we can see that it looks better (click here).

4. Add a shadow

Looks pretty realistic, but It looks like it is floating in the middle of nowhere. Not the best way to make something realistic, is it? What do we do? We add a shadow. This will give the illusion that the sphere is on a surface. For now, we will add just one shadow which will be slightly transparent (in case we want to add another shadow later). The link to the codepen is here. We still haven’t succeeded in putting it on the ground. What we did succeed in is making it look even more like it is floating. We can use a new div to do this. We play around with the margins and background and get this:

5. Rotation

Ok now it looks realistic, but how do we rotate it? Transforms don’t work, as we can see here.
If you remember that this is not an actual sphere, then you might remember why. We used a gradient for the 3d look so transforms won’t do much. Instead, we will have to change the center of the gradient. Now we use background position as shown here, which doesn’t work either. It is because of the way that browsers process background-position. What can we do to fix this. You can just make background-size 200%. Now the rotation works!

6. Animation

Time to animate it. For now, we want a ball rotating from left to right. A change in the location of the light source will also work. If we play around a bit with some CSS animations, we can get the below result.

Looks good, right? The light is moving from left to right and back again, but something is off. The shadow is refusing to move. To fix this, we need to add a new animation for the shadow. We will only need to change the margin-left property and voilà, we will get a perfect rotating sphere animation. The link to the codepen is here.
You can view the snippets on github here.

7 cool things that you didn’t know about CSS.

The Anonymous Koder — Wed, 21 Jul 2021 12:36:36 +0000

1. calc()

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);

2. cubic-bezier()

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 may seem randon but the moment you get a visual representation, you finally get what the numbers mean. Here’s an example showing the difference between pre-defined and custom beziers.

animation-timing-function: cubic-bezier(0.5, 0, 1, 0.75);

3. @supports

This allows you to tell if a CSS property is supported by the browser and adapt accordingly. It is used like a media query. An example.

@supports (display: flex) or (display: block) {
  .my-class {
    margin-top: 200px;
  }
}

4. The turn unit

This is one of those lesser known CSS hacks. Instead of having to calculate the number of degrees in a quarter turn, you can use the turn unit. Another demo

transform: rotate(0.25turn); /* this is like rotate(90deg) */

5. pointer-events

This CSS property can be used to disable a link. It can also be used for many other things but those are mostly experimental. Just say

a.disabled[href] {
  pointer-events: none;
}

Example.

6. caret

This is the style of the caret (also called cursor). It allows you to change the shape and color of the caret. The color is only supported by some browsers and the shape is supported by none. The syntax is like so:

caret: color shape;

As usual, an example.

7. ::selection

This is one of those cool properties which can really improve the look of your website. This is a pseudo-element which (as the name suggests) is the part of the selected text on a webpage. You can just add a

::selection {
  background: darkblue;
  color: lightgreen;
}

and be satisfied with the background of the selected text being dark blue and the text being light green like in this example or you can get creative and take it one step further like in this example. It turns out that most browsers support multiple styles for different selections. We can take advantage of this fact and make the background of h1 and h2 elements red. We can use this to make some elements more noticeable than others resulting in a better user experience.

DEV Community: The Anonymous Koder