Learn CSS Calc In 6 Minutes

Подписаться 1,6 млн

Просмотров 92 тыс.

50% 1

🚨 IMPORTANT:
Learn CSS Today Course: courses.webdevsimplified.com/...
CSS calc is one of the few functions available in CSS and it is incredibly powerful. Not only can you do simple arithmetic with the calc function, but you can also combine units together with the calc function to create really unique spacing and sizes. The real power of CSS calc comes from the ability to use it with variables which opens up an entire world of possibilities. In this video I will explain how the CSS calc function works and some unique use cases for the CSS calc function.
📚 Materials/References:
CSS Calc Article: blog.webdevsimplified.com/202...
CSS Variables Tutorial: • CSS Variables Tutorial
Node.js Full Stack Course Playlist: • Full Stack Web Develop...
🧠 Concepts Covered:
- The syntax of CSS calc
- How to use CSS calc
- When to use CSS calc
🌎 Find Me Here:
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
#CSS #WDS #CSSCalc

Опубликовано:

18 окт 2019

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 138

@Fresteeyles 4 года назад

Wow, I really didn't know about css variables. This is extremely useful!

@shredder_plays 4 года назад

just love these kind of short videos make more such like these.

@WebDevSimplified 4 года назад

I have plenty more like this planned.

@abboudwow 2 года назад

Your tutorials always short give the answer I need to and in simplified way, keep it up

@shadowwalker9014 4 года назад

Your videos are soooooo easy to understand, thank you a loooooot

@samirsamir7779 4 года назад

Great as usually , thanks !

@medusa121 3 года назад

helped me alot!!! thanks you so much!

@42-velkan-rtx32 4 года назад

Too right, mate. Very well explained. GJ

@dealstunner8317 3 года назад

Man you videos are excellent! And so are you :)

@Zen-lz1hc 2 года назад

That was neat. Thanks for sharing!

@yashhhh8012 Год назад

Very Easy to Understand, Thanks for great video.

@SXCRD 4 года назад

Love these videos!

@ananymo 2 года назад

Great video 👍. Thanks 🙏

@owenluna7646 2 года назад

Amazing bro, thanks a lot. I learn a lot from you

@NoFaceCoder 4 года назад

Nice simplified technic brother 👍

@halivudestevez2 2 года назад

Your video helps me update my outdated css-html knowledgebase.

@danielsegewitz6956 4 года назад

Das Video hat mir sehr geholfen. Vielen Dank

@mackynikat8833 3 года назад

tnx for the info 6mins vid and really got it man.

@naveensinghrana6594 13 дней назад

Great Work.

@VIVEKJOSHI05 2 года назад

You made my day....Thanks love from India.

@suryatejt207 2 года назад

Brother this is really awesome and easy to understand nice work 👍😊

@Kevinproducciones2 3 года назад

Thanks bro, your videos are amzing!

@sonamohialdin3376 Год назад

Very useful tutorial

@fragrantbloom 2 года назад

Thank you Kyle

@hemaldon 3 года назад

thanks for this video

@tumon001 Год назад

Thanks, Kyle.

@DeepSpaceX 4 года назад

BTW you explain really good!

@sonamuhialdeen7866 2 года назад

So good tutorial

@Sat123it 4 года назад

You are great !!

@AbbasAli-yj3fg Год назад

loved it.

@apingsample4720 3 года назад

Love this video, really easy to understand and straight to the point! :) thanks!

@manpatel6984 3 года назад

whenever I come to your videos. You send me to learn something else, which will send me to another video. But let's be honest. WEB DEV SIMPLIFIED is just THE BEST. period.

@T25de 2 года назад

Good shit dude!

@Aditya-xz5qv 4 года назад

ty!

@linhdo1738 4 года назад

