Background, Dropshadow & Cursor

[00:00:00]
>> Background, we can set many different properties, color, image, repeat, size, and position. So background color, color name, you can use hex, you can use RGB, looks like that. We can define a background-image, and I'll show you, we'll do this in practice, but this is what it might look like in a UI.

[00:00:20]
So if we wanna add this cat image here, you can declare a background image by setting the url, cool. The image is way too large, so all we're seeing right now is a green square. We can fix that with the other border, or I'm sorry, with the other background properties, right?

[00:00:34]
So we can set the size of the background image, right? There are many different values, you can have a length, a percentage, these keywords, some global values, we'll see this in practice. So, let's say we set a background size to contain on our cat image. So what is that gonna do?

[00:00:54]
Contain is gonna resize the image to make sure it's fully visible. So, that's why we're seeing two cats, it's preserving that dimension to make sure, that our whole cat image is appearing. But then there's some extra space at the bottom so it's gonna repeat that image to fill the whole space.

[00:01:10]
Instead, we can use background size of cover. So now the cat picture is gonna cover that whole space. And if I'm flying through this, it's because we're gonna see this in the speaker section it'll become a little bit clearer. And then we can change how that image is positioned within the background, right?

[00:01:28]
You can do that with percentage, with pixels, with these keywords. So I want our image to be centered, so I'm just gonna set the background position to center, and now our cat image is centered. And we can also change the repeat of a background is repeated. So remember how in this cat when we just had background size contain it was repeated because it was trying to fill the additional space at the bottom.

[00:01:53]
If we didn't want that to repeat, we can set background repeat no repeat so it won't repeat that image. But you're just going to have to be okay with the fact that there's going to be some white space left here, because it's preserving that dimension. So drop shadow, I don't think we're going to use in our code, but it's important to be aware of.

[00:02:12]
It's essentially a blurred offset version of the image, like the alpha mask, so it's drawn in a color and composited below the image. And we use it with declaring the filter property. So here, we have a box with a width and height of 100 pixels has a red background and we've set a drop shadow filter of 10 pixels.

[00:02:36]
So, these values correspond to the x-offset, the y-offset, the blur radius, and the color that's what those four values correspond to. So here, the x-offset is 10 pixels, the y-offset is 10 pixels, so it's moved down and to the right by 10 pixels. Has a spread or a blur radius of 10 pixels, so it's very blurry.

[00:02:57]
And we want the color to be black. To get it up at the top left instead, we can negate those values, so it's -10 pixels, -10 pixels moving top left as opposed to bottom right. And if we want the drop shadow to be a little bit more defined here, we can change this blur radius, the closer to 0, the more like defined it's gonna be here.

[00:03:19]
It was very fuzzy here it's more defined. Again, we're not really going to use that in this course but it's really good to be aware that that exists. We can also change our cursor values. So instead of like a pointer icon, we can have help, we can have wait, we can have many different icon types.

[00:03:39]
I'm not gonna go through all of them, we will use pointer to indicate that an element is clickable, this is really good for links, for example. But there are many different types of cursors maybe not allowed is really good if something is disabled.