CSS basics for beginners

in this chapter we talk about transform property and how you can use it to manipulate web elements by definition CSS transforms allows elements styled with CSS to be transformed in two-dimensional or three-dimensional space in this course we will be talking only about two-dimensional Transformations and for two main reasons first of all in real life projects in most cases you will be using two-dimensional transformations secondly 3D is such a broad area that it wouldn't make a lot of sense just to briefly mention some properties so it's a topic that requires some time and many experiments to really understand it so it's definitely something worth exploring but maybe it's a separate course okay let's see together how to apply a transformation the starting point as usual as a base it's a basic HTML5 document and all I'm doing is adding a development let's add some style to this development width and height then a background color and finally let's move the element or in the center okay to apply transformation you simply have to write down the property obviously so transform and then you have to define a function I'm using the scale function now and the parameter for the function and for the skill function you just have to pass it the multiplier too so as you can see we just doubled the sides of the element so it's super easy to apply transformation you just have to write down the property and the find a function and pass a parameter to the function now let's see together um the uh two-dimensional transformation properties that we can use so it's better if we use the transformation inside a hover selector and now since we now as you can see okay this is the effect we have been talking about transitions in chapter one and two so let's apply transition to the transform 0.3 seconds okay so let's start from the scale function as we were saying before the parameter of the scale function is a multiplier so basically you're saying uh resides the element by multiplying its sides by the parameter so if you want double the sides you can just pass it to two one means do not change the sides and obviously if you want to reduce the size by half for example you can pass it a 0.5 and as you can see now you're reducing the sides by Alf now if you just keep if you just use one parameter the function is assuming that you want to change both sizes so both width and height but you can specify if you want that you want to apply a change only on the y-axis for example and let's double the sides on the y-axis and as you can see now it's affecting only the y-axis and using the X instead of the Y you are stretching out the element horizontally you can also use two parameters if you want to use two different values for the x-axis and the y axis so let's go back to the scale function and then you can use two parameters like for example 0.5 and 2. the first parameter is for the x-axis the second one is for the Y so what I'm saying here is just squeeze the element horizontally and then stretch it vertically okay so this is all about the scale function now let's switch to the uh translate function the translate function is used to move elements so if for example I Define here 40 pixels I'm saying a movie as this this element by 40 pixels and as you can see the function is is pushing the element to the right so if you use just one value you are you the function is assuming that you don't want any change to happen on the y-axis you just want to move the element on the x-axis and if you use positive values you are moving the element you're pushing the element to the right which um which basically is the the direction of the positive values of the x-axis if you want to move the element to the left you can use a negative value now as you can see the effect is the opposite but if you want you can also move the element at the same time on the exact x-axis and the y-axis by passing two parameters to the function like for example 40 pixels and 50 percent now as you can see we are not only pushing the element to the right but also to the bottom so giving using positive value for changes that occur on the y-axis means pushing the element down if you want to move to push the element and move the element up you have to use negative values and now you can use obvious obviously different units as you can see here I use percentage and when I use a percentage on a transformation or translate transformation um the your not the difference with using for example percentages with position like for example using a left 50 with the reference point the reference is the pattern we Transformations the reference is the element itself so you're saying move this element down by 50 of each side right and just like we did with the scale function uh you can also specify is in Translation over a just one axis and like for example so we we were saying if you don't specify anything you are already moving the element only along the x-axis but you can also Define Translate Y if you want the element to be moved along the y-axis only all right perfect so this is all about trans translate let's see another one the rotation rotate so the function name is rotate and it's obvious obviously used to rotate an element so I have to Define an angle like for example 45 and then the unit can be degrees so if we go over you can see we are rotating the element by 45 degrees if you want to change the orientation of the rotation you can just use a negative value and you're going anti-clockwise perfect now just like with the scale and translate you can also specify rotation around this in just one axis like for example rotate around the y-axis by minus 45 degrees now the final result you can see visually you can see just the element being squeezed and that's because we are working two-dimensional space right now so uh there is no perspective at all so you're not you're not actually reducing the size of the element you are rotating it around the y-axis so this is the y-axis you're rotating the element around this axis so visually you can see that it's reducing its width but you are actually rotating it so keep in mind that we while working with two-dimensional space in in two-dimensional space the effect will be flat because there is no perspective okay so this is all about rotation let's move to the skew function which allows you to skew an element um by a given angle and for example one more time I'm defining degrees here and as you can see I'm skewing the element and once again you can specify an axis like q y and the final result is going to be different okay so these are the main two-dimensional transform function to keep in mind so scale translate rotate and secure now one thing you may be wondering why should I use a transformation like for example scaling an element up and down instead of changing its width and height well let me show you probably example so let's remove all of this let's move to the HTML let's remove the Deep element as well and let's add in an ordered list with three list items okay now some Style to the another list just want a text align Center and a margin of 6 M and zero then for the list items I'm giving them a with a height a background of Gray and display inline block and finally just to remove this space we can remove the closing tags okay all right finally let's change the color of the square in the center and type 2. background a darker gray so we were saying before why should I use when should I use the transformation when should I change another CSS properties like for example width and height so what's the difference let's apply transformation to this element we apply a scale transformation of by two so let's double its size now as you can see by applying a transformation I'm changing the sides of the element as I was expecting but I'm not really affecting the elements around so one important thing to keep in mind is that while using Transformations you are not changing the flow of the document which means that the element even though visually has changed it's still occupying the same space as before so basically if I remove transformation this element is always occupying this space here so I can scale it I can even rotate by 45 degrees and it's changing but still no effect on the other elements so what's the difference for example with a change in the width property let's change the width to 300 pixels now as you can see if when I change the width I'm actually affecting the other the other elements around so I'm pushing the other list items because the width is changing and the space occupied by this element is different now so this is one of the main difference to keep in mind when you use a transformation you are not affecting the elements around one more thing if we apply a box shadow to all of our list items so an inset box Shadows just with the spread value of 10 pixels and rgba uh black so basically I'm just creating a border now as you can see when you change the width you are actually affecting only that specific CSS properties but the Box Shadow is not really changing while if you apply transformation like for example you're scaling the element and doubling its sides the Box Shadow is affected as well so and it's not only for the Box Shadow is for every property which is applied to that element so for padding margin border so when you double the size of the element and so you apply transformation you are affecting every other property applied to that element so another important thing to keep in mind okay and finally there is an important difference in terms of performance so now everything is really you know fast because I'm using really basic elements and basic Transformations but when you have a lot of elements a lot of stuff so let's say in a real life projects and you can find a lot of examples from Cody house when you have a background images and the texts and other stuff then applying a transformation over a another change of a CSS property is always better in terms of performance and that's because transformational Hardware accelerated meaning that the browser is expecting some changes to happen for that element because you're applying a transformation and performance is better so keep that in mind okay now um one other thing is another property I want to cover and it's the transform origin because by default the center of transformation it's the the origin is always the center of the element so here is the transform origin Property by default it's 50 by 50 meaning what that this is the center of the transformation but I can also change this Center transformation like for example using 0 0 and as you can see I'm changing the final result so this is the new center of the transformation if I remove this scale function keep in mind this is the origin of you know the y-axis and the x-axis so this is point zero zero and you can change the transform origin by using different kind of units like for example pixels M or percentages like we were doing before and this is really going to affect the final result of the transformation like if I wrote it by 45 degrees we have this effect like this square is falling if I remove if I set for example a center center for the transform origin the effect is different okay now can I apply multiple Transformations at the same time and obviously we can so for example here so let's move transform origin so to apply different Transformations you have to Define different functions inside the same property here for example I'm applying a Translate and the rotation so translate by 40 pixels and rotate by 45 degrees right so you have to separate each function using a space now remember we were when we were working with transitions we had to use a comma to separate multiple transitions in here you have to use a space okay one thing to keep in mind really important is that the older that you use to apply the Transformations is going to affect the final result meaning what for example here um I'm applying it to translate first so basically I'm saying move the element to the right and then rotate the element by 45 degrees so the order is apply translation first and then rotate the element but if I use a rotation first so what I'm doing here is um what I'm saying here is a rotate the element first and when you rooted the element you're actually rotating also the axis related to this element now the new x-axis is this one and this is the y-axis so if you want to move the element around the x-axis axis now you are pushing the element in this direction here so therefore if I'm applying a Translate after rotation as you can see maybe higher value it's going to show you better okay as you can see now I'm not moving the element in this direction anymore I'm moving the element in this new Direction which is the new x-axis of the element so keep in mind that you know applying multiple applying multiple Transformations means that you have to keep in mind that the order is really important because it's going to change the final result okay and what if I want to apply let's say for example I want to um when you go hover the element I want to bring the translation back to zero so to the origin let's say I go over the element so let's apply a transition class 4.3 seconds now as you can see I go over the element and what I get is that yes translation is back to its origin zero but we have no rotation that's because when you want to apply a transformation to an event trigger like for example a hover effect you have to remember to apply all of the Transformations if you want to preserve them even if there is no change so in this case if I want if I only want to translate the element and keep the same rotation I have to define the rotation uh again now as you can see I'm moving the element along the x-axis and there is no change in the rotation otherwise the function by default is going to override the original rotation backing by giving it a value of zero perfect okay so this is all about we have to cover you know about transformations and one last thing is the browser support all the Transformations are highly supported in modern browsers my suggestion would be to always use vendor prefixes that's because some really um modern browsers as of today like Safari 8 and all the older browsers of older versions of a joint still need vendor prefixes to apply a transformation and obviously a vendor prefixes will look something like that so you have to Define um and transformation for every browser using webkit modes and Opera and myself and then apply a transformation inside every one of this for the transformation to work in other browser now that we know how to manipulate web elements using the CSS Transformations let's put this into practice and let's create together a morphing menu icon so here is a preview of the final result as you can see when I go hover the button the menu icon turns into an arrow okay so let's create this together the starting point as usual is a basic HTML5 document and all I need is a div element which will be used to Center everything the everything right in the center of the canvas here and a button element with a class of trigger then I need some text menu and a span element which will be used to create the icon inside the button so basically the span will be used to will be used to create the line in the center and its pseudo elements uh and so the before and after pseudo elements of the span element will be used to create the top and bottom lines okay so let's switch to the CSS first of all let's apply some basic style to the body element let's remove some margins so let's switch here let's move some margins and let's add a background color of a dark gray now we need a display table and therefore we need to define a width of a hundred percent and a height of a hundred BH so we are using the display table um to Center um to Center the element to Center the button here in the center of the canvas and we need to Define something for the development which is inside the body so take the development and apply a display table cell a vertical align of middle and a text align of Center and here we have our button in the center of the canvas okay now let's add some style to the trigger element we need a background color and we can set a lighter gray then we need to give it some sides so let's say 120 pixel width and 120 pixels for the height okay perfect so let's remove the D4 Boulder of the button element so border known and then let's add about the radius of 50 percent perfect now in order to remove the text that we that will be replaced by the hamburger icon we need to add then overflow of hidden so that everything which is outside the button won't be visible therefore we are moving the text outside the pattern giving it a text indent of a hundred percent a color of transparent and don't forget to apply a white space of no wrap so that there won't be any brake lines okay perfect so this is the image replacement and finally we are applying a cursor pointer just to visually show to the user that you can actually click this element okay now we were saying before in order to create the icon we need to use the uh we we will you will be using the span element and the pseudo elements the before and after pseudo elements of the spun elements so first of all for this Parliament we need a position of absolute because we want to center it in related to the to the trigger element and therefore we need to apply a position relative to the trigger element we need to set a width and the height of 4 pixels and a background color of white and then we need a border radius of 4 pixels okay now it's not visible at the moment and that's because we need to give it the top and left value Top Value we can use the calc function giving it the value of 50 minus half the height which is 4 pixel so therefore 2 pixels same thing for the for the left use the calc function and apply 50 percent minus half the width so 22 pixels so here we have our line in the in the center okay so now we have to apply some style to the sudo elements that will actually share some Style with the span element so we can write right here you can write trigger span B4 and then we can take this copy and paste trigger span after okay so I'm going to move this style which is only going to affect the span element and not the sudo element in here and precisely we need to move the top and left value which will be different for the pseudo elements so here we are top and left okay so the pseudo elements are not still visible because we need to Define some style as well for these two elements and let's do it so we need first of all we need a content even though there is no content it's empty this is necessary to make them visible then we need to apply a left value of zero and for the uh before element I will apply a bottom value of 12 pixel to move it up a bit and for the after element I will apply a top value of 12 pixel so here they are so as you can see just by using some simple CSS and the sudo elements and just one spun element we were able to create a hamburger icon okay now we need to animate this embroidery icon and what we want is that when the user go hover the button so when we have a hover selection on the trigger element I want to take the span the B4 element the before pseudo element of the span element and I want to make some changes so first of all I want to rotate this element by minus 45 degrees let me show you what's happening so as you can see when I go over the element there is a rotation and it's immediate because we haven't defined any transition for the element so what I'm doing here I'm taking the before and after pseudo elements and I'm applying transition on that run it's form property of 0.3 seconds so as you can see now we have a transition now basically this line here has to become a smaller line and be placed right here same thing for the line below so that they can create an arrow okay so uh maybe T30 for the moment again removing these from the hover selector and I'm placing it right inside the before main element so this way I can easily build the arrow visually so I not only I need to rotate the element I want to reduce its width to 50 percent so it becomes smaller and now we need to place it in the right position so let's apply first of all let's translate X which is used as you remember to move the element around so if I apply a negative volume I'm pushing the element to the left so let's apply minus 4 pixels a bit too much minus two pixels okay so we applied two Transformations using the simple space so translate first and then a rotation I need another translate function so I'm going to apply a Translate y because we need to push down a little this element here so we Translate Y of 4 pixels let's try maybe just a little more a little bit more okay I think it's perfect this way okay as you can see we have half of the r already so we want to apply these transformations when we go hover the button so let's remove this from here and let's apply these transformations to the hover selector right also the width transformation okay you can see something is off and that's because we didn't apply a transition to the width as well so let's go back to the before and after pseudo elements and let's apply another transition this time to the width of the same duration perfect now as you can see we have half of the transformation ready so all we need to do is just copy this apply the transformation to the after pseudo element but in the opposite direction so we need to rotate clockwise by 45 degrees and we need to move the element this line here we have to move it up so I'm going to use a negative value for the Translate Y function of -5 and we still need to move it to the left so I'm still going to use a negative value for the translate X function okay now as you can see where we go hover the button the hamburger menu turns into a nice Arrow so we are almost almost there so this is a perfectly working animation uh we can just if we want to we can say when you go when you go hover the trigger element take the span and just rotate it of a 180 degrees now it's an immediate radiation so we need to define a transition for the span element as well transition on the transform element always at 0.3 seconds here we go now we have a nice smooth animation of a humble Dragon turning into an arrow hi guys let's talk about animations animations like transitions allow you to change the value of CSS properties over time one important difference is that with animations you can specify multiple States for the CSS properties that you want to animate and you can do that using keyframes so what does that mean let's start from our basic HTML template and let's create a deep element and this band child and let's add some style so to the Deep element I'm gonna hot certain high of 100 pixel and a width of 100 pixel and to the spawn element a display block since it is an inline element and the high and the width equal to the ones of its parent so height 100 percent with 100 and and background color red so let's give them some space okay now now to apply an animation to our watch pen we have to set a value for the animation name property and this value has to reference a valid keyframes rule so I'm gonna set an animation name and it is going to be the name of our animation and I'm gonna call it scale up and then a keyframes rule with the same name now each keyframe is used to specify the value of the CSS properties at specific moments during our animation so for example if we Define a zero percent keyframe this one is used to specify the value of the CSS properties at the beginning of our animations while the 100 keyframe is used to define the the the final State the end state of the animation so for example let's animate the scale value of our spam so I'm gonna set the transform scale 0 here and a transform scale 1. here okay so in this case we are using we are defining only the start keyframe and the end keyframe so we can write these keyframes rules rule also using the from and two keywords so I can write from scale 0 to skate one like that okay um in the same keyframes rule we can also Define multiple additional keyframes so for example I can define a 50 keyframe and I can set it to a scale of two but I can Define also an additional one for example 70 keyframe and set the transform scale zero like that okay now you can see from that in this example we defined the two keyframes with the same value for the scale property so we can write them also like that and remove this one so zero percent seventy percent scale zero and the other two keyframes okay I'm gonna remove this just because we don't need it for this example um let's go and set an animation duration and I'm gonna set this one to two seconds for example so basically what we are seeing here is we want to animate the scale value of our Spawn from 0 to 2 in the first half of our animation so basically in the first second and then we want to animate this scale from two to one in the second half in the last second let's see the animation in action um we applied the animation directly to the spawn element so this animation is going to be triggered by the browser refresh here we go this is our animation so you can see the scale is zero to be at the beginning then it goes to two and then back to one okay I'm gonna use the over event as trigger so I'm gonna write deep Hoover bottom and I'm gonna move these two from here here now when I hover over my element the animation is trigger triggered okay in the same keyframe we can Define multiple CSS properties so for example in the 50 keyframe I can set the background color black and now when I hover over my diva we animate not only the scale property but also the background color property okay oh sorry um okay um we can use a shortened version of the animation so we can write something like these animation the name of the animation scale up and then the duration to Second so now if I comment these two and hover over my element you can see that the effect is exactly the same okay also note that we are using the animation property the unprefixed property but if you need to support all the browsers you may need to use the pre the prefix inversion so if we go to the can I use page for the animations from here you can see that almost all modern browsers support animation and support the unprefixed property uh but for example all the browser like Safari 8 still need the prefixed version so according to your project you can decide which one is uh it's better to use and if we go back to our project the prefix at the property is going to look like that this one and you can use the same old a prefixed property also for the keyframes rule so cute face like this but in this lesson we are gonna use only the unprefixed property so let's get rid of this and this one okay let's remove the shortened version and uncomment these two so now let's have a look at the other animations property animation properties we have already used two of them animation name and animation duration let's go to the animation delay uh this property defines when the animation starts so basically if you want the animation to start with the delay let's set it to one second so now when we over over our our element you can see that the animation is not triggered immediately but there is a one second delay and then the animation is triggered again okay now let's go to the next property animation timing function time function now this property defines the acceleration of the animation over a cycle and we decided to dedicate an entire chapter to this property so we are not gonna add anything else here so just remove it let's remove it let's go to the next property which is the animation iteration count okay this property um defines the number of times you want your animation to be played and by default it's one so you want your your animation to be played just once but you can set it to to 2 for example and in this case when we over our deep you can see that it is played two times you can set it also to infinite now when we hover over we can see that the animation is played an infinite number of times okay from this example you can see that each new cycle of the animation is played from the beginning so from from the zero percent keyframe to the end of the animation the 100 keyframe but you can change this Behavior using the animation Direction property so animation Direction okay let's comment just for one second this fifty percent keyframe now if I set this property uh to alternate basically what we are seeing is uh the Cycles which are odds odd counts so for example the first one the third one play them in a normal Direction the others so for example the second or the fourth play them in a reverse Direction so now when I hover over my span Elementor the first one as before is played in a normal Direction so from scale 0 to scale 1 but the second in Reverse direction from scale 1 to skill 0 and so on okay let's go to the next property which is the animation play state this one is used to uh post pose or or play your animation so for example I'm gonna set it to post then let's move this from the hover selector to domain element now we don't need the over effect to um to trigger the animation since we applied it directly to the span Elementor but now what happened what happens if I hover over my development you see the animation is posed should be posed animation placed it okay let me just and let's go now it's working so you see as soon as I hover over the element the animation is Boost when I leave the element the animation restarts and that's because of the animation play State value which is set to boost okay let's get rid of this and let's go back to our previous configuration now let's get rid of these two the last property we want to talk about is the animation film mode okay before analyzing this property one thing important is that it has to be clear that the properties the CSS properties defined inside the keyframes rule are applied to the element in our case the spawn element only while the animation is played which means before the animation starts and after the animation is over the properties applied to the the spawn element in our case are the one defined in the main element so to be clear let's um yeah just for one second comment this one and add the transform scale 0.5 for example save this and now let's trigger the animation so you see basically the animation with the animation we animate this K the scale value from zero to one but once the animation you know is over then I mean the scale value goes back to 0.5 and this is because we set a Transformer scale 0.5 in the main element but we can change this Behavior using the animation film mode if we set the animation fill mode to forwards basically what we are saying is once the animation is over apply to the spawn element in our case the CSS properties defined in the last keyframe so now if we hover over our spawn and wait for the end of the animation you can see the scale value is still one it's not 0.5 anymore that's because of the animation film mode property okay this was the last one if you want to know which CSS properties can be animated using the animation property you can go to the w3.org website where you can find the list of the properties you can animate um and also remember you can use animation to animate also pseudo elements like after or before elements

Channel: Higherstud

Views: 22,306

Keywords: gadgets, new gadgets, cool gadgets, gadget, amazon gadgets, smart gadgets, latest gadgets, gadgets under 500, unique gadgets, gadgets 2022, gadgets 2021, gadgets on amazon, cheapest gadgets, under 100 rs gadgets, kitchen gadgets, gadgets under 50, coolest gadgets, new gadgets on amazon, home gadgets, crazy gadgets, electronic gadgets, amazing gadgets, top 5 gadgets, gadgets under 1000, gadgets under rs100, gadgets on amazon india, the unique gadgets, top gadgets

Id: v_cS0CnFi3c

Length: 46min 0sec (2760 seconds)

Published: Thu Oct 20 2022