{"id":4267,"date":"2018-04-06T10:01:37","date_gmt":"2018-04-06T10:01:37","guid":{"rendered":"http:\/\/b.parsons.edu\/~dejongo\/?p=4267"},"modified":"2023-04-24T22:23:56","modified_gmt":"2023-04-24T22:23:56","slug":"10-css-calc","status":"publish","type":"post","link":"https:\/\/b.parsons.edu\/~dejongo\/10-css-calc\/","title":{"rendered":"10 CSS Calc"},"content":{"rendered":"<p>CSS calc() performs simple calculations to determine CSS property values. The calc() function allows mathematical expressions with addition ( + ), subtraction ( &#8211; ), multiplication ( * ), and division ( \/ ) to be used to create a value. A useful feature of this function is the ability to mix percentages and absolute values or to mix different units. Pixels can be subtracted from percentages and viewport widths can be added to pixels, for example.\n<\/p>\n<p>CSS calc() can be used anywhere there\u2019s a css length or number in your stylesheet. <code>.item { width: calc(100% - 60px);} <\/code> Notice that the operator has a space on either side. That is a requirement for <code> + <\/code> and <code> - <\/code>. Leaving it out renders the calculation void. Dividing by 0 voids the result as well.\n<\/p>\n<p>CSS Tricks has a <a href=\"https:\/\/css-tricks.com\/a-complete-guide-to-calc-in-css\/\" target=\"_blank\" rel=\"noopener noreferrer\"> Complete Guide to Calc<\/a>\n<\/p>\n<p>For those of you that are mathematically inclined, calculate sine, cosine, tangent. Check out <a href=\"https:\/\/web.dev\/css-trig-functions\/\" target=\"_blank\" rel=\"noopener noreferrer\"> this trig functions in CSS <\/a> article.<\/p>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#calculate div {\r\nwidth: calc(100% - 80px); \r\npadding: 2px; \r\nmargin: 10px auto; \r\nborder: 8px solid blue;\r\n}\r\n#calculate h2 {\r\ntext-align: center;\r\nfont-size: calc(5px + 2vw);\r\n}<\/style><\/pre>\n<\/div>\n<div id=\"calculate\">\n<h2>using calc to change text size<\/h2>\n<div>\n<div>\n<div>\n<div>\n<div>\n<div>\n<div>\n<div>\n<div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>CSS calc() performs simple calculations to determine CSS property values. The calc() function allows mathematical expressions with addition ( + ), subtraction ( &#8211; ), multiplication ( * ), and division ( \/ ) to be used to create a &hellip; <a href=\"https:\/\/b.parsons.edu\/~dejongo\/10-css-calc\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[15],"tags":[],"_links":{"self":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/4267"}],"collection":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/comments?post=4267"}],"version-history":[{"count":13,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/4267\/revisions"}],"predecessor-version":[{"id":5882,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/4267\/revisions\/5882"}],"wp:attachment":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/media?parent=4267"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/categories?post=4267"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/tags?post=4267"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}