Hello, and welcome back to CodeTime.io. This is episode four of learning view with demos. In this demo, we're going to be covering how to use CSS filters with Vue.js. CSS filters are a really cool thing that you can apply different effects like hue, saturation, brightness, to an image to get a specific effect, think of Instagram filters for example, and you can pretty much generate all of the different styles that Instagram filters create with a basic CSS filters. And of course you can bind that onto your images with Vue.js making it dynamic and allowing you to create some really cool effects. And you might do these things on hover, or you might do these things with some sort of effect system that you're building out. So let's get started with this as well. We'll get started say by staying exclamation mark tab, and again, I'll do the same thing I did previously. So again, doesn't really matter the order that you set this up in, I'll set it up this time with the script.
First, I'll set up the div id of app, I'll put it inside the body tag, I'll scroll to the top here, and I'll get the script source, and we will paste this here. Oh, not there, see I'm going a little too fast here. We'll paste this here on line 15 as we want that to be loaded after our basic HTML gets loaded. Of course, we'll need tailwind as well, so I'll grab tailwind from tailwind css.com and I'll fix the spacing here. All right, this was the last exercise which was mouse fun. This new one is called image filters. And so we can see hello view, if we don't see that say we see two curly brackets in the word message, we've probably made a mistake, we'll click on the inspect and say cancel, and we would see if we have any errors there.
So, I'll name document, we'll call this image filters with view. All right, we need an image. I'm just going to grab an image off Google. So I'll say something like a cat and we'll go over to images and maybe we'll pick, actually let's do something from Unsplash. So Unsplash is a place where you can get free stock, and you probably know about that already. I like to get something that's like really colorful, this is great. So, we'll be able to change the colors of the flowers and all of that as well as we do this. So we click on this download for free, and you can say thanks to that person, or we can say show and finder, and there's our photo.
I'm going to move it from my downloads into my demos directory. And then here I'm going to add a folder called images, and then I will put the folder in the image inside that folder, and then I'm going to rename this to something like flower girl. Again, I don't want spaces in my image paths, so I use the hyphen and I made everything a lower case. I can now close this and this, and now we can reference a flower girl. So to reference that again, it needs to be inside the id of app. I'll say images, slash, flower, hyphen, girl, dot. Believe that was a JPEG, it is JPG. Now we will save the photo, and it's a very large photo, so we can use some tailwind to [inaudible 00:03:41] it's not going to actually shrink the size of the photo, but visually it will be smaller. So we'll say width, and I'm going to go with one half, and then we'll do a quotation and refresh this. And now you can see that it is a little bit smart.
So here's the first thing we want to do. I want to bind a hue to this image, so the ability to change the hue and of the image via a range slider. Of course, you could also use a input field as, I don't know if range sliders are fully browser supported, and of course you could build a custom JavaScript range slider, but the range slider is pretty easy just to do as a demo. So let's go ahead and set that up. Of course, I'll put an alter here something like flower, a girl or something like that into it. Not the best all tag, but at least we got something in there. So I'll say input, and then this is going to be a range slider. And then we need to bind our model all to it. I'm going to call our model hue. So, then we'll come down to our model which says message, I'm then going to change its value maybe to say something like the hue is zero and then up top so I can see the value that it's currently at.
I'll see zero, and you can see here that it's a zero as the value, and we see our range slider. As we scale up, we can see the number change based on our range slider. Okay, so now I need to bind it to the image. All right, and this is just like we did before in the last video, I'm going to break these down so they're on their own line. I send it is space this just to make them perfectly aligned up as tabs won't line up perfectly. I just sort of like that nice clean edge there for it. Okay, so to do this, I need to bind it, so we're going to say a V hyphen, bind, colon, style equals curly brackets for the object, and then this one's going to be filter and that's the CSS attribute, and then we're going to be referencing in our model here which is hue, but filter takes another sort of, I guess you would say property.
And if we Google CSS filters and maybe something w3schools, we can see all of the filters that are available to us. So they give you example here's gray scale, but if you keep scrolling down, these are the available filters. So we have blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturation, sepia and url. The one I want is hue-rotate, and it is essentially it looks like a function in CSS there. So we'll say hue [inaudible 00:06:50] didn't copy it, hue-rotate, and it looks like that. If I scroll down to where it says hue-rotate, it takes a degree. So we'll need to add the word degree in there. The maximum value is 360 degrees. Now this is a little bit tricky, and when I work with people sometimes and teaching them they sometimes have a hard time understanding this one here.
This value needs to be our hue value, right? That would be like this, let me remove this here temporarily. That's normal sort of thing, think background color, and then the color value. But what we need to do is sort of attach a string value. This is not the model, so it needs to be wrapped in a string. So if we wrap with a string like this, then it's going to work, but our value which is hue needs to be inside of that. So we'll need to put a single mutations in there as well. So if you think about it like this, and I'll give it some space, so you can kind of see what's going on. We're going to take this string and attach it to the model and then this string and attach it to the model. And then we need to add degree in there. All right, so we need to do that because we essentially need to escape it or to say that this is a string and we're adding it to this model, and then we're adding this string to it as well.
You don't have to have the spaces there if you don't want. I just think they look a little bit nicer and I can quickly go and reference that. So at that point now let's see the starting degrees on this applies, the zero degree is default, and that's what we've set here as zero. So if we come back up to this, this is zero, note the zero value there, and as we make this larger, it starts to change in value. And I saw that little vibration or shaking that just happened right there, that is coming because it's one number becomes two numbers. So I'm going to remove this value, or what I can do is take this and wrap it in a label tag and say something like there's our hue, and then if we want we can wrap this in a div, and then I'll say this is for the hue.
So we'll give this an idea of hue just so it's perfectly correct syntax. Okay, so now it's down here and we can slide it, and you can start to see that the hue is changing as we slide it, pretty awesome right? Now we can easily take this hue and build it into a mouseover or a mouseout or a quick action. But that's the basics of hue. I want to show you a couple more, so what I'm going to do this time is take a filter and bring it down to the next line, and I want to combine two of them together. So if we go to CSS filter properties and we scroll down there's an example here, sepia multiple. And multiple is simply using multiple filters is simply just the space in between them.
So these examples are contrast and brightness which probably the ones you might want to go and do next. So to that again a just the space, and then we would do a contrast, note the single quotation right? Contrast is going to take a percentage, so it's going to then say, plus our contrast model, and that would be this here, which we're making now. And we'll set the contrast to a hundred by default, and then we'll say, plus our single quotation, and this is in percentages. So we'll put a percent here, and then a close parenthesis. So now we can build another one of these, but this time instead of hue, I will set it to contrast or contract here. There we go contrast, we go back to our demo and refresh and what, it's all white, we made a mistake of some type right? We'll go in inspect, we'll say console and warning 597. It says, Invalid expression, unexpected parenthesis in this syntax. So let's go and take a look.
Sometimes it'll give you the exact align. If I scroll to this section here, hue-rotate plus degrees, space, contrast, parenthesis, plus contrast, parenthesis and the single quotation to close the line as note the start one here. Now if we refresh, looks like we still have made a mistake somewhere. Let's see, invalid unexpected parenthesis close. So hue-rotate parenthesis contrast parenthesis plus contrast plus, Oh, look at that extra one right there. Okay. Now we have them both you'll see no errors, again if that wasn't clear we essentially stopped the string, and then we had a parenthesis just chilling by itself that was not in a string. By doing this, we're attaching this sort of string and this string with the variables or models in between. So now we have a contrast that a hundred, if I lower the contrast, I'm essentially losing that contrast and I can change the hue and saturation on this.
As I raise I'll across. If I go over to my CSS filters property tab that I have open, contrast looks like it goes to 200% maybe more than that. We can take a look here if we go all the way to the top here under contrast, and it'll tell us how, so values over and over will provide results with less contrasts, zero make the image completely black. So instead of a range slider, we could come in here and say, let's make this a text slider or a number slider, not a number slider as a number field. Now if we refresh, we'll see we have a number input field, and I get to say something like 200 and you can see that it's crazy contrast. Then I could check the slider here, and I could apply that to the scene. I want to do one more, so if I go to my CSS filters again we have brightness, blur, contrast, we have hue-rotate, opacity, and I want to do saturate. So saturate going to work just like the last one we made, so we'll copy these two lines. We'll change the word contrast to saturate.
Then I will come down here and add a saturate model, I'm going to set its default 0% will make the image completely unsaturated. A hundred percent will represent the default, so I want to make this one also a hundred. And then appear where we added contrast like this, I'm going to just do the same exact thing here, but change it to saturate and this value to saturate as well. So now we have two input fields here. If I increase this bottom one, you can see the saturation of the photo is increasing, at least it looks like it maybe it's not say 200. And if I changed this one here, doesn't look like it's changing, nothing's changing there. So if we click inspect, let's see what's going on. We don't have any console errors.
We'll go back and double check everything, did I spell saturate correctly? I did not, I wrote statue rate. That's a little embarrassing. Here we go, those things will happen though. And we'll come back and refresh, and now if we change this number up and we play with that, it's changing, and now if we increase this, I'll close this and make this much larger, we'll say something like 200 and you can see that at the image is clearly blown out as that is zero, the default state and here would be normal. And if I wanted this to be super saturated, there's a 200. So the combination between these two things, I could start to add contrast and a couple other things, I could start to make some interesting effects onto the image. So, that's the basics, so when you go to practice this, try some of these other ones, there's invert and opacity, and there's grayscale. You also have this drop-shadow one and brightness and blur. So some really cool things that you can do with that.