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!
