Full Page: 20 Advanced CSS & HTML techniques: clip-path, @property, aspect-ratio and blend-mode

hello everyone welcome to another css tutorial as you might already know me i like to do almost everything using css and this is going to be for beginners to advance and everybody in between and i'm pretty sure that you're going to learn something we're going to start from css houdini api which is quite experimental and new and i do not recommend to have it on production to grid blend mode aspect ratio and clip path so without losing any more time let's go briefly into what we're going to build today and if you refresh the page you're going to see this preloader when it finishes then the content fades in nicely and it collapses like you see it here and as we keep scrolling everything is going to collapse or assemble and move out of the screen this gorgeous mac pro moving out of the screen slowly and it looks just amazing on the left side we have a call to action here from youtube and it is on the bottom left when we move to the next section is going to stick to the top of the other section and it's amazing to do this with css negative margins and by now you probably paid attention to my cursor which is black here and a dot not quite usual and if you hover into an object that is meant to be a call to action is going to change but if you go into another background it's going to convert into other color and of course fit to everything and as we keep scrolling we are going to see this crazy animation also happening in here i'm using grid to separate everything having a double background in there and then the text above it with a blend mode which is pretty nice and it says like this css is art as we keep on moving everything is going to move into different pace and you can see how dynamic is this and we are actually using zero lines of javascript i'm not saying that you shouldn't because i do too on daily basis at my work but if you look also at the markup is quite small for the entire project that we're going to do and actually when the section is finishing the text is going to move out of the parents and move out from the screen together with those and by now you have probably also paid attention to the scroll bar on the right if you didn't please just check it out don't you think this is gorgeous and when you drag it it just works perfectly fine even if you're on widescreen on a dark screen and i'm using radial gradients to achieve this and i'm modifying the webkit thumb so it works just perfectly fine maybe on some browsers won't work but there is a workaround for everything that you see here alright so now moving to even more interesting stuff we have this section here that fades in and i'm using again gradients starting with a darker color and moving to a brighter color stick it to the center as we move scrolling then something even more amazing is going to go fluidly over every single letter out there and i'm using blend mode to achieve this if you select for example you will understand what's going on behind the scenes where there is an actual div moving through everything here while we'll scrolling with position sticky as we go even further we see now another image fading in and then it starts to fade out as we reach the end the text takes another color and together they move out of the screen all right so now we move to another crazy uh or amazing section that is quite unbelievable to be able to do this on css but i'm utilizing on every single one of these as much as possible double backgrounds seldo selectors and everything just to have a robust and clean markup with dot attacks and everything okay so i have a button here when i click that is going to convert this from aspect ratio one to one to 16 by nine and when it does the content is going to stay on center it's not going to be stretched and it's just going to look amazing positioned on center as we keep scrolling you're going to see other objects going above it and then the numbers here on the right fading in and for that matter you can have a youtube video you can have an iframe you can have whatever you like in here because it's just simply a div and also when we close again the button is going to convert to this presentation mode we move along with it and even the numbers move with different pace compared to the parent as you can see here they attach to different position and take the background with backdrop filter from the parent and it looks how you see it here which is quite nice then we move into another section and this one is quite simple it's just text but we're sticking into the left the number and then on on the center the content is taking a gradient which starts kind of fading in by starting with a darker color as we move on it says like for example did you sub and did you actually subscribe because only ten percent of you guys are subscribing by watching this video so please make sure to do so it helps me a lot all right so let's move on into the next section and the final one which is even crazier than everything that we saw here because as you might already know position sticky works perfectly fine on vertical layouts but horizontally that's not possible so what i'm doing here is converting the parent rotating in that and then again content is going to rotate back onto how it was the title here stays into the left and then the displays goes above it the computer assembles or shows the other parts into the right like this and as we keep scrolling we're backdrop filtering blur everything like everything is going to blur here as we scroll and you can move backwards forwards with this the text starts going above it and then if you notice on the background i have another white background hiding everything and we arrive to this very clean screen that says power the pro and i really want to power you by teaching you some of the most amazing css stuff and if you like what you see you want to learn this please make sure to like and subscribe that helps me a lot and let's move into the actual coding right so since you made it so far now let's go ahead and create the index file where we are going to put everything and basically we're going to need only this file now we're hit exclamation mark here and with emmett abbreviation we're going to add a boilerplate and then you hit tab like you would normally do then we are just going to write here stick so we know that the actual page is working let's turn on the server and yeah we got the title here we know that everything is working properly all right so now we have to do this um first part that you see here and basically we it's quite simple here we have the header with the logo on it and then we have this title in here and then we have this image together with the other one that goes underneath so basically we got four tags so let's go ahead and add all of these all right so now we're going to say and actually before i do that i want to explain you something more i've already went and copy pasted this vars file which i created into the demo that i showed you because there are quite a lot of things that we need to copy like for example this uh body and the cursor and this background white and everything that we're going to need for the project because otherwise if we do all of these it's going to take even longer and i don't want to actually do that but by the end of the video you're going to be able to download these on github and it will go just fine what you need to keep in mind is that i'm using this variable called base and this is the 20 of view minimum height or width depending on which one is smaller and this is the base unit that we want to build everything because on this way then if you just change the base everything is going to fall under it and it's going to look beautiful but now let's go ahead and actually write the markup that we need for this project and we're going to start with uh background white and i'm doing here also custom tags and everything will be like separated with hyphen because this is a standard that you need to follow so basically every tag that we write is going to be on this structure it's just a matter of how we name but organizing files and tags and this kind of stuff is not the topic of today i'm just going to build everything that i showed you on the demo all right so background white we need this so we cover everything and have a background then we are going to make the header and on this header we are going to add a logo which is uh basically six eyes and then we do the css pro for the case because it's the mac pro and then css title and we're going to say here mac pro after this we want to create the case so css case and inside of the case we're going to call the image and here i've also copy pasted from the project all the images and as i said these all are going to be available on github repo so let's call the first image which is the mac pro case and i called it zac pro so mac pro case and let's see here on the title mac and then we're going to say css inside for the inside of the computer and again we are going to call here an image and for this image we're going to call the image called zac pro inside and let's just say inside right so now let's go ahead into the browser and see if things are working and as you can see the logo is showing the title and also both of these images are showing and pretty much we are well set up with the markup itself but also the special cursor that i already did and showed you on the demo that one can be just set up like this we just say cursor and is a custom tag actually okay and this should work just perfectly fine when we preview that after we include everything all right so now as you may see we haven't included any style on the project and we need to create a new file called style.css in here we are going to write some of the basics that we need for the project and also we are going to import everything into this file that we need furthermore like import and then first one we want to import the vars all right now let's write body here we want the general uh body to be black because most of the sections are black let's reset the margin to zero and then usually for the font family i like to do this all the time because it keeps the performance much better you don't need to include something and you just say it sends serve or you can use even the system ui font or whatever you like and then for letter spacing i usually do a very small amount like minus 0.1 character and the ch unit is pretty good to be used because this it will take in consideration always the font size that you're using so basically now that we set on the variables 20 the view min for the view height or view view width then it's taking that in consideration and it's a minus one character of that unit so that's why the text is going to look much better and usually just to reset everything for the line height i use a unit of one which this is going to mean actually just a font size and then overflow we're going to say overlay and this is something that you see very rarely on projects and what this means actually is that the scroll bar is going to show above the content instead of having that space where you usually customize the scroll bar and then you see that black area or something that it just actually doesn't work properly all right so now at the body we're going to say webkit scroll bar track right and on this one we want to do the background to linear gradient and we're going to say to bottom just so we need to define then we say uh transparent because we want to initially start with transparent and then we're going to call this scroll bar scroll bar bar color which is defined on variables also and on this variable as we can see it here it uses some transparency which is 0.1 and it is white but still if you want to change the scroll bar for all of the pages or the contents and you would just have to change this variable all right and we want this to be one pixel we don't want it more wide and that's the actual the one that is going to show vertically and we want that to not repeat and positioned on the center then we want one pixel wide and 90 of the entire container or the scroll bar track to be covered by this all right so now on body webkit scroll bar we are going to just say width 100 pixels because we don't want it bigger than that so it just enough that we can fit in everything and of course the height is 100 but you don't actually need to do this but we're going to define so it's more precise and actually it's going to cover everything and then on the body we're going to say a webkit scroll thumb i think yes and you can actually do this if you want to like you can have it on the cover to have a different color like for example we could say red and it would work but it's not that we need it here and we're going to remove this and then i've set this custom tag that i'm going to use it like hidden whenever i add this it's going to remove something so displaying none to this all right and we're going to use this quite often and then on the body we want to use the cursor that is the default one which shows above the content and that cursor is the dark one or actually it's white but for dark areas and then if we hover the cursor [Music] then we want the cursor to be from the variable cursor dark power and by now you might say like well you're just writing their code and then nothing explained but if you if you go here you we can see the actual svg that builds the cursor which actually is just a rectangle and rounded or circle depending on on what kind of cursor you want and then define the height and the width and what kind of color do you want and basically then we just switch in between these uh custom variables and everything will work as you saw on the demo right so now we have also a difference because when we created this background white tag we want it to work differently and see another cursor so we say background white and actually cursor and for the whole verb we want to have it cursor cursor and over right and also actually we want background white to have a cursor as well we say cursor to or person right like this okay now the only thing left to be done for the entire structure and keep in mind that everything that we did here is going to be used all over the place so that's why we write it first then we say background white and we want the background of course to be white and then we want the display to be flex we want again the cursor to be cursor and now you may say why i'm doing again this is because uh if you're not hovering into the actual object still we want to show a custom cursor and that's where we need to define it again then we want the flex direction to be always column all right and we always want the width to be 100 and same we are going to do about black with just the different uh properties so background black display flex and then position and while doing this and actually we want to do it here too is that we don't actually want to go something beyond the container alright so now if we go here and let's include the style now link we're going to say style and as you can see now the cursor is changed when we hover here also cursor is changed the scroll bar is changed and everything is working as we wrote it there all right now let's go into the actual uh coding for the section so what we want to do here is actually define or display the entire area as css grid and that is going to fall into it its place then we are going to define a width or a width that we want to contain the entire content and add these spaces or the gap that we want into between every element okay now for that we got to create a new css file because this one is already too long and we don't want to mix stuff okay let's go ahead in the beginning and say import mac dot css and then you can do this on any order you like mac.css right so the first thing first we got the header here the logo so we want to design that and we say header we want to display that to flex and font size and in this case we're not using base because it would be ridiculously large so let's just say 20 pixels and we want the height to be 100 pixels so if we want to have it above everything which actually we're going to have and then say position sticky we want this to stay on top like zero because we want to keep it sticky from the beginning and then align uh actually align not tracks but i items to center because we have the height and we wanted uh uh some space there also padding vertically we want zero and then 40 pixels all right so by now we see the logo in here which is looking like it should and we are confirming that it is working now let's do the actual mac let's say this display uh grid and then we want the width to be and actually right now we're going to use this called function a lot of times but as i said we're doing this so when we use the var item base then everything is going to work properly and it's going to scale like very nicely if you want to change on the future and we're going to say base and we're going to multiply this by 3 because i consider that this is the optimum width that we want here to showcase everything and then we want the padding button to be again calculate base times two all right so we want these paddings usually and this is uh where i'm doing on the container itself or the entire object because when we do the position sticky we necessarily want to have some space on the bottom so when when we scroll to actually see the animation happening like in here otherwise if it would meet the end very very fast then you wouldn't see so much transitions that happen in here and feel free to do this based on your object so in this case i'm going to say uh that the base times 2 or around 40 the minimum view height or width is enough and then we want some gap in between or we're going to use grid gap in here to have a gap in between the items and why do we need gap is because in here as you can see before every element meets the other we want this space to be so it looks like the transition much better and since we're doing this we can see here in between the items and then on the end we want some small bar margin because of the title and the logo and all of those vertically and also horizontally we want it on the middle now as you can see the image in here is quite large right and is going above the container so we're going to say here that we want the css 100 right and so since we did the images in here and uh we actually said width to 100 is going to cover the entire container and by this now we are ready to actually do the position stick and everything that we need to do for the entire area but before we do that let's just go ahead and say the css title since that is looking quite ugly font size and we're going to calculate as i said almost everything with this and base to slash two or divided by two and then we want the font weight to be bold right so um it's looking pretty nice now let's go ahead and actually uh i'm going to say to this to display flex because i wanted the text always to be on the middle vertically and horizontally and actually create some space on top of it so it stays behind the case which we were doing previously so we're going to say justify content to center and then align items to center and basically whatever align items items.track to center basically whatever you're going to add there is going to work perfectly fine and we want a certain amount of hate and we're saying caulk here and the base times two right okay and then we want to define the position as sticky and we want that to stay on top equaling the base okay now when we start scrolling you can see the title is staying on the place but as you see now that we scroll like the title is going above the image and that's happening because we're using flex in this case and position and everything so now we have to define for the case when we say position sticky at the z index as well all right so now let's go ahead and do the case css case we're going to say position sticky and then we want this again to be as equal the top as a base because this one is as well and this one and it's going to cover while the text is on the middle then you won't be able to see the text while we scroll right and then we say z index one and as you can see now the text goes underneath the case right okay now let's do the inside position sticky we say top in this case it's going to go differently because the image that we are using for the inside it is actually taller than actual uh case and in order to simulate that as we did on the demo in here like to go like this the handles when they show up then to start scrolling we need to use some more like negative unit in here which is in this case enough to use eight of the minimum view height and actually this now should work fine but before we do that we also need to add some margin on the bottom because we want that to exactly equal the case and this is more than enough to do so so like this it's going to stick and as you see it just works perfectly you can keep scrolling on and everything works fine now let's just create here a section and do this to height like 400 view height and just to simulate the scroll and see how it is going let's add it here right you can see the scroll now is larger and as you can see all the transitions are just working magically so yeah this pretty much in in total concludes this section but also as a bonus i want to show you something even more interesting and what that is is the actual is property and now for example you can notice here that we are saying position sticky here position sticky here position sticky like we're repeating ourselves multiple times and in order to prevent that we can say for example mac pro and then is mac not but css pro and then is and then open the brackets and then css inside css case and then css title and now we say position sticky so let's go ahead and remove it from here all of them and when we go to the front again it works as magic so this is the magic of using the is prop in here that you don't actually need to go on through repeat every single one how we would do traditionally like css pro and then css inside and just going through repeating this which is not the best way to do it and css is a property comes very in hand here so let's move on now to the next section which is the gallery and by this time we're going to use also the tag that i created on styles to hide everything because we don't want to see this animation over and over so let's say here hidden and since we said hidden everything is removed and let's remove this section all right this is quite large and quite dynamic when it comes to options and we have multiple stuff happening here we have the text which is a zelda selector then we have the image image and then we have also the animation happening over everything so let's go ahead and create first the markup for it okay and before we do that actually we want to open the main tag because the first background y tag or section and the others are going to be separated so we want to do this and have everything in inside of this that is going to be black so we say background black as we previously defined and then css stripes so these css stripes are going to represent the the all the uh those stripes that you see or columns that you see on the preview these ones here right so we have three stripes and we say for the first one css stripe one two and three now since we are using custom attributes also we are going to use here cursor as we have it on the preview when you hover like these ones we want to have them custom when we hover and then we want to separate these into columns because we need to call these on css and then we just say data title and then we are going to write a custom title which we're going to use on cellular selectors like css is and then art right okay and in here pretty much for this area this is the entire markup and don't you think that this is actually very nice and very small to see but we made a typo in here instead of saying css stripes i said css scribes right and we want to add everything inside of it and not how i did previously all right now we have all the stripes and let's go ahead and write the actual css for it we are going to create a new file called stripes.css and now we want this to be included into the style and import stripes.css okay and for this let's call the containers css stripes we want the base here so this is a very nice uh sample for example how you can overwrite the the actual um the base variable that i explained in the beginning and you don't need to multiply like everywhere if you are going to repeat this more and then often in a single section so now instead of 20 we're going to say 24 and then we are going to define the width width of the container and this is actually going to be also a variable and we are going to say calculate this into the base times 4 right and everything we want to display as grid for the entire area grid template columns is going to be repeat three times by one fraction right so this is going to enable us to have automatically three columns and you can basically change this to whatever you like and just repeat the content as you need if you want to build a different layout and we want everything to be positioned uh in the center so let's say margin 0 auto and then we want the width to be equal same as the variable with the defined on top we want the height usually we do this to quite a large amount when we want to use position sticky as i said to give it space so the animation is seen and you have to play around with this it's not like pretty defined but also if you count the height of the each element you can come up with a number that will cover everything and then we want some padding on top and this time we want to equal the base all right now let's do the stripes and all the magic that happens here is actually the background so if we go and just preview now what we are seeing here you can see how the red background is showing in here and the padding that we added so now in this red background we need to replace this with the actual image and that image is the one that i have already included and it's called stripes portrait and by the way all the images that i'm using are from unsplash and i'm going to link each and every one of them into the description as well and we want this background to not repeat we want to attach them to be fixed and on the center as well and what's interesting here we want to use also the width that we predefined in here to be for the image as well so it is the full width but we want this fixed because we are centering it and we don't actually want 100 or something else to be just be careful when you define here because the height is going to be automatic less set and then like this that width all right so now we see the image in here and when we scroll we know that the fixed position and everything is working because you can see how the head is becoming even shorter in here and just proving that it is working all right so let's go ahead and say to this transform and then uh actually we're going to scale this down to 0.9 because when we want to animate and using these with position sticky they work pretty nicely because when we rotate and do these kind of skew stuff they always simulate like they're moving into the left or into the right like for example this one because we're initially seeing the position that has been caused by the rotation and then as we move it goes into the left and you see these transitions in here okay so we are saying scale to 0.9 and we want this to skew horizontally like uh minus 10 degrees all right so now we see how the object is skewed all of these are on space and how they should same as on the preview okay so now we are pretty good setup for the entire structure now we want the position to be sticky and then we want to set a height and this time we are going again to calculate a base times five and by the way calculating and defining hates with this unit it's not absolutely necessary you can go ahead and just write pixels straight forward like whatever unit that you need but i'm using here as i said to just have a better structure and if we want to resize which this works perfectly fine when you want to do responses so and on the at media queries you define what you want to have the base and everything is going to work accordingly to that and then we want the transitions to be equal var to actually transition and positions all right and the transitions has been also defined here which is all and 0.2 seconds okay so now on css stripe one of these when we hover that and that's why we also define the transitions we want to have transform and scale it to one and how it was and then horizontally we want that to again actually be -10 degrees so we're not doing anything in there and background position to center and minus 20 pixels so we just see like a small slight movement as you see it in here i think i've mistyped this yes i did instead of transition i said transitions all right so we see now how the animation is happening on hover and actually again the image is going to stay in place no matter what the scroll is like you can see here you can grab the scroll bar and everything is moving but the image is staying on on the center as we cover these animations happen all right it's going quite smooth now let's just say for css stripe and when we do the hover we want something else for the before so the selector and we're going to say that to transform and skew horizontally the opposite of the parent and we want to translate that to 0.5 characters and minus 0.5 characters and in this case it's nice to use characters because we're moving a object that has some text on it so that's why we want to do this and i'm going to show you later on why we're doing this and why uh here on top okay so now that we wrote these custom tags in here that i said or attributes call one call to and call and two and call three which means columns because we want to select each one of these and give some custom css so we're going to say column one or call one and do this to 30 view height and now again i'm using a different unit right i'm not using base because i want something very specific based on that text based on that area so that's why i show a lot of stuff here that you can just freely mix in between wherever you need and make your life easier by doing that and in this case we need 30 view height so i'm going to use that and then margin top i'm going to do that 15 view height because when you do position sticky and then you have also a initial position you want to margin that from the other objects right and that actually is going to cause so initially when you see this object like this see how the margin positions it differently and then when we do a position stick is going to attach to the unit that we're saying here top 30 view height all right so now we also want the margin bottom because this when we do position sticky this is going to define when the object is going to start to get out of the screen so basically because we are going to say here like a unit of 40 view height then it's going to tell this object or the title or everything that is in there when to start moving out of the screen right and that's why we want to define always margin bottom so we are saying here margin bottom for the view height okay and pretty much we want to just have some custom for every single of these columns and we're going to say column two and also i'm uh doing this like with custom or just data attributes in here because um it's not actually the fastest way to do this you can just freely do classes and ids but i wanted to do on this project something different and just to show you that this is also possible and the markup look looks quite clean but you don't want necessarily to use this on large projects and where performance is the top priority and on this case basically it is not so we are free to do that again we want to say a margin top a different unit but we want to have these as dynamic as possible so we are going to say five view height for margin top and margin bottom we wanted 330 view height so all of these are going to be in two different positions now we want the column number three we want this to be 25 view height and we want this margin top 10 view height which is not uh any of these units in here and it's just going to position differently and we want margin 20 new high right now when we go and preview the actual thing here you can see how everything when we move has a different position just as we did on the demo okay so pretty much this is about the positioning of the objects and everything so now let's pre-write the positioning that we need also for the zelda selectors and i know that you're not seeing it yet but i like to do everything on chrono chronological order so column one before is going to be on top 35 view height and then column number two before is going to be on top 45 view height so we have again everything differently and column three before is going to be on top with 35 view height right okay now that we are all set up for this section and for the before and the actual column content now let's do the design for the stripe before so the selector css stripe before and we want the content to be something very special we're going to say here dota title so as you saw already we defined here data title and said css is art so in order to use the contents in here that we say like whatever you add in here is going to end up called by the content and that attribute is just going to show on the front the content that we define here all right so since we said that we want the object to display flex and then we want the font size to be to calculate this and the variable base divided by two okay because it's quite similar to the one that we did on the beginning and the font weight we wanted bold you can use any point weight if you have predefined in this case we want the color to be white because our is on a background that is dark and background we are going to say now background clip background clip is going to be text so basically what this is going to do whatever gradient that we use whatever image that we are going to use it's going to clip the text so let's say background click in here and we want the margin button margin bottom to be minus 30 view height since we already said that uh or we defined on the columns themselves how much margin we want we can kind of reset for the text or for the zelda selector itself right here by using margin bottom minus 30 view height and you can see now the text how it shows css is art just as we did on the demo and the things start moving on and everything starts coming together okay so for this also we want the position to be sticky and then we want to transform this and to skew horizontally the reverse of what we did for the parents so we say 10 degrees since we had minus 10 degrees for the stripes themselves and also we want again to translate to we want to translate that how much it was in the beginning yes i think it should be 0.5 characters or even less than that 0.5 characters and we want minus 2 characters all right so when we see here we can see that everything it's how we showed on the demo and then now we do the transitions and we want that to be equal to the uh transition bar okay we already said display flex actually justify content to center we want pointer events to be to none here because we don't want anything to happen when we hover over it because that would sometimes reset and glitch everything and now we are going to define the background itself which is the gradient and we want that not to repeat again we want to have it fixed and in the center also we want to cover everything and now you can see how everything is working here and also you may say like well i did background clip text which is probably better to be positioned here and you may say like well why this isn't working on some cases you have to define like webkit background clip and then text and then you need to define webkit text fill color and rgb a and let's just say 0 0 and 0 which this means that it's going to be transparent and black and why you need to do this is because webkit supports a background clip and on some cases you have to define it like this and this is one of those like niche features that you have to be careful on how he's reacting especially with text and if you're going to use blend mode or something how we are going to and we're going to say mix blend mode and on this case color dodge because that is going to dodge the color and looks the most beautiful of them all and now you can see how text is staying there on position how we defined and then if you see here also color dodge blend mode is going above the image all right so now what we have to do is the actual animation that happens onto the container like this stripe that happens in here so when we want to do this we have to define also css stripe after and we want the content just to be empty we want it to be with 100 and the height of 100 right and then the background we want to be the that's a very same gradient we want that not to repeat b and center and this time we don't want cover because cover is going to show quite harsh for this gradient which we actually defined in here this one four colors and 45 degrees and now we want to say 200 because it the gradient is going to be much more smooth because we are enlarging a lot the gradient and then we want again the blend mode to be color dodge and then we want to display this as flex we want the position to be relative because we don't want it to move from anything else and then we are going to do the animation now you can see how the object is above everything and because where they are mixing in here that's how it looks a bit strange for the beginning but still that we're moving everything you can see that actually it is working so now for the animation it's going to be named as glitch and then we want that animation to happen for four seconds and then we want the a actual cubic bizir so let's just use a random one all right and we want this animation to happen infinitely and in this case we want it backwards because we can also define uh other methods so we make it much more dynamic right and then the entire thing we want it on top with 20 percent because we don't want to actually cover everything as we move the object then the animation would be cause to see like everything going even after the container and just to make safe we give it some space and also we want to transform this and scale to 10 degrees all right now you can actually see how the animation is happening and you may say like well what this animation is doing but we have already defined this on the variable file where we have it here on the end and what we said here is that we define the keyframes and then the animation name and then we did or used the clip path property where we clipped the entire section into different uh areas like this one on zero percent two percent four percent and it is quite large so go ahead and feel free to copy all the css for this animation on the github link and that's why because it takes a lot of time to write all of that and basically you can feel free to do anything that you like in there all right so now let's say for the column 2 and after we want the animation to delay by 0.1 seconds and then we mount the animation direction yes to be alternate reverse so we see a different animation on the column two and different on the first one and the third one so now for the column number three we're going to say to after since we're saying already alternate reverse and we have backwards in here we don't need to define that anymore let's just delay the animation and save for it 0.7 seconds all right so now the animation for the third one as you can see and the second and the first one they are going to look a bit different so everything in here is going to look quite dynamic all right and now the only thing left to be done is css stripe and then on hover we want to use one of the most beautiful options we have in there which is animation playstate and i love to use this because on my cases like this you want for example uh something that is happening to pause that and when you hover and i think we did something wrong in here yeah because we didn't define after that's why it's not working and now when when you're going through the object and you see that happening when you hover over it it's going to just pause everything and as you move the pause thing is going to stay in place because we said hover all right so this pretty much concludes also the second section so let's go ahead straight and move on into the other one and for this one we are going to also say hidden so we hide it all right and we don't see it repeating and let's move on into the other one and this other one is a mixing or the one with uh apologize the one with the text on the middle and that one what we have here is a simple text in the middle the markup is quite small and then we have a tag that goes above everything the one that does this animation here like when we go through in with the gradient and then we have the image that shows on the background but this is just a background and also we're going to use a linear gray gradients so it goes above everything all right so that's that concludes what we're going to build and now let's say just a css mix that's how we're going to call this and let's say mix text for the text in section and then mix background and this is it actually for the markup like we got just three tags and you can do all of that by only doing these but the actual css it is a bit larger than the rest of these so let's create a new file called mix.css and css mix we want this mix height to be something custom so we're going to say calculate the base times 30 and you may say now like whoa this is a quite large amount well we need that because the entire div has to pass through every single letter while we do the animation with blend mode so that's why you need to have a ridiculously tall tag in here and we want the background color background color let's say just a red for now so we display everything and then display grid now we're going to use another neat trick that i do and i do this grid template columns or actually template areas not columns to center and you can have different areas you can even define with dots or whatever that you want to say that but i just do this and actually i center everything on the middle just perfectly fine and it's a quite nice trick to be used and then the height we want that to be the maximum height as we said on the top the width we want for that to be one hundred percent and then we wanted to justify content on the center and place items on flex start and why we want to do this on flex start is because where the objects are positioned then that depends on how the transition is going to happen and that's why we want these select start because we want them to start from the beginning and then the gradient to be on the right side and move into the left okay so by saving this we should be fine i think we are doing instead of saying max i should say mix because that's how we named the variable and just to confirm here we want also the font size to be base and actually why we're not seeing the changes i forgot to do that is to go into the styles and then just call here at import mix.css and we are just fine and you can see the text in here the background which is this red and is almost going to blind me off let's do this to black because we don't need any other color even though we don't need it at all because we have already defined and now we want to define the aspect ratio right we're going to define here the aspect ratio and we're going to say 16 by 9 and this is pretty neat feature to be used because it it's going to preserve the entire content on what you're doing and have it just placed in order and then we are going to say background url and we're going to use the image that we had here which is sam.jpg and we want that to not repeat be fixed on the center and cover everything all right so we have here also the background which we want to remove and we see here as well the image with the text inception okay and basically the font size is being defined here so we can use it even later but the font weight and everything we're going to use into the its own um tag and we're going to say position relative so we don't let anything go out and mix blend mode is going to be hard light because we want to combine also in between images and everything okay css mix before is going to be content to empty and then display flex and then width is going to be 100 percent height is going to be 100 position is going to be absolute top to zero and left to zero background we want this linear gradient to top we want that with black we want it transparent and then again black to cover 30 percent and why we are doing actually this we want this not to repeat and to be center also cover the entire area cover here oh sorry over in here so why we want to do this is because when we are starting to scroll here as you can see when we do this we start with black and then we have transparent that makes to show this image because this image actually is underneath the gradient that we were doing with before so the image will show slightly and then again we're doing black by 30 so while moving it will hide everything and then you see these effects happening here that the image once shows and as you keep scrolling it moves out because we're having this as cover to cover everything once we start with black transparent and then again black with the area of 30 all right so we should be fine by scrolling now in here as you can see here the animation is happening as well let's move for now uh mix blend mode because we don't actually need it in here for the moment and you see how the animation is happening while we have the text on the top and we're going to stylize that okay now for the mix text we want the grid area to be center and that's the best example on why we use that so font quantum weight is going to be bold and now the text is going to center into the uh it's going to go into the area that we defined with uh css grid and we want the color to be transparent because we're going also to clip in here the uh linear gradient and we say background clip background clip text and then again webkit background clip to text again we want the text to be transparent text fill color to transparent again you need to be aware about these features and just make sure that is cross browser comfortability and it just works fine because it's quite strange sometimes how it reacts and then we want the background image to be the gradient but this time we have another another gradient because because this the other gradient is a bit more different than the initial one it has uh one more color and actually it starts uh differently so uh that what that's what looks much better for the text and then we want the background attachment to be again fixed and again on this one we want to use aspect ratio 16 by nine and actually to understand what's going on here and knowing that aspect ratio is working just go ahead and play with it and you will understand how it actually goes and for this we're going to do position sticky so now you can see how the text is taking the gradient and we have defined the position sticky and now we want this to define where do you do we want to have it so we are going to say on top to base and again we want to display this as grid and we want to place the contents to the center so it's going to center by itself and z index to zero and then the margin button we want that to equal the base because as i said we want some margin as when it meets the end of the section it actually is going to a simulate a effect instead of just going outside of the screen and then in this case actually we want mix blend mode and hard light all right so now you can see how the text is actually taking the colors and when we go through with hover like for example above the image you can see here also the blend mode working just fine in between the text and the actual image all right so we are quite uh almost there but there's some stuff to be done like the background and we are going to position this to grid area as well center and then we're going to do width to equal base and after this the height to 100 percent and the flex to one because we want this to just uh take one area from what we defined and we want to uh justify itself to the center right and then transform this to rotate 30 degrees translate horizontally minus one character and why i'm doing that let's just go ahead and add some background red did we type in properly how we want it mix background and then we have here mix background and we want this actually to have no pointer events and we want the mix blend mode to be overlay so it mixes together with the text and then we want this on top by zero and then we want to blur this because then the animation is going to be much more smoother and you can see now how everything is moving here but since we said background red we don't actually want that but just to preview that everything is working fine so now let's go ahead and actually do the the fun part and remove this background red that we define here let's go ahead and do the actual background and this is going to be a bit tricky but you can just go ahead and play with linear gradients and have like a different color into each section or however you want and for that matter you can even have an image or anything that you like but how i did is linear gradient all right and then i said for linear gradients to the right and then i did transparent so it starts with transparency and it just doesn't cut it like a very sharp line and then i said black and then again black to have it a bit more uh thick so you have a better transition transparent again and then black again so we simulate these spaces where you have darker sections and then again transparent this time we're going to switch to white so we have that highlight above it again transparent again black and on the end transparent okay so basically just to go through everything once more like we're doing transparent first then we're having a section that is going to be a bit thicker with black color again transparent black transparent then a section with white which will will actually highlight everything now if we go here everything should work as expected and you can see now how we have an area that is darker and then again a section here which is more brighter and is going through everything so this pretty nice animation happens as we go by the end and you see the scroll bar here the animation with the image happens so pretty much this is it also what concludes this section as well and now we're going to move on to the next section all right so since we finished this section as well let's close these four ones and again let's use here hidden so we hide this section as well now to do the next section which is the actual gallery and this has a bit more of a markup and we are actually going to do this one here and what we have here is that we have an object with aspect ratio one by one and then sell the selector text in here and depending on what the content is going to be either video or something then we're going to just place that all right so let's close it in here and get started with the gallery and of course we're going to use in here also custom tags just say css gallery now here we need also an input and what that input does we're going to use it as checkbox and just let's name this as wide because we want to select it and what we need this checkbox is because we want that to be the button that is going to go over everything right so this is the role of the checkbox actually that is going to check in here so it becomes everything wider right okay so input type checkbox and then we want the gallery item and then inside of it we want a image and the source is going to be image gallery and just image number one let's just say here image one so we have a title we want also this to be the cursor and gallery item number one because we are going to need this to select all these items now gallery item number two is going to be we're going to need the cursor here too gallery number two and then again image and call the source to image gallery two okay gallery item number three g3 again but this time we're going to have an iframe so let's just pretend that we are doing that but instead of it let's add the image that we have already here gallery one again just so we see some preview what's going on and then g4 let's do the number two okay so we have about a bit of change in between them image two image three and image four right okay and actually we're going to use the cursor on all of these but if you want to you just don't define it and it's perfectly fine all right so basically this concludes the markup for the gallery itself we don't need something more than this but we are going to use um the pseudo selectors for the number and i'm going to show you a neat feature there with a counter as well okay so now let's go ahead and create a file called gallery.css then we're going to need to import that import gallery.css right now let's go ahead and write the actual css okay so gallery itself is going to be display grid and we want the position to be relative so it concludes everything inside background black which actually you don't even need to specify because we already have black we want to place the items into the center and then the color we want it to be white then counter reset let's name it gallery and this is what actually is going to help us add these numbers into the right of the gallery so we reset this counter and now let's do the gallery items we want to have some variables here and scale that to 0.6 because we want to have some images and then when we animate to actually go to the initial scale and just fill in the space we want to transform transform all of these and then do the scale which is going to equal the scale variable and then rotate and we are going to have here rotate to zero okay what i'm doing here with this variable i'm saying scale which initially is going to be 0.6 and then rotate that to a variable that is going to equal rotate but if it's not defined it's just going to be zero and why we're doing this is because when we want to hover or do any kind of action we actually just set the scale or the rotate and we don't need to write the entire transform property okay so let's say position sticky and then display flex for this item we're going to say transform to as we said transform here variable so we are going to transform this to scale 0.6 and then rotate and we want the transition to happen by the amount that we set on the variable file we want this to top to be zero and we want the box sizing to be border box width we want 100 view min and the height 100. new min okay so this unit it's actually can be also anything but i did it this way so if you scroll or if you resize or anything it's going to just take in consideration the minimum view or viewport width or height and then we want to center everything so justify justify content actually to center and then we want to specify some radius and let's say here the base divided by five why we want to do that because we can also play with it like depending on the view view height or the minimum view height and you wet it would transform the radius also which is pretty interesting to be used here and it just looks uh fancy all right gallery and you may also hear me do a lot of stuff that don't actually make any sense or there's not a actual reason behind it but css is css so sometimes you got to do stuff like this when it looks good it looks good so why not all right so every direct child we want that to be outlined to none and actually we're going to reset some stuff here because for example iframes when you select them and stuff and when you play something inside of those they create this outline so that's why we are resetting here and the aspect ratio initially is going to be one by one so that's why we are doing this and we want the object fit to be covered so it covers the entire area we want again to use border radius because we want that radius to apply since iframes will not take it from the parent and we can can't actually use overflow hidden because if we do overflow hidden then the cellular selectors won't be able to go above the parent and do the animations that we did on the transition for the gallery and what i am talking about is actually this one so that's why we can't use overflow hidden because then in that case we won't be able to see these and since some of these objects are going to take or inherit the border radius then the inside child is going to but you feel free this one to even remove it completely and we're going to keep for the moment and then we want to define in here the width which is 100 and then the height 100 percent and then the box shadow and why why we want to do the width and the height 100 because we already said cover right and and then and we want this to fill in the entire area and but it's not going to stretch or deform the shape that or the content that we define there and let's just add some random shadow and quite large actually we're going to move horizontally 60 pixels from the top to zero and then blur or scale that everything into 180 pixels so when the object goes above the other one is going to do this shadow and actually when we do the wide mode that is going to cover the number in here so that's what you can do with shadows and just cover everything and just a slight like spread of five pixels okay so we have this black and now let's do another one which is going to be 100 pixels and this is going to just cover the vertical axis and blur that into a large amount and again have it as black and on the end we want for every element to have the transitions same as we defined on the variable file okay so by now we see the images in here we see the checkbox on the top which actually does nothing at the moment and we see that it has the radius but right now when we move on and scrolling you can see also that the box shadow is happening just to prove the case we move on with the other image and actually we have called the last image wrongfully and what have we done here oh yeah because that doesn't exist jpeg okay so see now we have the images with the box shadow okay so let's move on and since we set the or set the styles for every one of these now we're going to do the checkbox what happens when we select that and i do on this order because i want to have it to transform right away and you understand it much better and since i said with a custom attribute of wide we're going to say when this is checked we're going to say when this is checked then the gallery item we want that to scale to one right because we already said in here to 0.6 and when we check this and it goes into the white mode then it's going to scale into the actual size and then rotate that rotate that to zero and the radius we want a custom but much smaller radius of 10 pixels and now comes the important part aspect ratio we want to convert to 16 by 9 right and then we want that to top 10 view height because we want some space and not to fill the entire container and but feel free to do this even full screen so that's what looks better to me and that's why i did and then we're going to have the index of uh we can say 10 like a ridiculous amount here just so it goes above everything when the item is set to check because it could go even further and actually if you want to have another object underneath it this makes it much bulletproof so to say and then the view width we want this to be like at least 80 viewers and the height we want that to be 80 the minimum of the view right so we have some spaces in here when we actually check this checkbox on the top all right so this is pretty much for the gallery item so let's move on and say what happens to the children when we do the actual uh check so wide checked and then gallery item after we want that to be on top and calculate or actually more number on top plus 10 human and what this is going to do actually is just take this custom variable and add on top of that a unit of 10 minimum of view width or you hide whichever is smaller because in that way then you're going to see the transition into the after elements uh going like even slower or on different pace with a parent as you see here for example when they collapse then these move differently depending on if it's on wide mode checked or not checked all right now let's do the actual gallery item after content so content is going to be um starting with zero so we want that to be counter name and then the gallery and as we said here in the beginning we're going to reset on the top here because we don't want the items to go or be counted beyond that so when we see a counter reset on the parent in here css gallery it's going to basically count these as we are saying now into the content count these but you could also do it with a custom attribute and just count that here but in this case it's pretty nice to use the actual um counter reset and then we want this to display flex we want the i'll to align the items into the center and the height we want to be that to two characters just in case that we have something else and then two characters again and i usually use characters because then depending on the font size the container itself is going to expand or contract based on that so border radius let's do a ridiculous amount of 400 pixels and padding one character because we want also a bit more character more padding and based on that character is going to uh have it so backdrop filter now is going to be blur actually but we want a large amount so it kind of gets only the color and you don't actually see the object underneath and then we want a white color we want the font size to to be calculating uh the variable base divided by four and then again for this one we want the position to be sticky and we want on top to be this variable that we mentioned earlier to be number top and then again margin top we want five view height and why is this is that uh when we have the gallery item the actual number here is not going to start from the top because now initially we're saying margin top so before it sticks to the page this is going to have some space on the top and then afterwards when that meets the top is going to stay on the position that we define which we're saying here top var and then number top or the number that we want to stick that and actually always margin button will force this to move out of the screen when we define that and we want to usually that to happen in between 20 of the view height of the port while we are scrolling and now the interesting part we see counter increment and then gallery the one that we are resetting at the parent and also we want some font way to be bold and also we want to transform this why we why we want to transform this is because because we are rotating the parent and we want to rotate this back in to the into the initial position or just vertically we don't want that to rotate necessarily with the parent and we need to calculate this by one so this way we're going to reset it and then we want to scale that to two so we have it much bigger than the actual um html or actual code that we see there right and you can see now the number there all righty tight so scale to two and then we want always this to make sure that is going to stay on top of everything and then when we define for example the z index when we check and everything this is going to make sure that it stays on the top and then we want to transition everything based on the transition variable that we predefined all right now starts the fun part where we are going to define for each and every single element in there a different unit as we we did before with the mix thing and the stripes one so let's say g1 which is actually the first gallery one item here and again we're using custom attributes here but maybe you should do it with class and id and whatever you like performance is not important here but we want to use these i don't know why so g1 and then we open the brackets we want to rotate this to minus 4 degrees and then g3 which this actually helps us whenever we use rotate in here and whatever we are doing to just uh reset everything and then what's the best you can even use some set the selectors the attributes and it will work just fine and that's why we say he rotates so basically when we have an apparent minus four degrees this is going to reset the four degrees and it's going to stay vertically because as you can see on the gallery itself we have different rotations because these all collapse into each other but they are rotating slightly into the right and to achieve this effect that you see in here and that's why we actually need to use a variable here alright so g2 not 3 is going to be rotating minus oops minus rotate minus 8 degrees and the number on top is going to be 20 view men and again feel free here to add any unit that you like or amount that you like to just achieve a more dynamic effect so this is what i'm going i'm actually i could also multiply this but i'm doing this manually and again we want to have the rotation minus 12 degrees for the third one and we want the number top to be 30 out of human number top to be 30 up the union all right so now the g4 is going to rotate or minus 16 degrees and is going to be number prop number top 40 human right so by now we should see the changes here and we actually do and you can see how they just beautifully attach into a different position and you can notice here how they collapse and that's actually what i meant when i said like with um pointer events and stuff and the rotation that you want to have it more dynamic and especially you can notice here in between the blue ones and these how they change right but you don't necessarily want actually a cursor here i'm just doing this in case that you would like like to have this as a call to action all right now let's do the after sell the selector and then we do the content as empty width we want to 100 the height is 50 view height and then position sticky and then bottom 0 z index 2. so now comes in handy why i set z index 10 before and now we want this underneath so what this is doing actually when we fade in here is going to show a darker area so we even have a much better effect like this one that this the item is fading in going into the center and then you see the content so that's what we are doing with this cell the selector on the gallery tag the index is going to be 2 and then the background is going to be linear gradient and we are going to say to top we want a black color then we want that as transparent so basically we're just dividing that into half and display flex so we take the height and the pointer events we want to reset to none in case that we have anything on top and just reset it so now we should actually see the preview and as you can see now the gradient is happening here and if we actually inspect this we're going to see that down there so the gallery after let's add this into the bottom so we know what's going on and you can see here and now that we are doing also pointer events we just make sure that no matter what is not going to stop any click or anything that we want to have here all right so we are nearing the end of this section so what we want to do now is the actual checkbox and as you can see it's now staying on the top and not having any function so we call that check box with a wide custom attribute and we're going to say display flex we're going to add this to position sticky as well and then we want that to be on top with calculate because now it's quite interesting what happens here because we want to have the checkbox on top on the markup because when we check this we want to check for the siblings and then do the action that we are looking for so that's why we need to have checkbox the first sibling in here so we can apply a different style when it is checked to every other that goes beyond it and that's why now when we say position sticky we're saying to top 100 but minus 110 pixels which we deem that is more than enough to stay in the bottom and just not go above the entire viewport and not actually see it and we want to position this as 110 pixels from the right and you can see sometimes i use pixels for objects like this that i want to make sure that it always stays there and it doesn't move on because this is more than enough for the thumb for example if it's a touch screen or something and just to make sure that it always stays on the same uh place and let's do now z index to 100 so it goes above everything even though we had 10 and nothing is going to go above this but when we do also preloader we want that to have about anything so we can say 20 in here and then we want for this outline to none actually we want the width to be 60 pixels and the height to be 60 pixels justify himself into the right and then appearance to none because we don't actually want to look like a checkbox on how it does and then we want to define also the cursor here cursor dark and on hover because any time that we are actually doing this we are going to hover it okay now let's add the background and this time actually i haven't defined a variable which i'm going to do now but first of all let's go and copy that svg icon and let's go and create a new variable here which we're going to say full screen and then paste the svg all right now we're going to say here variable full screen and then we want that to not repeat stay on the center and we want that maximum 24 pixels because that's the amount of the icon and it should work all fine and as you can see we have the icon in here when we click the animation happens isn't this magic isn't this something beautiful and i'm sorry but sometimes i get excited i love css and when these things just work is um amazing all right so what we want to do now is to actually um have also a margin so when when we do like uh this one for example here when we check like we want also to define a margin that it doesn't actually show like this and now you're seeing this way because on this preview actually if i would have shown like into a new window then it would actually um just collapse in here so to make sure about that we're going to say wide and when it's that checked when that is checked we also want the gallery i-team to have quite some large margin on the bottom gallery item to have some margin on the bottom margin bottom of 80 view high and what we're actually doing here is that we're going to have some margin make sure that the item is going to have a clear path when it's on full uh full screen or widescreen or aspect ratio 16x9 or call call it however you like and it doesn't collapse but when we scroll only that the image can go above the other and not when we switch the button or something all right so this pretty much concludes this section as well when you check it's going to go wide mode and here is just a preview so um by this we conclude this section as well so let's move on without losing any more time into the next section all right so gallery is finished let's say here again hidden and let's move into the other section we want to have it hidden as i said just to not see a lot of stuff and this one is actually quite simple and we're going to say to this stick list as a custom tag and then we want an item and why we want to do this is because actually we have in here just a number and then some tags with title and it's pretty small markup all right so stick item is going to have another tag called stick letter and i could do this with so those selectors and everything but i'm actually doing with tags in here because i want you to be able to add anything that you like not just numbers but you can have emojis or numbers or letters or whatever you like and then let's say here's zero one and then here we can say stick title and then on the stick title you say did the did you subscribe thing and then stick text and let's add like lauren times two maybe for now and let's add here a break right let's just verify if we are seeing anything here yes the text is there okay that looks fine to me now we don't need for the moment to add any more elements and we can copy that as usual let's create a new file called stick.css and then um we want that to be called here at import stick.css or instead of saying stick let's say list sounds much better actually instead of stick let's rename this to list all right now let's do the uh stick list we want to display flex and with 100 and maximum width maybe to be 60 view width all right so when doing this and you may say why sometimes you're using grid sometimes flex and they have their strengths and weaknesses depending on what kind of layout you're trying to build and usually when i want something specifically positioned i use grid and when i want to build a general layout but something that i want more dynamic and that potentially is going to be part of another element and then i use display flex and then we want to center this so we say margin 0 to auto on the sides and then we of course want some color to be in the white lex direction column because we are going to generally manage this vertically and then the line height since we have a lot of text i usually do this like 1.38 because i find that works um better for all the font sizes out there but this could be anything that you like and depending on the font family and everything and then we want this position relative i usually specify this so we contain everything inside and margin bottom is usually a 40 view height just so we have that animation while we are scrolling same as we did here on the preview and it doesn't just cut it off but it has some space before we move on into the next uh section all right color white and we have the tags and everything it's working so far so let's go ahead and do the letter now stick click letter the font weight to bold and then font size we want to be equal to base we want that on top to be again base position sticky and the height we want that to actually be the minimum of contents it doesn't go less than that and the margin right we want that to be equal to base right so maximum width for it since we have two characters we want to do that to two characters and it doesn't go beyond that and take the entire space in here so basically for me in this case works two characters you can have anything that you want to and now stick item uh we want this to margin to top same as the base because we have one letter and we want to have something um or some space before the position sticky takes effect so display flex again and now stick content and that stick content is actually the entire actually we forgot to wrap it the stick content and when we are going to add the title and the text inside of it because we want to contain this as we have different units and that's why we saw it on that way and now it's uh properly separated even though quite narrow screen but just for the preview as i showed you the demo on the beginning all right let's go back to the css and for the stick content we want again to display flex and as i said you can use here is for all of these and not to repeat the display flex and then we want flex direction to be column again because now we want the text and the title to be vertically and then stick type we want that to be font weight to bold and font size bass so it is actually the same size as the number that you see in here right so now we have what we saw also on the preview but as you can see the text is not sticking because we have to define that and we are going to do stick title first and then stick text the gradient let's say background and variable to gradient alternate which is the secondary gradient in here that we did in the beginning and it is a bit more different it doesn't actually go to 45 degrees but it goes to bottom and why we are doing that because we want also the rgb or the dark color to show there and simulate that fading in effect that you see here like for example it comes from the bottom and when until it sticks there it shows this effect as fading so that's why we are using the alternate one and now basically that you see in there we are going to do the clipping thing so in background clip to text and webkit background clip again to text webkit text build color rgb to zero zero transparent can hand this to anything you like background size we want that to cover and background position we want that to center we don't want to repeat this necessarily no repeat and then background attachment we want that to be fixed okay now you can see how everything is working properly and the number is sticking in here the gradient is showing and yeah this is pretty much what we saw in there but now let's just create so we see here also what is going on and actually we've added here wrongfully we want it like this we want to select the item and when i keep command and shift and then hit the down arrow i am going to duplicate this did you and then repeat again this one and say here sub and now that we scroll did you sub so maybe now it's a good reminder that you should subscribe again because you guys only 10 watching this video or subscribing so and that will help me a lot to create much more uh content like this one that you see here all right so basically this also concludes the um list section and now from this we are going to move on to the next last section and let's hide this again yeah we can confirm that is hidden let's close these two files and let's move on into the final one all right so now let's go ahead and do the last part which is the actual last thing that we did here on the mac and the horizontal scrolling so what we're going to do in here is that we need a parent that we is going to wrap everything off and then the entire content should rotate against its parent so it shows like this vertically and when we scroll then this actually is sticking to the top rather than the left because that's not practically possible so let's go ahead and do this and then we're going to actually keep this large screen all right now we want this slider to go outside of the main because we want this separated and we're going to use overflow hidden and that's why we want to separate and actually i'm writing on html css so my brain is quite tired right now background wide and then slide wrapper because we want to wrap everything and cut off and then horizontal slider or slide and then inside of this we're going to have the items and for the first item we want to add identify it as 0 and that is going to be just the title but you can add anything else that you like here and then s1 and we want to have here also a image that i already have imported in image and then image mac 0 mac 0 and let's just see if we already got the image yes and it's uh fine working there now let's go ahead and just create another one so we are going to see the action happening and image image mac 0 dot png mac all right let's confirm that and yep we can see that all right let's say here mac one instead of that yep we see those all right now let's go ahead and do the actual styling we need for this to create a new file called horizontal or call this slide.css and then on styles we can import that slide.css let's go ahead and do the wrapper first slightly wrapper we want the first thing overflow to be hidden and then the height to be honored view height display to flex position relative as we want to make sure that nothing goes afterwards and we want here a custom color because that's the actual um image color on some of these cases and that's why we're using it and we want the color to be black we want this to make sure that it stays on the bottom now let's do the horizontal horizontal slide we want that to be 100 view height and now listen the trick that we're doing here so basically uh what i'm doing here is that i'm showing actually the the entire area is going to take on the width axis the height axis of the content so basically this entire container is going to be rotated and then rotate back so it enables us to scroll and that's how we are going to do this all right so we're going to say width to 100 view height and then the height is going to be 100p width overflow y or vertically is going to be automatic based on the content and overflow horizontally hidden so that's it transform origin we want that from right to top and then we want again to transform rotate everything into minus 90 degrees and then translate 3d all the content minus 100 the view height right and then 0 here and overflow overlay why i'm doing this is that when the content is larger and you want something not to affect the content and stuff then when you do overflow um overlay the scroll bar is going to show above the content but it's not necessary to use so you can even remove this slide item so now let's do the style for the single item that is going to be on the slider and let's say width is going to be maximum of the content and then the height is going to be 100u height so we want to contain that into 100 view height and why i'm using this because a lot of tricks are happening here with transform which is rotating and we need to specify the height that we want for the content to be contained and the best one to be used in here since we have a large container such as this one then it just works fine by using the height and everything like this because then you make sure that when you scroll horizontally everything is going to scroll but this is not going to go above the content or cut it or anything so that's why you define on this case 100 you hide depending on your design you can do whatever you like all right now now as you can see here the content is rotated and of course we don't want this so let's go ahead and do the styling for it and to do that we are going to say to the slide item uh transform origin again from left to top because now we want to rotate it on to the right side transform rotate 90 degrees because on the parent we're saying minus and this one we say positive so translate and transform rotate 90 degrees and then translate 3d from zero minus 100 view height and then again zero and we actually want to scale horizontally this to one and are we seeing the changes actually [Music] what we're doing wrong here let's go ahead display flex and then align the items on the center then we want to position this on sticky punch size we want to calculate this and var bar base divided by 2 and the font weight we want that to be bold and we are going to actually tackle this problem that is happening here um in a moment but let's just finish the styling for the text as well and 0.1 characters so we can just confirm that is working all right okay we are seeing something everything is properly rotated we see the title okay nice so good so far okay i think we actually don't need any more style for this but what you can notice in here is that the image actually is quite large we want to contain this much better and just have it show as on the presentation so let's say slide item image and we want to contain this by vertical axis because this object looks kind of same on vertical axis and now yep we have smaller objects and they are centered they have a lot of space now what is missing here is the position sticky so uh we are going to define all of those and as i did previously i am using these uh custom attributes here just to position but again you're gonna have a class you can have different tags and inherit the style however you like so this is for the presentation and let's do s zero and that is going to be in the top um 50 view height and actually this is um more than enough to just stop into the middle and move on with the rest of the content all right s 1 is going to be 49 and why i'm doing this is because i want a one less view height so i make sure that this is going to actually cover the entire title let's copy this into s2 and we want this 95 and how i'm doing this is that i have pre-calculated the images if you're going to have something fixed you can still just say like for example calculate to the base or the width and then multiply that but i haven't done that and i don't have fixed width or height images and that's why i have to do manually and you can play along with it and just see like whatever shows better and s3 is going to be 128 view height and pay attention that i'm saying here view height and i'm all um all the time referring to the units vertically even though we are doing the horizontal axis and this is the case that i said before because we have to do this since we are rotating all the content all right 128 for the s3 and then s4 we want it to be 148 and s5 we want or we want that to be or let's define first s6 actually because we are going to um define that later on because the s5 actually or the the one before the the text that goes in here this one contains the blur effect and the background on the underneath so that's why we need to do that all right so let's do this s6 now s5 and we're going to do here background linear gradient and we're going to say to right we want to start with transparent and then we want the same as the background f2 f2 and to have this for around 40 percent and margin on the top we want that 10 u hide so we make sure that you're staying in center and the width we want something ridiculous like 300 view with so it goes on the top and then everything is going to be covered and backdrop filter is going to be blur so we have a blur on it and pretty much uh we should see those effects happening here but yeah first uh of all we need to define the rest of the content for this area and that is a slide 0 mac pro s1 and then s2 s3 s4 and slide item s5 which is actually empty and s6 is just the title so we're going to say power the pro all right zero is the first image one two and three let's see if we're calling the correct images they collapse the backdrop filter goes above it the white background and then the text all right what we want to do in this one as well we actually want to do the horizontal slide ups horizontal horizontal slide webkit scroll bar and let's just do appearance to none because we don't actually want to see the scroll bar right yeah now the animation is happening or the transition and everything uh as it should and by the way i'm going to share with you guys the content so this is going to be uh on github.com astrid slash youtube and then inside of that folder you will see this episode which is the second one on css and there is going to be the entire content otherwise i'm going to um point out that link into the description and the first comment so and let's go just and see again what we built in here like the gallery itself and the headline and then the fading the gallery with the images like this with widescreen and then the normal text that we did before and the last one the horizontal layout and i hope that you have learned something new from this and if you did that means to me a lot so thank you very much and see you into the next one but before that please again make sure to subscribe also check all the links that i have attached into the end of this video and make sure to follow me on twitter codepen or github thank you very much for joining and see you into the next [Music] one

Channel: Astrit

Views: 6,472

Rating: 4.9814386 out of 5

Keywords:

Id: PpheLuPbP5Y

Length: 122min 47sec (7367 seconds)

Published: Sat Mar 06 2021

Reddit Comments

[u/gniziemazity]

Wow... CSS is becoming more and more powerful!