Up next in 10
Learn CSS Calc In 6 Minutes
2K views
Feb 7, 2024
"Learn CSS Calc In 6 Minutes" is a concise tutorial video aimed at teaching viewers about the CSS calc() function, which allows for mathematical calculations to be performed within CSS property values. The creator likely covers the syntax of the calc() function, demonstrating how it can be used to perform addition, subtraction, multiplication, and division operations on CSS property values. Through clear explanations and practical examples, the video aims to help viewers understand the versatility and usefulness of the calc() function in creating responsive and dynamic layouts. By condensing the material into a short duration, the video offers a quick and efficient way for viewers to grasp the concept of CSS calc() and apply it to their web development projects. Viewers can expect to gain a solid understanding of CSS calc() within a brief timeframe.
View Video Transcript
0:00
Hello everyone, in today's video we're going to be talking about the amazing CSS calc function
0:06
why it's super useful, and how you can actually use it in your projects, so let's get started now
0:15
Welcome back to WebDev Simplified, my name is Kyle and my job is to simplify the web for you
0:22
so you can start building your dream projects sooner, so if that sounds interesting to you
0:26
make sure you subscribe to the channel for more videos just like this one. So to get started
0:31
all I have is a very simple HTML document with a single div with the class of container
0:36
and then some basic styles to add a background color of red and a height of 100 pixels
0:41
so as you can see this red box over here is this container inside of our body, and to get started
0:47
I'm just going to change the width of this box to let's say 300 pixels, and as you can see we
0:53
have a 300 pixel wide box, but since we're specifically talking about calc in this video
0:59
I want to show you how you can use the calc function to do the exact same thing, so all we
1:03
need to do is come in here and say calc, and we want to say 100 pixels plus 200 pixels, and if we
1:09
say we get the exact same result because the calc function allows us to do addition, subtraction
1:15
multiplication, or division of any length units together with each other in order to get an output
1:21
result. We can even nest these inside of each other, so we could for example say calc of 200
1:26
pixels minus the result of this calculation, and let's actually make this 400 pixels, now if we
1:33
saved it we get a 100 pixel wide box because 400 minus 300 is going to be 100, but one thing to
1:39
note about calc is that you can actually combine together different units, so you don't need to
1:44
use just pixel units or just percentages, what we could do is we want to say the width is 100 percent
1:50
minus 30 pixels, so now our box is going to take up the entire width except for 30 pixels, and if
1:56
we save that you see we have 30 pixels on the side here left over, and this is where the real power
2:01
of the calc function comes in. The ability to combine together different units with each other
2:06
makes it so easy to do these types of things where you have a object that is the full width of
2:11
something but is just a few pixels short, essentially it allows you to add margin to your objects
2:15
without using margin, this allows us to use margin to actually center things, for example we can save
2:20
margin of zero and auto, and we know an auto margin will actually center our object for us
2:26
so as you can see we have an auto margin on the right and left, and it's centering our object
2:30
with those extra 30 pixels, so 15 on each side, that's one of the greatest use cases of the calc
2:36
function. One thing to note about the syntax of the calc function though is that you must have a
2:41
space in between your operation here, so for example if we were to do this 100 minus these 30
2:47
pixels and save, it's not going to work, you see we're not going to get any change, and that's
2:51
because this is invalid, you must have a space on both sides of your operation inside the calc
2:55
function or it won't work, and now if we save this you see it goes back to working. Also you cannot
3:00
have a space at the beginning here, if we save that you see it no longer works, it has to be
3:04
formatted exactly like this, so you have calc in the inside parentheses, you have your first number
3:10
space, then your operation, and then another space, and the second number, and it's really
3:14
important to follow that formatting because it's really easy to forget a space somewhere in the
3:18
middle here and then have something just stop working. Now you may think that this calc function
3:23
is not that useful, sure you can add and subtract things but that really doesn't seem that great
3:27
but where the calc function really shines is when you start to deal with css variables
3:31
For example we could create a variable, we're just going to call this variable here width
3:35
and we're going to set it equal to 100 pixels, and you can imagine that this width variable is
3:40
something that defines a width that's global to our application, and then we can come in here
3:44
we can access that css variable by just saying width here, and we can say that this container
3:50
is going to be two times our normal width, and now if we save that you see this is 200 pixels wide
3:55
and if you're not familiar with css variables I have an entire video going over css variables
4:00
linked in the cards and the description that you can check out, but you really don't need to know
4:04
css variables for this video, just know that with calc and css variables we can define a value once
4:10
and actually modify it using math in order to get new values that are going to be useful for us
4:16
One instance where this is really useful is in color, let's come down here and create two buttons
4:22
we're just going to call this first one here our primary button, and we're just going to say
4:27
primary, copy this down, and we're going to have a danger button, and we're going to call this one
4:32
danger, so we want our primary button to be some form of green color and the danger button to be
4:37
red, essentially we'll want them to be opposite colors from each other, so now let's come up into
4:42
here and select those, so we have primary, and then we're also going to have danger
4:48
and inside of our primary we're just going to set a background color, and we're going to use hsl
4:53
and the first thing we want to do is set a hue, for example we're going to use 180, this is a number
4:58
between 0 and 360, then we want to have 100 saturation, and we're going to say 50 lightness
5:04
and if you save that we get this bluish greenish color showing up over here on the right hand side
5:09
and then in our danger what we're going to do is we're going to set our hsl to 0, which is the
5:13
exact opposite of 180, and now if we save that you see we get this red color, and the really cool
5:19
thing we can do with css variables is if we define a css variable at the root of our application
5:25
we can just define this for example here as hue, and we want to set this equal to 180
5:32
this is just going to be our base hue here, now we can change this to be our hue variable
5:38
and down here we can change this to be our variable of hue, and we just want to do a calculation of
5:44
subtracting 180, and let's make sure that we close this off inside of the calc function
5:50
and now if we save it you see that we get the exact same results, we can change this hue
5:55
and we're always going to get two complementary colors no matter what our hue is, these are always
6:00
going to be opposite colors from each other because of this subtraction here, we're essentially taking
6:05
the value which is between 0 and 360, subtracting half of that which is 180, and we're always
6:11
getting the opposite color on the scale, this is something that's really cool that you can do
6:15
and something that I did in my full stack node.js course which you can find in the cards and the
6:20
description in order to make a site that can change color at any point that you want because
6:24
we have one variable that defines our color for our entire site, and that's all there is to know
6:29
about the css calc function. If you enjoyed this video make sure to check out my other videos
6:34
linked over here, and subscribe to my channel for more videos just like this one
6:38
Thank you very much for watching and have a good day
#Programming
#Search Engine Optimization & Marketing
#Software
#Web Design & Development
#Web Services