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.
#Css circle on fluid image 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.
0 kommentar(er)
