#Flat design animation tutorial code

Since this highlight gradient has a sharp edge, IРІР‚в„ўve made use of the blur effect to soften the highlight. IРІР‚в„ўve used the before pseudo-element rather than create a new element to contain the shading.

The gradient is centered at the top so that it fades out at around halfway down the ball. ItРІР‚в„ўs set to be 90% of the ballРІР‚в„ўs width and 90% of its height. The second gradient is a highlight, placed at the top. I did this so that the sharp ending colour wasnРІР‚в„ўt visible, resulting in a smoother gradient. This places the center off the ballРІР‚в„ўs surface. The center of the gradient is positioned half-way across and at 120% of the ballРІР‚в„ўs height. The first gradient is a subtle under-lighting effect and it applied to the ball element. Here we have two slightly more complex gradients. Since we established a perspective value on the stage container, we end up looking down on it and can see it as a stretched oval shape.Р”В«ackground: radial-gradient(circle at 50% 120%, #81e8f6, #76deef 10%, #055194 80%, #062745 100%) Р”В«ackground: radial-gradient(circle at 50% 0px, #ffffff, rgba(255, 255, 255, 0) 58%) The shadow is rotated 90 degrees on the X axis, and then is pulled down 150 pixels to the base of the ball. Transforms in CSS let you rotate, scale, move or skew things in a 3D space. The ballРІР‚в„ўs shadow is then placed by giving it a radial gradient, but then positioning it using a transform. The perspective property is like the vanishing point in a 3D scene. In the above I set up the stage div to have perspective of 1,200 pixels. The Codepen examples contain fully prefixed CSS. Note that IРІР‚в„ўm not showing prefixes in this examples CSS. Transform: rotateX(90deg) translateZ(-150px) First though letРІР‚в„ўs set up a scene to place the ball in. Shadows & 3DР”Вepending on what sort shading you apply to the surface, you can create different looking spheres.

ItРІР‚в„ўs ok, but letРІР‚в„ўs try to make it look a bit nicer. So we have something that looks a bit 3D-ish. If we wanted other steps in the gradient, we could specify distances in pixels or percentages, as youРІР‚в„ўll see later. This lets the browser assumes the first is 0% and the latter is 100%, and it draws the gradient between these to colours. In this example just two colours are specified. You can specify more than two colours, but it is then necessary to include a distance with each one so that the gradient knows when to blend each colour into the next. In this case case, itРІР‚в„ўs a circle with itРІР‚в„ўs center position 100 pixels in from the left and 100 pixels from the top. This follows the form *shape* at *position*. The first is the center position for the start of the gradient. The radial-gradient property takes a few arguments. Basic shapeР”В«efore adding details, weРІР‚в„ўll create the initial circle shape.

IРІР‚в„ўd recommend using a tool like Autoprefixer, or add in prefixes as needed.

#Flat design animation tutorial code

In the code examples, IРІР‚в„ўve left out any browser prefixes. Demo and source codeР”Р„ll the examples mentioned can be found via my Codepen account, or by selecting the РІР‚СљEdit on CodepenРІР‚Сњ links in each example below. Instead of this IРІР‚в„ўll try a second approach, making use of CSS gradients to add shading and create the 3D effect on a single element. They also tend to look a bit rough as a smooth sphere would require many elements. A potential downside though is that these require the browser display many elements, which can impact performance. There are some beautiful examples of these. One is to create an actual 3D sphere using lots of elements. There are two ways we could approach making spheres with CSS.

LetРІР‚в„ўs try that, and add some animation to bring them to life. Add some gradients and they become spheres. Using the CSS border-radius property, we can create rounded shapes and circles.