Awesome work! ....I always thought I could only use variables in sass :( Thank you!

@Vietnamcamping89 4 года назад

Me too 😂

@WebDevSimplified 4 года назад

Variables are probably my favorite newer feature to CSS.

@Kong_PJ 9 месяцев назад

Awesome !

@samsilarefeen2466 2 года назад

Awesome explanation in a very short video . Liked it. Okay, I have a question. If I declare a variable in css with calc() , how can I call the variable in javascript?

@josephmawa2793 4 года назад

Thanks Mr. Cook for "cooking" these videos.

@WebDevSimplified 4 года назад

You are very welcome!

@bertilow 4 года назад

Great explanation! I must remember to use calc. The only thing missing was some mention of browser support (or lack thereof).

@WebDevSimplified 4 года назад

Good point. Calc is pretty much universally support except in Opera mini and some edge cases in IE.

@bertilow 4 года назад

@@WebDevSimplified CSS variables seem to have slightly less support, i.e. none in IE.

@harag9 4 года назад

@@bertilow If anyone is still using IE 11 or earlier, then they don't deserve to be on your website :) Question is what about Edge...

@jamesmichaelsimmons Год назад

I have a jumbotron that would not work until I made the height = height: calc(1 * calc(.5 * 100vw)); I have never used calc before, but now I think it really is magic! Glad this tutorial was available to help me. Thanks!

@sagzone8644 2 года назад

He deserves many more subscribers...

@ronaldrodriguez5144 4 месяца назад

you're awesome!

@samsabhaya6686 Год назад

best teacher

@JcBthug 2 года назад

Do you have a video of how to calculate the margin paddings values?

@sauravsahaa Год назад

thanks

@forgiveness_denied 4 года назад

bruh I didn't even know that CSS Vars exists :D

@WebDevSimplified 4 года назад

They are pretty amazing!

@RameenFallschirmjager 4 года назад

Me too neither!

@themoroccanpianist8953 3 года назад

@@WebDevSimplifiedbut Sass is much more powerful when it comes to using variables, is it not ?

@jaxxonjason8664 3 года назад

You prolly dont care but if you are bored like me during the covid times then you can stream pretty much all of the new movies on instaflixxer. Have been streaming with my gf these days xD

@joshuayousef2805 3 года назад

@Jaxxon Jason Definitely, I've been watching on instaflixxer for months myself =)

@RodrigoMendoza7 4 года назад

Kyle, is it possible to append units to unitless numbers through calc()? I've read it's possible by multiplying the unitless number by 1 and putting the desired unit next to the 1. It's possible with all units except "%", because calc() would determine the percentage instead of just adding the unit to the number. I know SASS does allow this, but CSS doesn't, which is unfortunate 😥

@AlThePal78 Год назад

I literally watched the Kevin Powell one he did and told him I was dissapointed he didnt talk about the space on 2:51 that you did lmao I love you guys you two are my favorite to watch online for html css and js :)

@urs_truly_rohit 4 года назад

I love your videos buddy..... As a web developer i too more interested and have passion to do videos like you.. May be in future i will make videos which are very inspired to me.

@JoeWong81 4 года назад

Thanks

@user-fd5le5bx9j Год назад

THANK YOU VERY MATCH!

@usama57926 4 года назад

amazing thank u so much sir

@WebDevSimplified 4 года назад

You're welcome!

@dimerhelpthepoortocode4621 4 года назад

Please show us how to give a card drop-down a position in a view port/scroll-view

@GingerYu-kt2zb 3 месяца назад

Very good

@Vietnamcamping89 4 года назад

This is so cool 😎

@smokazemi 3 года назад

Hello,thank You! how can I have something like this: calc( 200px * 1600px / 1500px )?

@Popc1007 4 года назад

thnx bro

@kerryd2060 4 года назад

