(upbeat electronic music)[Tutor] If you're a SuperHi student,you can actually request videos to be recordedand one of my students asked me about this site,this is the Ways of Knowing Citiesand mainly about the cut out effect on this page,now there is a little bit of mouse movement, as you can seewhen I move my cursor left and right,but the main kind of thing is how do you make the textin these kind of areas be cut out of the page?Now I've made my own very basic version,this is a simple version, that looks like thisand you can see as you scroll up and down the page,the background stays cut out on this.So we're gonna talk about this in two different ways,the first way we'll talk about image processing programs,so things like Photoshop, Figma and Sketch,how would they do this in the same way?And then what we'll do is we'll convert thisinto HTML and CSS, no JavaScript needed at all,just HTML and CSS.(upbeat electronic music)I've just quickly made a simple image in Sketch,I've got three parts to this,I've got a background square,which is currently all in black,I've got a panel in the middle,which is currently all in whiteand I've got some text over the top,which is currently in pure black as well.Now if I add an image to this, which is just from Unsplashand just make it fill,now the way that we could think about this in Sketchis we could put the background below the textand then start to use some of the tools up here,the Union, Subtract and in Sectorsand the Difference tool as well,but we don't have that in HTML and CSS,but there is a way round this,now what we can do is actually movethis background above the imageand instead, we could actually use some of the Blend modes,now by default, the Blend mode is just Normal,but as we kind of change these,we can change things to Darken,which means the white square has this background,but what we could use is Lighten or Screenand what this will do is give us the same kind of effectas what we have on the web.Now luckily we can use some of these new effectsin HTML and CSS, so what I'm actually gonna dois first of all, I'm gonna make my kind of area,that looks like this, which is purely in black and white,now if I change some of the colors in here,you can start to see what happenswhen I just change the background from black into redand it doesn't really make much of a difference,it depends on the kind of luminosity of this.Now what I do wanna do iseventually have the background above everythingand then use a Blend mode to kind of fill this in,so it's not really using a cut out effect,instead it's using a background that's above everything,but using a Blend mode.(upbeat electronic music)So I've just set up a simple HTML pagewith a little bit of CSS in there.So what I've got in here,just let's have a look at the HTML,is I've got a section with the class of textand in there is a p tag and just some lorem ipsumand I've got a link in there as well,just to kind of show that offand then in my style.css, I've simply gota white background with some black text,I've got my section.text, which is the whole area,currently with the border, which is 100 pixelsand solid black, which is kind of the outside edge,then I've got some padding to move the text inand I've got some background-color of white in there.I'll talk about position: relative in a minuteand I've got some other styles in here,just to kind of make it look a little bit more normal.Now what we want to do is actually have,just like we did in Sketch,our image going above everything, to not cut it out,but to almost fill in the black areas instead,so to do that, I'm just gonna quickly go into my index.html,I'm gonna add in a new section tag,now this section tag, I'm gonna call,well, let's give it a class of background,now obviously this isn't going to be a background,but I can call that class whatever I likeand if it makes sense to me, I could call it background,I could call it anything I like,now I'm gonna use this in my style.css,now there isn't any content in this,it's just gonna be a pure image,that goes over the entire page, so in my CSS,I'm just gonna go down to the bottom of the pageand I'm gonna add in a section with the class of background,'cause that's what I gave the classand in here, what do I want to do?Well, I want this image, this background imageto fill the entire page, now I've currently uploadedmy image called background.jpg, which is just over hereand I want this to fill the entire area of the pageand kind of follow me with the scroll as well,so the first thing I'm gonna do is make position: fixed,where do I want it to be fixed?Well, it's gonna be in the top left corner, top and left,how big do I want it to be?The width is gonna be 100% and the height is 100%,now because it's fixed, it'll just be the 100%of the width of the browser and the height of the browser.Now if we look at it right now, it kind of looks the sameand what I want to do nextis actually add the image to this background,so in here I'm just gonna do background-image,now what is my image?Mine's called background.jpg,so background-image is backgroundand I kind of wanna stretch this image,depending on the size of the browser,so I'm just gonna add background-size: cover,I also wanna put this in the middle,in case it kind of, we want it to look pretty good,so let's do background-position: center too,so now what we get is my image being over the entire page,now the background-size: cover just makes it change,depending on the size, so if I make it smaller,the image goes down in size as well,just kind of holding these handles that I've got.Now what I do wanna haveis the next thing is I want to blend this in,now if I did this in Sketch,what we had is we switched it from being Normal,which is kind of what we have at the moment,we wanna change it to Screen or Lightenor one of these kind of Blend modes, that looks good for us,now I'm gonna stick with Screen,because I've used it in Sketch, how do we do this?Well, I can add a relatively new CSS rule in hereand this rule is called the mix-blend-modeand this is actually made by Adobe,Adobe have kind of given away all these algorithmsthat they've had in Photoshop for yearsand let us use it in CSS, so we can just put in here screen,so what we'll get on the page is something like this,you can see that this fills in all of this black areaand we keep the white areas on here.Now one of the problems that we haveis currently if we have out links on the page,the background is over the top of the actual links,so I can't click this, I can barely select it,but I wanna be able to click things,so I want my cursor to ignore the background,that's above things, so how do we do that?Well, there's a few ways we could do that,we could, you know, do some weirdkind of positioning things, but what we can do insteadis just say for this section with the class background,ignore any cursor events,so in the pointer-events are noneand the pointer-events basically meanswhat should I listen to?In this case, don't listen to this,instead let me actually click these linksand you can see now,my mouse turns into a little hand instead.So in the next part,what we'll talk about is how to add more elements,so maybe squares and kind of cut out effects.(upbeat electronic music)On the Ways of Knowing Cities site,there's lots of these kind of rectangles around the page,now how do these get added?Now, if I go back to Sketch, let's say,how would I add some cut out effect?So what I'd do is I'd go to mt text area,I'd insert a new rectangle, let's put it up hereand what I would do, ooh, mine's just gone outside,I just need to fill it in as a black color,so if I fill it in as black,you can kind of see that changing,so I wanna do the same thing, basically I want to adda black rectangle to my main part of the page.So in my HTML, I'm gonna go back to my index.htmlfirst of all, and in this p tag,well, not in the p tag, maybe next to this p tag,what I'm gonna add in here is a div, now this div,I'm gonna give a class of rect for rectangle of courseand what I want to do is place thissomewhere within this area, so in my style.css,I'm gonna basically do this further up the page,now this is in my section with a class of textand it's a div with a class of rectangle,so in here, I'm gonna select the sectionwith a class of text and then in here,space, div.rect.

