TUTORIAL: calc() css
difficulty: easy/medium/hard
calc() css is a way to define any length value using math calculations instead of using numbers. supported in all major browsers!
syntax:
+ add - subtract * multiply (one of the values must be a number) / divide (the value on the right must be a number)
width: calc(120px + 80px); width: calc(40% - 30px); width: calc(40px * 2); width: calc(100% / 2 + 50px);
where does this come in handy?
thereās a lot of different usesā but for the sake of having an example, hereās a sample of me vertically aligning something with a height of 50pxĀ using calc().
.mydiv { margin: calc(50vh - 50px) auto 0 auto; }
(vh = 1% of your viewport width, andĀ āviewportā is your browser window; therefore 50vh is 50% of your browser window.)
example
in the context of tumblr html, you can also replace any of the values with a meta tag:
.mydiv { width: calc({select:mychoice} + 40px); }
here, āmydivā would be the same width asĀ āmychoiceā (a drop down list using tumblr meta tags)Ā plus 40px. if size has the options ofĀ ā100pxā,Ā ā200pxā, andĀ ā300pxā, and you choseĀ ā200pxā, then the div would be 240px.
of course, this isnāt all of the usesā there are a million reasons why you could use itā but here are some examples. you can also learn more about it here. have fun!
