WOW!! This is great. I see myself using this. (-:

@WebDevSimplified 4 года назад

I'm glad you liked it!

@suryapratapsingh5149 4 года назад

Hi Guru, Please make some videos on event loops . How different tasks are executed in loop. How to create new loop etc. your simple ways are really great. Thanks a lot.

@WebDevSimplified 4 года назад

That's a good suggestion. I will add it to my list.

@Andre-zp6qq 3 года назад

Hey, first of all, amazing videos. You actually make me want to keep on learning this. Anyway, what’s the difference between making a variable in :root {} or anywhere else? Is root like the “base”, where you set the variable’s initial value and then can alter it later on?

@cyborgamish 3 года назад

Old question, but... CSS custom properties are scoped. Setting/resetting a custom property somewhere makes it available for all descendants. Defined in :root, it will be available everywhere.

@funfamily9745 Год назад

CSS was always so boring for me, I never tried to learn it in depth. Your videos making me in love with css, thank you

@amanmehar8547 7 месяцев назад

@ProgrammingwithPeter 4 года назад

Css is so underestimated but on the latest years grew so much, is insane what you can do with it

@WebDevSimplified 4 года назад

It is incredible. CSS was one of the things that made me really love web development.

@crustycock593 4 года назад

The only youtube channel that lives up to its name.

@WebDevSimplified 4 года назад

Thank you!

@88dejw 4 года назад

calc solved for my problem with keeping footers stuck to the bottom on different viewports. Just add this to Your main content class: .content { min-height: calc(100vh - [footer height]px); }

@paolo-1283 4 года назад

Yup calc is awesome but what if the footer's height is not fixed how do you subtract it? Here's a better solution for example you want a 3 column layout, a header, content and the footer that sticks to the bottom even if there's little to no content at all. With CSS grid you can set .app{ display: grid; grid-template-rows: 100px 1fr auto; height inherit} provide the body's height is 100% or 100vh

@ralpholiver2889 3 года назад

@@paolo-1283 Keeping it absolute and bottom: 0px woudn't be a better approach? Grid template always comes out as troublesome and too verbose for me.

@paolo-1283 3 года назад

@@ralpholiver2889 the key too solving problems with grid is the align-content center and align-content start

@ralpholiver2889 3 года назад

@@paolo-1283 but flex does that too, with less verbosity.

@paolo-1283 3 года назад

@@ralpholiver2889 yeah i agree, flex is one dimensional, grid is two

@nguyenquocvuong7235 2 года назад

nice

@_.sunnyraj._ 3 года назад

I had no idea before this that calc function also exist in css

@govindsinghrathore4671 2 года назад

Done

@steafansteinocher462 Год назад

i swear every question I have he got a video on dat joint

@johnaweiss Год назад

Can you include current css properties of elements? For example: left: calc(this.left - 100) px; EDIT: I just read your comment that calc cannot know the current size of an element.

@DeepSpaceX 4 года назад

make more front end projects? and stuff

@kamalsharma2839 2 года назад

Not tried, but what if -hew in :root is set less than 180?? Don't know if negative values in hue also work

@syediqbalahmed3176 4 года назад

good

@nodirbeknazarov1372 2 года назад

Hello Kyle can we get your codes from Github

@harag9 4 года назад

I'm just learning about css variables and calc and seeing them together is great. I'm having an issue I hope you can help with - I have a div that the user can resize using javascript, and I want the font inside it to grow and shrink to fit into the div. So say div is 200x50 and font-size is 16px can I use css to calculate the new font size using calc() as the user changes the dive to say 400x100. Thanks, great work though!

@WebDevSimplified 4 года назад

This is going to be really tough to do since all fonts are different sizes and fonts themselves have different sizes of each character. For example the text lllll will take up less room than OOOOO.

@harag9 4 года назад

@@WebDevSimplified I thought it might be, I was thinking for the starting size you have a font-size of 14px and then calculate it based on width/height of the div from the stating values. but not sure you can use the current width and height in the calc function...

@WebDevSimplified 4 года назад

@@harag9 You cannot use the current size of something in the calc function. CSS does not know of the current size of objects.

@lovekim6838 4 года назад

wt. you the best. period.

@ryomensukuna9513 4 года назад

First Like Bro👍

@RameenFallschirmjager 4 года назад

css variables!!!!!! I feel like finding alien life!😂

@ganipra7402 3 года назад

wait, why in 5:17 container have red color? isn't in 4:41 he delete container css?

@yvng4697 Год назад

i really hate calc coz its kinda hard, can i stick with the other units?

@shahriarmahmudshahed 4 года назад

Wow

@Carl-yu6uw 4 года назад

Interesting, you have a tut website, which is good as you are super clear and concise in your presentations. The pricing seems a little too ambitious tho, given there are some very good courses and tutors who undercut you. Hmmm.

@WebDevSimplified 4 года назад

I totally understand. There are a lot of good cheap courses out there, but I feel that my course is concise and well explained enough to justify the higher price, especially considering the amount of free content I have to back it up.

@wixclub 3 года назад

calc function : 1). 2 different unit 2.) CSS variable (--x, root)

@paungster Месяц назад

👍👏

@ehhh7330 4 года назад

that bluish greenish color is cyan

@moodymonstrosity1423 2 года назад

My guy doesn't blink.

@hemaldon 3 года назад

calc(calc(calc(100% * 2) / 10) + 10px) ? not working! why?

@mysteriousxcodesterio4434 4 года назад

Please, author, add subtitles if you can

@superhusbands5908 2 года назад

Oh nooo, where my subtitles?

@subham-raj 4 года назад

...almost 7 mins :)

@WebDevSimplified 4 года назад

Six just sounds so much better though :P

@mehdirohan4248 4 года назад

2nd comment bro

@guyr989 4 года назад

I learnt it in 3 min. Guess how

@randominternetidot9263 3 года назад

Double speed

@paulcosta8297 3 года назад

Even 2x playback is too slow.

@codewithdoge 3 года назад

I hope my gf doesn't see your video.... You are too handsome

@ko3li668 4 года назад

If you change your thumbnail you'll get more views.

@WebDevSimplified 4 года назад

What do you recommend I change it to. I am pretty terrible at thumbnail design, and people at least know that this type of thumbnail is my style.

@ko3li668 4 года назад

I did a quick youtube search and I found that most type of these vids have the same thumbnail which is understandable but we can all agree that they were not eye appealing (catchy)! I can help you design thumbnails if you want to.

@WebDevSimplified 4 года назад

@@ko3li668 If you want to help send me an email at the email on the about page of my channel.