Tip:
Highlight text to annotate it
X
Now we need to mention some kind of animation here, so that is why we will get back to our
stylesheet.css and here, in input type text we have provided the width of
100%.
First of all, let it be 70%.
This is the thing that I am doing over here, and on
transition, width will be the property that will be facing this transition thing, and
it will be consuming a total of 1 second.
What will be the nature of animation?
It will be linear, I don't want anything else, a flat speed, this is what I want and it will
be linear.
Copy this.
You know that drill, so far you have been taught
with it.
Provide the hack codes over here..
And this is this standard syntax.
So all we need to mention now, we need to mention the hover action.
So this thing on hover it will be executing a width of 100%,
and another thing, on Focus condition, that means whenever we click on a form field, the
same form field will be maintaining it's width to hundred percent.
It won't be shrinking, unless the next form field is been clicked.
So all we need to do is to press control + s, get back
to your project and reload.
Now you see that on Mouse hovering, it is getting a full 100% width, and on being focused
it is practically getting full hundred percent width, as you can see that it is not coming
back to its previous state which is 70%, what on Mouse hovering, if we move our Mouse out,
when we can see that it is now shrinking back to its previous width, previous
position which is 70% of this total width.
So this is the thing that we need to know about here.
Now if you just click over this 'enter email' form field, we can
see that this entire element, it is now getting a hundred percent width again.
So this is the thing that we have actually coded over here, we have mentioned that this
form element which is input type text, on Mouse hover it will execute change in width
to 100% and this input type, which is text under focus condition, this is actually
the focus condition, it will be attending a total width of 100%.
You see?
On Mouse hovering it is getting hundred percent, move out the mouse and it is shrinking
back to 70% again and on clicking on it, you can see that it is now maintaining a total
width of 100%.
This is actually the function of focus.
So the same thing can be done on this comment below segment.
So the next thing that can be done over here is to keep of this
background thing.
We don't need any background anymore.
So all that we can do over here , get back to your project, and..
Do not touch this left box as it is still now un-coded, and this is the parent we don't
need to touch this either.
So the remaining feature is form-feature-parent-right-box, which has a background of this
one.
So all we need to do we need to comment this thing out...
Now everything is alright over here so you just get back, press control + s first and
reload, now you can see that it is practically executing the
a good view over here and this is the background of the parent element and this is the background
of the left box as we can see.
So we don't need to think about it, first of all we have to concentrate over here.
Another thing, if we look into our template, so this is the template,
so all we need to do we need to we need to change this column, to customize it..
This is the font-family, 'Sail Regular' cursive.
So we need to copy this thing, but before doing anything over here, we need
to mention first...
Get back to your project and reload, we can see that it is already executing this thing.
We practically need to change this font-size,
make it 2em and see what happens.
It is to bigger I think.
So these are the experiments that you have to make over here
constantly, which one is best suited in....
Ok no problem.
Now we need to make this colour a little bit darker, so here it goes.
Press control + S, get back to your project and now we can see that it is being
properly arranged.
There it is, there it goes, no problem with it so far, so we are done here, we have created
this form field and we have now.....
We know how to make animation in it..
If you have liked our tutorial then do not hesitate to hit that red subscribe button.
And will be happy to see you in the next tutorial, till then, bye..