Now that we have successfully accomplished the concept of linear gradient, this time
we will be now targeting the radial gradient here.
[Music...]
So what is the definition of radial gradient?
Radial gradient is defined by its circular or elliptical shape, its central point, and
two or more color stops.
We will be definitely viewing all the aspects of radial gradient in this purpose and the
first thing that we are going to do, we are going to copy this whole thing; but before
that as we have told you previously that we will be working on the standard syntax; so
we won't be needing all those hack codes here in this purpose, but on the other hand I would
like to remind you that all these hack codes, those are practically needed in case while
you are building your own project.
So definitely do not ever try to miss all those things, all those hack codes over here
and whenever you are creating your project you will have to use these kind of things.
But for the time being we are going to delete it off, we will have to discard it and with
this remaining thing all we are going to do, first of all we are going to copy this thing
and we are going to paste it here; we are going to create a new kind of container which
is known as new_gradient_holder as we can see here.
In the same manner in this index.html at this extreme end, we have created this particular
type of new gradient holder here; so all we are now going to do we are going to copy this
thing and we will be creating another container over here and we will be naming it as....
And we will be naming it as new_gradient_holder1 as we have produced in our stylesheet.CSS.
Now we can see that there are two consecutive divs, both of them are right now having the
same properties here, because both of them are practically copied from each other.
So that is why we are now going to make some certain changes; all we now have to do we
have to change this particular linear gradient type into a radial gradient one.
And in the very first case, all we are going to do we are going to make use of two basic
colors; the red one and I guess the yellow one.
So now we can see that this is practically the result as we can see that red is the first
color-stop and yellow is the second color-stop.
So that is why we can see that the red is appearing at the center of this particular
container and yellow is appearing in the outer part of this particular gradient.
Now we have basically used two particular color-stops here.
We may define whether the shape of this particular gradient should be a circular one or an elliptical
one; let's put here circle.
So we have put this circle and we can see that this is practically circular in nature;
now if we provide here ellipse, and reload, we will be now seeing here that this particular
gradient is elliptical in nature.
But right now what should be the position of this particular gradient?
In this respect all we can do, in the first case we are providing the circle and here
we are mentioning that the circle at 100%.
Now if we reload we can see that the centre is now deviated from the exact middle of this
particular container to the peripheral area of this particular div.
So we have defined here that this circle should be formed at 100% and this is what exactly
is done over here.
In the second case if we now mention ellipse at 100%, and if we now reload, we can see
we have put here an ellipse, that means shape of this particular gradient will be elliptical
and will be deviating from Center towards 100% of this container-width, that means into
the peripheral area.
In case if we cannot understand what is going on now let me change this second stop, from
yellow it should be turn into blue.
Press control + s and you can see that this will be the result.
I think this is perhaps the best result that we could see right now.
Now in case if we want to have a more exact view of this particular case, then all we
need to do we need to define another color stop here which should be green.
So we have provided three colors stops consecutively; the red one, the green one, and the blue one;
and we have defined that the shape will be ellipse in nature and the center will be deviated
at the extreme peripheral area.
So if we now get back to our project, we can see that this is going to be the result; now
you can see that this is a perfect ellipse as we can observe over here.
Now if we change this particular valuation of positional property From 100% to 10%; what
will be the outcome?
This is going to be the result.
In other sense if we now put here circle and if we reload, we can see that this will be
the result.
Again in case if we mention that this circle should be formed at 50% position, from the
center, then we can see that we will be getting the exact same result that we will get in
case if we do not mention anything at all.
If we do not mention these things over here...
Reload and we can see that the exact same preview will be observed in your browser.
So this is the thing, whenever you are particularly mentioning a particular shape and if you are
not mentioning anything at all about the position then all it is going to take it is going to
place the central position at the exact middle of that particular container.
Now let's talk about shifting this Central position, the center into a particular value
such that they reside into extreme corners or reside some point shifted towards the central
position of this particular container.
In that case four parameters are used over here....
[Music....]
Không có nhận xét nào:
Đăng nhận xét