Thursday, January 24, 2019
HOW TO PERFORM COLOR MIRACLES WITH RADIAL GRADIENT IN CSS
Hi, I humbly welcome you to this lesson. Hope you studied our previous lesson, which happens to be the solid ground with which this lesson is standing on. With you today, I will not limit my discussion on what radial gradient is, but also take you by hand and work you through the various ways on how to perform color miracles with a radial gradient. A radial gradient is like a biological sister to a linear gradient. However, a plethora of differences abounds in the midst of their similarities. This is partly what I mean. Inasmuch as it is a ‘’do or die’’ requirement that at least two colors must be defined for both gradients (linear and radial), radial gradient is however defined from its center. Put it differently, a radial gradient starts from the middle of a circle, unlike the linear gradient.
Another remarkable thing about radial gradient which I will not fail to dish out in this lesson is its syntax or rules in Cascading style sheet (CSS). The syntax used for the radial gradient in CSS is expressed like this:
''Background: radial-gradient (position, shape, color stops)''
If you closely observed the above syntax and compare it with the one that governs linear gradient, you will agree with me that there are a lot of changes between the duos. Let us briefly but closely look at the syntax of a radial gradient for proper understanding.
A CLOSE LOOK AT THE SYNTAX THAT GOVERNS RADIAL-GRADIENT
Background: radial-gradient (position, shape, color stops)
1) POSITION
A position is the first value you have to define in the radial gradient. They are amazing descriptive keywords you can use to define this value. Some of them include top, bottom, left, bottom left, center top, center right and so on. You can equally specify this values using X-axis and Y-axis formula. For example, 50% 50% means that the radial gradient will be set at the center of the circle. And 0% 0% will set the radial gradient at top left. If you know the axis very well, you can manipulate different positions using percentage.
2) SHAPE
Another value you have to consider immediately you have defined the position of the radial gradient is its shape. There are two fundamental shapes in a radial gradient, namely; ellipse and circle. If you intentionally or unintentionally omit the shape value, it will automatically be set as an ellipse. In other words, the ellipse is a default shape in the radial-gradient.
3) COLOR STOPS
Setting a color stop in the radial gradient is similar to that of a linear gradient. You need to specify at least two colours in a radial gradient with the addition of an optional stop position which is usually the length or percentage value. Percentage defines how much an element is to be covered by a particular color. It is pertinent to note here that each percentage must be greater than the last value. For example, (blue 20%, Green 60%, Yellow 85%). In this example, you will discover that the first value (blue) is lesser than the second value (green) and the second value (which is green) is lesser than the last value (yellow). Is it clear? Perfect!
Let us now consider an example to water down all we have learned so far.
HTML
<div></div>
CSS
div{
height: 300px;
width: 350px;
color: white;
background: radial-gradient(circle, green 40%, yellow 60%, red 80%);
box-shadow: 10px 10px 5px 5px #888;
padding: 30px;
}
REFERENCE THE CSS INSIDE YOUR HTML DOCUMENT, IT WILL LOOK LIKE THIS
SAVE AND OPEN IT, IT WILL LOOK LIKE THIS
WRAPPING UP
If by any means you encounter difficulty in coding or referencing the CSS in HTML, you refer back to our previous lessons on HTML or freely drop your comment below, I will be glad to help you. Our next lesson will be exceptional. Keep practising.
Subscribe to:
Post Comments
(
Atom
)
No comments :
Post a Comment