Now what I'm gonna do in here is kind of position thisin the top right corner, so the position: absoluteand we're gonna put it in the top corner,maybe not quite in the top corner,but we'll do top and right, 100 and we'll give it a width,so let's give this a width of maybe 250and a height of maybe 200 as well,now the reason this will stickto the top left corner of the section.textis because I've given this a position: relativeis relative to the whole of this section,now if I remove this,it'll be relative to the whole of the page,so this top and right would be the top of the page,not the section.text,so at the moment what we get is kind of nothingand the reason you're getting nothingis 'cause you haven't colored this in,so to color this in, what do we need to do?All we need to do is in my CSS,I'm gonna give this background-color of pure blackand now what we'll see is when we go to the page,this fills in and you can see this as we scroll,basically this kind of background that's on topis just filling this black color in.Now I could do some other effects on here,maybe I wanna kind of change this linkto be an inverse style and all I'd need to do thereis go back to my CSS in the same way,what I'm gonna do is instead of this,I'm gonna make the background-color of blackand instead, I'm gonna make the text-color whiteand what we see in here now is if I see this,you can see this kind of doing the invert,now obviously I might wanna remove this underline,because it's very obvious that this might be clickable now,so what do I do there?I'm just gonna add in text-decoration is none,so basically get rid of the default underline for linksand what we have there is basically a cut out link,this is a link, this is just a normal rectangleand there we go, we've just got normal text,so what we're doing here is not actually cutting things out,it's doing the opposite,we're basically putting the background over the topand then filling in all the black colorsusing this mix-blend-mode of screen.

If you liked this video, you'd really loveour Foundation HTML, CSS and JavaScript course.(upbeat electronic music)