This course may contain valuable CSS information for reference, but does no longer reflect our course quality standards.
Transcript from the "Images" Lesson
[00:00:02]
>> Estelle Weyl: So let's create some effects on slide number 3 again, which is actually slide number 21.
>> Group: [LAUGH]
>> Estelle Weyl: So show me is the name of me, there I am.
>> Estelle Weyl: This an SVG I created for a conference that I'm organizing. And so it says, showMe:hover::after, position:absolute.
>> Estelle Weyl: This,
[00:00:33]
>> Estelle Weyl: Does not work.
>> Estelle Weyl: Does anyone know why it doesn't work?
>> Speaker 3: [INAUDIBLE]
>> Estelle Weyl: It is basically the attribute, the data URL, it's just presented as text and it's not interpolated.
>> Estelle Weyl: So it's basically saying url and the URL is actually attr(data-url). If I did this as well, it would not work.
[00:01:06] And let's just double check that by going like this and hovering. It just shows estelle.svg. All right, cuz it's showing this, the data-url, not the actual URL. And if I do url,
>> Estelle Weyl: It'd be really weird if it did work. It does absolutely nothing because it has no clue, it's just that image doesn't exist.
[00:01:30] There's no image called attr bracket because you notice URLs don't need to be in quotes.
>> Estelle Weyl: So it's basically doing this. It's searching for this URL.
>> Estelle Weyl: And there's no image with that URL. Does that make sense? So if I remove this content and says url(estelle.svg), SVG is a completely valid image format so it shows.
[00:01:55] If this had been JPEG,
>> Estelle Weyl: And I had, or JPG, and I had an image with the URL of estelle.jpg, which I don't, it would work, but it does not translate this stuff. It's as if it was quoted. Right, cuz it's basically saying URL and whatever is in the URL is supposed to be an image URL.
[00:02:21] So that's what I wanted to show there and then it's at terrible positioning. So I would actually do left of, I'd say 15ms. And then let's go back to SVG, and then, there we are! Okay, there I am. Okay, yeah, so I was organizing a conference, and so I made SVG's of the first five speakers.
[00:02:53] And then the sixth speaker, so every time you make an SVG of someone, cuz this is the extent of my skills. Which is you just find two attributes that the person has that can kind of make it generally recognizable. It's the fact that I have a huge pony tail, I just got my hair cut two weeks ago and I hadn't gotten it cut in two years.
[00:03:15] So it's like this big mop behind my head. And I have almost no forehead, so I did that little drop and so that's why it looks like me. So everyone I did had this characteristic so you can kind of say, I know who that is. And I had one speaker and it was just, a short white guy with a beard, and I'm like he doesn't always wear the same shirt.
[00:03:37] I had one white guy and he always wear blue checkered shirts, and he has big blue eyes. So it's blue eyes and the checkered shirt, you knew it was him but just you can't do short. So anyway, I couldn't invite any more speakers until I figured out-
>> Group: [LAUGH]
[00:03:58]
>> Estelle Weyl: How to take care of the issue. So we have switched to images now, okay.