Hello and welcome to another new episode of learning simplified.
In this tutorial we are going to understand filter properties in CSS,
practically in css3.
This is the original image that has been used in this purpose and
this is the image after applying those filter codes or those filter properties into
your style sheet documents.
In previous cases whenever we tried to apply some particular
effects on our graphics, such as this blur property, or invert property or lightness
or brightness, contrast, saturation, hue- rotation, or drop shadow - all these
kind of properties those practically involved invocation of a particular graphics software;
that means we had to prepare our images inside a graphics software according to as
per as our need and then we had to import those images into our project.
But using these filter properties you practically do not
need to use any kind of graphics software to make all those amendments into your project.
And in this purpose inside this stylesheet.CSS, we have created this particular selector
name, [selector name], '.'here suggests invocation of a class name and here is the
selector name [selector name].
We have assigned a particular width of 100% and a definite
height of 800px and a margin and a background property which is red in color, and inside
this definite class name we are going to introduce an image whose property has been
defined over here and it has a width of 100% and height of 800px.
Inside this index.html, we have just called in that selector name and where we have
introduced this particular image as an image source.
Here we have provided and 'Alt' attribute and a 'title' attribute.
All we need to do we need to apply those particular filter properties.
So that is why we are going back to stylesheet .CSS and inside we are
typing as: For say we are using invert.
So let's start with a particular one.
All we're doing here we are just applying our web hack
code.
In this context we would like to say that filter property in CSS do not practically
render into an Internet explorer 9 or earlier, and Safari web browser with a version of
5.1 or lower.
So this is the thing that we need to take care of.
And here we have created this particular properties here; now
let's get back to our project, here it is, and reload.
We can say that this whole thing is now getting inverted.
Now instead of invert, if we use hue-rotate, and in this particular case we do not have
to use a percentage value.
We need to define here the angular value.
For say I am providing here 145 degree...
Here it is.
Now in this particular case we can see that there is a Hue-rotation over here, a total
angular value of 145 degree.
Instead of 145 degree, if we use 45 degree, we will see another
result; just press Control + s, get back to your project and reload and you can
see that this is the outcome of your 45 degree angular value of Hue-rotation.
Drop Shadow.
I hope that you remember that particular term text-shadow.
Value in horizontal Axis that means in x axis, we have
to define it first, along y-axis, we have to define that one too, and bring the amount
of blurriness that we have used here 10px, and then we need to define that particular
color; for say we are providing here an yellow color.
Now all we're doing we are just copying it....
Press control + S, get back to your project and reload and now if you
just scroll down you can see that already here
is the drop Shadow property along this particular image as you can see and it is yellow
in color.
It has a horizontal valuation of 10px and a vertical y axis valuation of 10px
and the total amount of blurriness is 10px and color of the particular drop Shadow
property is yellow.
Now instead of drop shadow, use contrast...
If we provide here 500% - this is the amount of contrast and you can observe here; practically
image has been now enhanced into a 500% contrast.
Now instead of this 500% contrast if we now use brightness...
This will be the outcome.
This is the actual amount of 500% brightness.
Now let's assume that we have to combine both the contrast and the brightness property.
So all we are going to do now - we have to define a contrast value of 100% and a
brightness value of 150%.
There we go..
Press control + s, get back to your project and
you can see that this is the outcome.
So the images now been applied with a 100% contrast and 150% brightness.
Again if we use a gray-scale of 100%, you can now see that the images now turned into
a desaturated mode or into a gray-scale mode.
In case if you want to increase the saturation then all we need to do we need
to write that proper term - saturate..
And we are enhancing it into 500%.
Now if we just reload we can see that this is the outcome of
that particular saturation property.
You may have observed that we have created an image
source over here.
We have used an image source instead of the background property.
There's no background with a particular URL.
And another thing we will be adding blurriness to our picture, that is why we
have to replace the opacity property; and in
this case we have to enter the amount of blurriness in pixel unit; so guess what we are
providing here, we are providing now 10px.
So, the filter attribute that we are using right now is the blur and the amount of blurriness
will be 10px; and this is the thing that should be copied now...
And we are pasting it into the rest of this code.
Now Press control + s, get back to your project and reload.
And you can see that the blurriness property is been now attributed
into your project.
This is the final touch that I will be discussing on.
This is known as the opacity.
For say we have reduced this capacity to 30%;
here it is.
Now just copy this thing, there it goes, press control + s get back to your project
and reload and you can see that both the background color and the image is now
getting observed, is now been observed and that is how you can use both of them into
a particular property but this method is not very much well adopted method in case of inserting
some kind of contents into this particular div; and another thing you may
have come with some question that can we animate any of these properties or all those
things here?
Yes we can animate.
But that is a separate issue for a different tutorial
and it is practically beyond the scope of this tutorial.
So hope you guys have liked this tutorial and I hope this tutorial will be aiding you
in Creating your projects with enhancement of
your graphics inside your web project.
If you have liked this video then do not hesitate
to hit that Red subscribe button down below.
We are expecting you into our next class; till then, bye...
For more infomation >> 🔔 UMFRAGE 🔔 - Nimmst du 1KG Gold oder 3,5 Bitcoins zum jetzigen Zeitpunkt? bitcoin oder gold - Duration: 5:41. 
For more infomation >> Eskalation in Paris: Polizei setzt Tränengas gegen Dutzende farbige Protestler an Bahnhof ein - Duration: 2:54. 
Không có nhận xét nào:
Đăng nhận xét