I have used many css3 properties before, but soon forgot about them because many of them are complicated to remember, so I wanna to write blog to make it easier to remember them.
so let me first explain line-gradient:
background-image: linear-gradient(direction, color-step1, color-step2, ....)
- direction: using angle to indicate the gradient direction whose values can be an angle or one of them: to left, to right, to top, to bottom. to bottom(180deg) is the default.
- color-step: the beginning color for gradient, consisting of two parts: color: valid css color value; length or percentage: the beginning position, not allowing negative value
examples(assuming height:100px)
background:linear-gradient(to bottom, red 0%,yellow 50%,green 100%); same to background:linear-gradient(180deg, red 0px, yellow 50px, green 100px);
repeatng-linear-gradient(): background: repeating-linear-gradient(red 0,red 10%,yellow 10%,yellow 20%);
thease parameters represent 0% - 10% from red to red, 10% - 20% from yellow to yellow, and repeat this effect to cover entire element size.
radial-gradient()
this function parametes consist of five parts: shape, size, the position of circle center, color, color position.
- shape: ellipse(default) or circle;
- size: I prefer to call it as the increassing direction of radius of radial gradient, with possible values: farthest-corner(default), closest-corner, furthest-side, closest-side.
- position: the center position of the radial gradient, (50%, 50%) is the default;
- color and color position: same to linear-gradient;
this effect is that the center position is located at (0,0) and gradient radius is equal to element's width;
And repeating-radial-gradient() is same to repeating-linear-gradient().
lastly, there is the compatibility of linear-gradient and radient-gradient(more about that on CanIuse website)
Top comments (0)