The original link: cssanimation. Rocks/the spheres

Using the border-radius attribute, we can implement rounded shapes and circles. You can add some gradients to make them round. Let’s give it a try and add some animations to liven it up.

The plane design

There are two ways to create a sphere with CSS.

The first way is to create a true 3D sphere by using a large number of elements. The downside of this approach is that it requires the browser to render many elements, which can affect performance. Because a smooth sphere requires a lot of elements, it looks a little rough.

Instead, I try the second approach, using CSS gradients to add shadows and a 3D effect on a single element.

Examples and source code

All examples mentioned in this article can be found through my Codepen account, or by selecting “Edit on Codepen” for each example in this article to view the source code.

In the code example, I didn’t add any browser prefixes [CSS prefixes]. I recommend using a tool like Autoprefixer, or adding prefixes to suit your needs.

The basic shape

Before adding details, let’s create a basic circle.

Start with HTML:

<figure class="circle"></figure>
Copy the code

Here we use the figure element, but you can use other elements as well. Figure is an element used in HTML5 to represent an image or diagram, which is part of the content and can be removed without affecting the meaning of the content.

To create a circle using the figure element, I will give it a width and height and set border-radius to 50%. Any shape that is set to more than 50% of the border-radius radius becomes circular.

.circle {
  display: block;
  background: black;
  border-radius: 50%;
  height: 300px;
  width: 300px;
  margin: 0;
}
Copy the code

A circular display.

Spheres tutorial: 1. Circle
@donovanh
CodePen

Now that we have a basic circle, we can start beautifying it to look more like a sphere.

Shading 101

The first thing most 3D sphere tutorials do is add a simple radial gradient, slightly up and to the left of the center.

We can do this with CSS:

.circle {
  display: block;
  background: black;
  border-radius: 50%;
  height: 300px;
  width: 300px;
  margin: 0;
  background: radial-gradient(circle at 100px 100px, #5cabff, #000);
}
Copy the code

You should see something like this:

See the Pen Spheres tutorial: 1.b Circle + basic shading by Donovan Hutchinson (@donovanh) on CodePen.

Radial gradient

The radial-gradient attribute requires several parameters. The first parameter is the center where the gradient begins. Shape * at *position* In the previous example, the gradient shape is circle, and its center is 100px to the left and 100px to the top.

The next step is to set a series of colors. You can specify more than two colors, but you must add a distance between each color so that the gradient knows when to transition each color to its next color.

In this example, two colors are specified, which causes the browser to default the first color to start at 0% and the second color to end at 100%, drawing a transition effect between the two colors. If we want to change other steps in the gradient, we can specify the distance, expressed in pixels or percentages, as shown in the following description.

We have something that looks a little bit like 3D, and it looks great, but let’s try to make it look better.

Shadows & 3D

Depending on the shading you apply to the surface, you can create different appearance effects. First, let’s set up a scene to put the ball inside.

Here we will use more HTML elements:

<section class="stage">
  <figure class="ball"><span class="shadow"></span></figure>
</section>
Copy the code

The tag of class ball contains the span tag used to create the shadow effect, and its parent element is Stagediv. The parent element stagediv is useful when we want to set the perspective and position shadows, because it can look more like a 3D effect.

Style the stage and shadow.

.stage { width: 300px; height: 300px; display: inline-block; margin: 20px; perspective: 1200px; perspective-origin: 50% 50%; } .ball .shadow { position: absolute; width: 100%; height: 100%; Background: radial-gradient(circle at 50% 50%, RGBA (0, 0, 0, 0.4), RGBA (0, 0, 0, 0.1) 40%, RGBA (0, 0, 0, 0) 50%); transform: rotateX(90deg) translateZ(-150px); z-index: -1; }Copy the code

Note that I did not add a CSS prefix relative to the one in the above example, but it is included in the Codepen example. In the example above I set perspective to stagediv: 1200px. The Perspective property gives perspective effects to elements that have 3d position transformations.

Set the radial gradient to the shadow and use the Transform attribute to locate it. In 3D space, the transform properties include rorate, scale, move, and skew. Rotate the shadow 90 degrees on the X axis and 150px down on the Z axis.

Because we set the Perspective property on the stage container, the shadow looks like a stretched oval and feels like the shadow of a ball.

See the Pen Spheres tutorial: 2 Basic plus shadow by Donovan Hutchinson (@donovanh) on CodePen.

It now looks a little better than before, let’s add more shading to it.

Multiple shaders

In reality, you rarely see objects that emit light at only one Angle, because the light bounces off other surfaces and eventually the various sources of light mix together. To make the ball look more realistic, we added two gradients using pseudo-elements to make it look more shiny.

.ball {
  display: inline-block;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 50%;
  position: relative;
  background: radial-gradient(circle at 50% 120%, #81e8f6, #76deef 10%, #055194 80%, #062745 100%);
}
.ball:before {
  content: "";
  position: absolute;
  top: 1%;
  left: 5%;
  width: 90%;
  height: 90%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 0px, #ffffff, rgba(255, 255, 255, 0) 58%);
  filter: blur(5px);
  z-index: 2;
}
Copy the code

Here we have set up two slightly more complex gradients.

The first gradient is a low-light effect applied to the ball element. The center of the gradient is 50%, 120%, and the center is away from the surface of the ball. I did this to make the final color transitions look less abrupt and give a smoother gradient.

The second gradient is a highlight on the top of the sphere that is 90% of the width and height of the sphere. It sits in the center of the top of the sphere and spreads out until it disappears.

Instead of creating a new element to cover the sphere, I used the before pseudo-element.

I used the blur effect to soften the gradient because it would look too stiff to use alone, but it is currently only supported by Chrome and Safari, but it may come into play in other browsers in the future.

The above two gradients give the ball a better visual effect:

See the Pen Spheres tutorial: 3 Better shading by Donovan Hutchinson (@donovanh) on CodePen.

Shinier

Now the ball looks very soft, so let’s add some shine to make it look more like a snooker ball.

To achieve this effect, we also added soft light, but made the top highlights smaller and sharper. We need to overlay the ball color with two false selectors, a highlight gradient at the bottom and a reflected effect gradient.

.ball {
  display: inline-block;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 50%;
  position: relative;
  background: radial-gradient(circle at 50% 120%, #323232, #0a0a0a 80%, #000000 100%);
}
.ball:before {
  content: ""; position: absolute; Background: radial-gradient(circle at 50% 120%, RGBA (255, 255, 255, 0.5), RGBA (255, 255, 255, 0) 70%); border-radius: 50%; Bottom: 2.5%; left: 5%; Opacity: 0.6; height: 100%; width: 90%; filter: blur(5px); z-index: 2; } .ball:after { content:""; width: 100%; height: 100%; position: absolute; top: 5%; left: 10%; border-radius: 50%; background: Radial -gradient(circle at 50% 50%, RGBA (255, 255, 255, 0.8), RGBA (255, 255, 255, 0.8) 14%, RGBA (255, 255, 255, 0) 24%); transform: translateX(-80px) translateY(-90px) skewX(-20deg); filter: blur(10px); }Copy the code

Here we set a weak gradient effect applied to the ball, and the before pseudoelement contains a lighter highlight that also starts at the bottom of the ball and produces the effect of reflected light from the surface.

A new pseudo-element, after, has been added, which is a circular gradient with a gradient of 50% from the center and transparent at about 24% of the mark. This gradient produces a white reflective effect, but to make it look more like a reflected light, we set the Transform to adjust its position.

Set the Transform property, move it 80px left and 90px up, and set the skew effect, skew and stretch it on the x axis to make it look more like the shine reflected by the ball.

See the Pen Spheres tutorial: 4 Shinier by Donovan Hutchinson (@donovanh) on CodePen.

8-ball

Let’s go ahead and add the number eight to look more like a billiard ball.

We need an extra element to increment the number 8 and set its style.

<section class="stage">
  <figure class="ball">
    <span class="shadow"></span>
    <span class="eight"></span>
  </figure>
</section>

.ball .eight {
  width: 110px;
  height: 110px;
  margin: 30%;
  background: white;
  border-radius: 50%;
  transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);
  position: absolute;
}
.ball .eight:before {
  content: "8";
  display: block;
  position: absolute;
  text-align: center;
  height: 80px;
  width: 100px;
  left: 50px;
  margin-left: -40px;
  top: 44px;
  margin-top: -40px;
  color: black;
  font-family: Arial;
  font-size: 90px;
  line-height: 104px;
}
Copy the code

Create round eight again with border-radius and set the TransdForm attribute to position the element in the upper right corner. Here I use the before pseudo-element to add the number 8 to the content, and then adjust the position of the number in a similar way.

A shiny number eight billiard ball.

See the Pen Spheres tutorial: 4.b 8-ball by Donovan Hutchinson (@donovanh) on CodePen.

Got my eye on you

One of the advantages of CSS transform is that it can be applied to animation. Csskeyframes can be used for animation, and a series of element transformations can be applied to elements as animation. I’m going to make an eyeball that moves.

Start by tweaking some of the colors used in the example 8-Ball to make it look more like an eye. HTML code:

<section class="stage">
  <figure class="ball">
    <span class="shadow"></span>
    <span class="iris"></span>
  </figure>
</section>
Copy the code

Except for the iris and pupil styles, most of the CSS styles are similar to the example 8-Ball.

.iris {
  width: 40%;
  height: 40%;
  margin: 30%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #208ab4 0%, #6fbfff 30%, #4381b2 100%);
  transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);
  position: absolute;
  animation: move-eye-skew 5s ease-out infinite;
}
.iris:before {
  content: "";
  display: block;
  position: absolute;
  width: 37.5%;
  height: 37.5%;
  border-radius: 50%;
  top: 31.25%;
  left: 31.25%;
  background: black;
}
.iris:after {
  content: ""; display: block; position: absolute; Width: 31.25%; Height: 31.25%; border-radius: 50%; Top: 18.75%; Left: 18.75%; Background: Rgba (255, 255, 255, 0.2); }Copy the code

The blue gradient forms the colored part of the iris, while the pupil and highlight effects are created using pseudo-elements. I also applied the animation property to the Iris element with the following Settings:

animation: animation-name 5s ease-out infinite;
Copy the code

In this example, an animation named “animation-name” is set to 5 seconds, loops indefinitely, and eases to ease-out. Ease-out is when the animation slows down towards the end to achieve a more natural effect.

Without creating an animation, we see an eyeball that doesn’t move.

See the Pen Spheres tutorial: 5 Eyeball by Donovan Hutchinson (@donovanh) on CodePen.

Let’s create keyframes that describe how the eye should move.

@keyframes move-eye-skew { 0% { transform: none; } 20% {transform: translateX(-68px) translateY(30px) skewX(15deg) skewY(-10deg) scale(0.95); } 25%, 44% { transform: none; } 50%, 60% {transform: translateX(68px) translateY(-40px) skewX(5deg) skewY(2deg) scaleX(0.95); } 66%, 100% { transform: none; }}Copy the code

Animation keyframes in CSS can be difficult to use at first, but what you’re doing is showing the various states of an element in a series of scenes, with each state corresponding to a percentage. In this example, Iris starts with Transform: None, and at 20%, it sets iris to move and tilt to the left. The browser automatically calculates the difference between 0 and 20% to smooth the transition between the two.

As mentioned earlier, it takes 5 seconds to complete the sequence of scenes set up in the keyframe.

Don’t forget to set the prefix required for the style, because some browsers have CSS style compatibility issues.

See the Pen Spheres tutorial: 5b Eyeball (animated) by Donovan Hutchinson (@donovanh) on CodePen.

Bubbles

Animations and color gradients can produce all kinds of interesting and varied effects, like bubbles?

The bubble is created to look similar to the previous example by increasing the opacity in the main color and using two pseudo-elements to add shine.

Animate the bubbles.

@keyframes bubble-anim { 0% { transform: scale(1); } 20% {transform: scaleY(0.95) scaleX(1.05); Transform: scaleY(1.1) scaleX(0.9); Transform: scaleY(0.98) scaleX(1.02); } 80% {transform: scaleY(1.02) scaleX(0.98); } 97%, 100% { transform: scale(1); }}Copy the code

Animations apply to entire bubbles as well as pseudo-elements.

See the Pen Spheres tutorial: 6 Bubble (animated) by Donovan Hutchinson (@donovanh) on CodePen.

Using images

So far, all balls have been created without using any images. Background images can be added with more detail and still be colored with CSS in the pseudo-elements.

Hop. Ie/balls/image…

Add some CSS gradients to create the illusion of depth.

See the Pen Spheres tutorial: 7 Tennis ball by Donovan Hutchinson (@donovanh) on CodePen.

Around the world

Animation can be applied to the position of the background image, using which we can achieve the rotating globe effect.

The plane image below is slightly stretched at the top and bottom to serve as the background image.

Hop. Ie/balls/image…

By adding shadows and animations, you can create a 3D globe that can be viewed at Codepen. Due to performance issues with this example, I set the HTML display to default.

Ps: Thank you very much Sidoruk Sergey (@Sidoruk_SV) for optimizing this example and it looks great.

See the Pen Globe by Donovan Hutchinson (@donovanh) on CodePen.

Resources

If you want to learn more about radial Gradients, check out some of the resources.

Looking for more 3D examples? See Portal CSS for more information.

Feedback

All examples can be found in my Codepen. Many thanks to Chris and the team for their excellent resources.

If you have any questions about the above, please contact us via email or Twitter.