It’s just a gradient from a firebrick red to the same color ( linear-gradient(#ba3e2e, #ba3e2e)), so the result is simply a solid color square. The bottom one - horizontally centred ( 50%) and at the bottom ( 100%) - is really simple. All nine of them are half the width and the height of the element ( background-size: 50% 50%). The background-color is set to be a light blue ( #43a1cd) and then, on top of it, there are layered nine non-repeating ( background-repeat: no-repeat for all) background images created using CSS gradients. Also, two values should be always given when the background-image is a gradient, because giving it just one value is going to produce different results in different browsers (unless that one value is 100%, in which case it might as well be missing as that is the default). In the case of background-size, there is also another reason to do that: Safari doesn’t support background-size inside the shorthand and, until recently (up to and including version 17), Firefox didn’t support that either. Since we have nine background layers and we want to have the same non-default values for background-repeat and background-size for all of them, we specify these outside the shorthand so that we don’t have to write the same thing nine times. Other than that, any value except the one for background-image can be missing and then it is assumed to be the default. Also, since background-origin and background-clip both need the same kind of value (that is, a box value like border-box or content-box), then, if there is only one such value, that value is given to both background-origin and background-clip. If the background-position is not specified, then the background-size isn’t specified either. A background layer includes the following: The background shorthandįor anyone who doesn’t remember, the background layers are listed from the top one to the bottom one and the background-color is specified together with the bottom layer. We first specify the nine gradient backgrounds, their positioning and the background-color using the shorthand background syntax. Check out this Pen!įor both the original pen and this helper demo, the interesting part is this one: background : linear-gradient (36deg, #272b66 42.34%, transparent 42.34% ) , It also has a pause button so that the infinite animation doesn’t turn into a performance problem.
#Css gradient how to
The pen below shows graphically how to layer the multiple backgrounds.
Which means that the central angle for each slice is 360° /10 = 36°. The wheel - or you can think of it as a pie - is first split horizontally into two halves and then each half is split into five slices, so there are ten slices in total. Rainbow wheel made of CSS Breaking it down And now I’m going to explain the reasoning behind it. So I did and the result can be seen here. Recently, while browsing through the demos on CodePen, I came across a CSS3 Color Wheel and thought hey, I could do it with just one element and gradients. The idea that you can obtain many shapes using just gradients was a starting point for many CSS experiments I would later do. I had no idea how powerful CSS gradients could be until late 2011, when I found the CSS3 Patterns Gallery made by Lea Verou. Also she loves maths and enjoys playing with code. She is passionate about experimenting and learning new things. box Ĭan I Use css-gradients? Data on support for the css-gradients feature across the major browsers from following is a guest post by Ana Tudor. Here we’ll explore the syntax for defining lineal gradients. They are still generated images internally to the browser, so you’ll want to define them in the background property or your elements, and you get plenty of flexibility for the direction and color stops.
#Css gradient software
No need to create images in a seperate software anymore. You can now easily define radial and linear gradients in CSS.
0 kommentar(er)
