{"id":292074,"date":"2019-09-11T07:26:02","date_gmt":"2019-09-11T14:26:02","guid":{"rendered":"http:\/\/css-tricks.com\/?p=292074"},"modified":"2019-10-04T07:44:50","modified_gmt":"2019-10-04T14:44:50","slug":"logical-operations-with-css-variables","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/logical-operations-with-css-variables\/","title":{"rendered":"Logical Operations with CSS Variables"},"content":{"rendered":"<p>Very often, while using switch variables (a variable that&#8217;s either <code>0<\/code> or <code>1<\/code>, a concept that&#8217;s explained in a greater detail in <a href=\"https:\/\/css-tricks.com\/dry-switching-with-css-variables-the-difference-of-one-declaration\/\">in this post<\/a>), I wish I could perform logical operations on them. We don&#8217;t have functions like <code>not(var(--i))<\/code> or <code>and(var(--i), var(--k))<\/code> in CSS, but we can emulate these and more with arithmetic operations in a <code>calc()<\/code> function.<\/p>\n<p>This article is going to show you what <code>calc()<\/code> formulas we need to use for each logical operation and explain how and why they are used with a couple of use cases that lead to the writing of this article.<\/p>\n<h3 id=\"how\">How: the formulas<\/h3>\n<h4 id=\"not\"><code>not<\/code><\/h4>\n<p>This is a pretty straightforward one: we subtract the switch variable (let&#8217;s call it <code>--j<\/code>) from <code>1<\/code>:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">--notj: calc(1 - var(--j))<\/code><\/pre>\n<p>If <code>--j<\/code> is <code>0<\/code>, then <code>--notj<\/code> is <code>1<\/code> (<code>1 - 0<\/code>). If <code>j<\/code> is <code>1<\/code>, then <code>--notj<\/code> is <code>0<\/code> (<code>1 - 1<\/code>).<\/p>\n<h4 id=\"and\"><code>and<\/code><\/h4>\n<p>Now, if you&#8217;ve ever taken electronics classes (particularly something like Programmed Logic Systems or Integrated Circuits), then you already know what formula we need to use here. But let&#8217;s not jump straight into it.<\/p>\n<p>The <code>and<\/code> of two operands is true if and only if both are true. The two operands in our case are two switch variables (let&#8217;s call them <code>--k<\/code> and <code>--i<\/code>). Each of them can be either <code>0<\/code> or <code>1<\/code>, independently of the other. This means we can be in one out of four possible scenarios:<\/p>\n<ul>\n<li><code>--k: 0<\/code>, <code>--i: 0<\/code><\/li>\n<li><code>--k: 0<\/code>, <code>--i: 1<\/code><\/li>\n<li><code>--k: 1<\/code>, <code>--i: 0<\/code><\/li>\n<li><code>--k: 1<\/code>, <code>--i: 1<\/code><\/li>\n<\/ul>\n<p>The result of the <code>and<\/code> operation is <code>1<\/code> if both our switch variables are <code>1<\/code> and <code>0<\/code> otherwise. Looking at it the other way, this result is <code>0<\/code> if at least one of the two switch variables is <code>0<\/code>.<\/p>\n<p>Now you need to think of it this way: the result of what arithmetic operation is <code>0<\/code> if at least one of the two operands is <code>0<\/code>? That&#8217;s multiplication, as multiplying anything by <code>0<\/code> gives us <code>0<\/code>!<\/p>\n<p>So, our <code>--and<\/code> formula is:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">--and: calc(var(--k)*var(--i))<\/code><\/pre>\n<p>Considering each of our four possible scenarios, we have:<\/p>\n<ul>\n<li>for <code>--k: 0<\/code>, <code>--i: 0<\/code>, we have that <code>--and<\/code> is <code>0<\/code> (<code>0*0<\/code>)<\/li>\n<li>for <code>--k: 0<\/code>, <code>--i: 1<\/code>, we have that <code>--and<\/code> is <code>0<\/code> (<code>0*1<\/code>)<\/li>\n<li>for <code>--k: 1<\/code>, <code>--i: 0<\/code>, we have that <code>--and<\/code> is <code>0<\/code> (<code>1*0<\/code>)<\/li>\n<li>for <code>--k: 1<\/code>, <code>--i: 1<\/code>, we have that <code>--and<\/code> is <code>1<\/code> (<code>1*1<\/code>)<\/li>\n<\/ul>\n<h4 id=\"nand\"><code>nand<\/code><\/h4>\n<p>Since <code>nand<\/code> is <code>not and<\/code>, we need to replace the <code>--j<\/code> in the <code>not<\/code> formula with the formula for <code>and<\/code>:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">--nand: calc(1 - var(--k)*var(--i))<\/code><\/pre>\n<p>For each of our four possible scenarios, we get:<\/p>\n<ul>\n<li>for <code>--k: 0<\/code>, <code>--i: 0<\/code>, we have that <code>--nand<\/code> is <code>1<\/code> (<code>1 - 0*0 = 1 - 0<\/code>)<\/li>\n<li>for <code>--k: 0<\/code>, <code>--i: 1<\/code>, we have that <code>--nand<\/code> is <code>1<\/code> (<code>1 - 0*1 = 1 - 0<\/code>)<\/li>\n<li>for <code>--k: 1<\/code>, <code>--i: 0<\/code>, we have that <code>--nand<\/code> is <code>1<\/code> (<code>1 - 1*0 = 1 - 0<\/code>)<\/li>\n<li>for <code>--k: 1<\/code>, <code>--i: 1<\/code>, we have that <code>--nand<\/code> is <code>0<\/code> (<code>1 - 1*1 = 1 - 1<\/code>)<\/li>\n<\/ul>\n<h4 id=\"or\"><code>or<\/code><\/h4>\n<p>The result of the <code>or<\/code> operation is <code>1<\/code> if at least one of our switch variables is <code>1<\/code> and <code>0<\/code> otherwise (if both of them are <code>0<\/code>).<\/p>\n<p>The first instinct here is to go for addition, but while that gives us <code>0<\/code> if both <code>--k<\/code> and <code>--i<\/code> are <code>0<\/code> and <code>1<\/code> if one is <code>0<\/code> and the other one is <code>1<\/code>, it gives us <code>2<\/code> if both of them are <code>1<\/code>. So that doesn&#8217;t really work.<\/p>\n<p>But we can use the good old <a href=\"https:\/\/en.wikipedia.org\/wiki\/De_Morgan%27s_laws\" rel=\"noopener\">De Morgan&#8217;s laws<\/a>, one of which states:<\/p>\n<blockquote><p><code>not (A or B) = (not A) and (not B)<\/code><\/p><\/blockquote>\n<p>This means the result of the <code>or<\/code> operation is the negation of the <code>and<\/code> operation between the negations of <code>--k<\/code> and <code>--i<\/code>. Putting this into CSS, we have:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">--or: calc(1 - (1 - var(--k))*(1 - var(--i)))<\/code><\/pre>\n<p>For each scenario, we get:<\/p>\n<ul>\n<li>for <code>--k: 0<\/code>, <code>--i: 0<\/code>, we have that <code>--or<\/code> is <code>0<\/code> (<code>1 - (1 - 0)*(1 - 0) = 1 - 1*1 = 1 - 1<\/code>)<\/li>\n<li>for <code>--k: 0<\/code>, <code>--i: 1<\/code>, we have that <code>--or<\/code> is <code>1<\/code> (<code>1 - (1 - 0)*(1 - 1) = 1 - 1*0 = 1 - 0<\/code>)<\/li>\n<li>for <code>--k: 1<\/code>, <code>--i: 0<\/code>, we have that <code>--or<\/code> is <code>1<\/code> (<code>1 - (1 - 1)*(1 - 0) = 1 - 0*1 = 1 - 0<\/code>)<\/li>\n<li>for <code>--k: 1<\/code>, <code>--i: 1<\/code>, we have that <code>--or<\/code> is <code>1<\/code> (<code>1 - (1 - 1)*(1 - 1) = 1 - 0*0 = 1 - 0<\/code>)<\/li>\n<\/ul>\n<h4 id=\"nor\"><code>nor<\/code><\/h4>\n<p>Since <code>nor<\/code> is <code>not or<\/code>, we have:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">--nor: calc((1 - var(--k))*(1 - var(--i)))<\/code><\/pre>\n<p>For each of our four possible scenarios, we get:<\/p>\n<ul>\n<li>for <code>--k: 0<\/code>, <code>--i: 0<\/code>, we have that <code>--nor<\/code> is <code>1<\/code> (<code>(1 - 0)*(1 - 0) = 1*1<\/code>)<\/li>\n<li>for <code>--k: 0<\/code>, <code>--i: 1<\/code>, we have that <code>--nor<\/code> is <code>0<\/code> (<code>(1 - 0)*(1 - 1) = 1*0<\/code>)<\/li>\n<li>for <code>--k: 1<\/code>, <code>--i: 0<\/code>, we have that <code>--nor<\/code> is <code>0<\/code> (<code>(1 - 1)*(1 - 0) = 0*1<\/code>)<\/li>\n<li>for <code>--k: 1<\/code>, <code>--i: 1<\/code>, we have that <code>--nor<\/code> is <code>0<\/code> (<code>(1 - 1)*(1 - 1) = 0*0<\/code>)<\/li>\n<\/ul>\n<h4 id=\"xor\"><code>xor<\/code><\/h4>\n<p>The result of the <code>xor<\/code> operation is <code>1<\/code> when one of the two operands is <code>1<\/code> and the other one is <code>0<\/code>. This feels trickier at first, but, if we think this means the two operands need to be different for the result to be <code>1<\/code> (otherwise it&#8217;s <code>0<\/code>), we stumble upon the right arithmetic operation to use inside <code>calc()<\/code>: subtraction!<\/p>\n<p>If <code>--k<\/code> and <code>--i<\/code> are equal, then subtracting <code>--i<\/code> from <code>--k<\/code> gives us <code>0<\/code>. Otherwise, if we have <code>--k: 0<\/code>, <code>--i: 1<\/code>, the result of the same subtraction is <code>-1<\/code>; if we have <code>--k: 1<\/code>, <code>--i: 0<\/code>, the result is <code>1<\/code>.<\/p>\n<p>Close, but not quite! We get the result we want in three out of four scenarios, but we need to get <code>1<\/code>, not <code>-1<\/code> in the <code>--k: 0<\/code>, <code>--i: 1<\/code> scenario.<\/p>\n<p>However, one thing that <code>-1<\/code>, <code>0<\/code> and <code>1<\/code> have in common is that multiplying them with themselves gives us their absolute value (which is <code>1<\/code> for both <code>-1<\/code> and <code>1<\/code>). So the actual solution is to multiply this difference with itself:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">--xor: calc((var(--k) - var(--i))*(var(--k) - var(--i)))<\/code><\/pre>\n<p>Testing each of our four possible scenarios, we have:<\/p>\n<ul>\n<li>for <code>--k: 0<\/code>, <code>--i: 0<\/code>, we have that <code>--xor<\/code> is <code>0<\/code> (<code>(0 - 0)*(0 - 0) = 0*0<\/code>)<\/li>\n<li>for <code>--k: 0<\/code>, <code>--i: 1<\/code>, we have that <code>--xor<\/code> is <code>1<\/code> (<code>(0 - 1)*(0 - 1) = -1*-1<\/code>)<\/li>\n<li>for <code>--k: 1<\/code>, <code>--i: 0<\/code>, we have that <code>--xor<\/code> is <code>1<\/code> (<code>(1 - 0)*(1 - 0) = 1*1<\/code>)<\/li>\n<li>for <code>--k: 1<\/code>, <code>--i: 1<\/code>, we have that <code>--xor<\/code> is <code>0<\/code> (<code>(1 - 1)*(1 - 1) = 0*0<\/code>)<\/li>\n<\/ul>\n<h3 id=\"why\">Why: Use cases<\/h3>\n<p>Let&#8217;s see a couple of examples that make use of logical operations in CSS. Note that I won&#8217;t detail other aspects of these demos as they&#8217;re outside the scope of this particular article.<\/p>\n<h4 id=\"use-case-disabled-small-screen\">Hide disabled panel only on small screens<\/h4>\n<p>This is a use case I came across while working on an interactive demo that lets users control various parameters to change a visual result. For more knowledgeable users, there&#8217;s also a panel of advanced controls that&#8217;s disabled by default. It can, however, be enabled in order to get access to manually controlling even more parameters.<\/p>\n<p>Since this demo is supposed to be responsive, the layout changes with the viewport. We also don&#8217;t want things to get crammed on smaller screens if we can avoid it, so there&#8217;s no point in showing the advanced controls if they&#8217;re disabled and we&#8217;re in the narrow screen case.<\/p>\n<p>The screenshot collage below shows the results we get for each the four possible scenarios. <\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/07\/ex_0_collage.png?resize=1024%2C833&#038;ssl=1\" alt=\"Screenshot collage.\" data-recalc-dims=\"1\"\/><figcaption>Collage of the possible cases.<\/figcaption><\/figure>\n<p>So let&#8217;s see what this means in terms of CSS!<\/p>\n<p>First off, on the <code>&lt;body&gt;<\/code>, we use a switch that goes from <code>0<\/code> in the narrow screen case to <code>1<\/code> in the wide screen case. We also change the <code>flex-direction<\/code> this way (if you want a more detailed explanation of how this works, check out my <a href=\"https:\/\/css-tricks.com\/dry-state-switching-with-css-variables-fallbacks-and-invalid-values\/\">second article<\/a> on DRY switching with CSS variables).<\/p>\n<pre rel=\"SCSS\"><code class=\"language-scss\">body {\r\n  --k: var(--wide, 0);\r\n  display: flex;\r\n  flex-direction: var(--wide, column);\r\n\t\r\n  @media (orientation: landscape) { --wide: 1 }\r\n}<\/code><\/pre>\n<p>We then have a second switch on the advanced controls panel. This second switch is <code>0<\/code> if the checkbox is unchecked and <code>1<\/code> if the checkbox is <code>:checked<\/code>. With the help of this switch, we give our advanced controls panel a disabled look (via a <code>filter<\/code> chain) and we also disable it (via <code>pointer-events<\/code>). Here, <code>not<\/code> comes in handy, as we want to decrease the contrast and the opacity in the disabled case:<\/p>\n<pre rel=\"SCSS\"><code class=\"language-scss\">.advanced {\r\n  --i: var(--enabled, 0);\r\n  --noti: calc(1 - var(--i));\r\n  filter: \r\n    contrast(calc(1 - var(--noti)*.9)) \r\n    opacity(calc(1 - var(--noti)*.7));\r\n  pointer-events: var(--enabled, none);\r\n\t\r\n  [id='toggle']:checked ~ &amp; { --enabled: 1 }\r\n}<\/code><\/pre>\n<p>We want the advanced controls panel to stay expanded if we&#8217;re in the wide screen case (so if <code>--k<\/code> is <code>1<\/code>), regardless of whether the checkbox is <code>:checked<\/code> or not, <em>or<\/em> if the checkbox is <code>:checked<\/code> (so if <code>--i<\/code> is <code>1<\/code>), regardless of whether we&#8217;re in the wide screen case or not.<\/p>\n<p>This is precisely the <code>or<\/code> operation!<\/p>\n<p>So we compute an <code>--or<\/code> variable:<\/p>\n<pre rel=\"SCSS\"><code class=\"language-scss\">.advanced {\r\n  \/* same as before *\/\r\n  --or: calc(1 - (1 - var(--k))*(1 - var(--i)));\r\n}<\/code><\/pre>\n<p>If this <code>--or<\/code> variable is <code>0<\/code>, this means we&#8217;re in the narrow screen case <em>and<\/em> our checkbox is unchecked, so we want to zero the <code>height<\/code> of the advanced controls panel and also its vertical <code>margin<\/code>:<\/p>\n<pre rel=\"SCSS\"><code class=\"language-scss\">.advanced {\r\n  \/* same as before *\/\r\n  margin: calc(var(--or)*#{$mv}) 0;\r\n  height: calc(var(--or)*#{$h});\r\n}<\/code><\/pre>\n<p>This gives us the desired result (<a href=\"https:\/\/codepen.io\/thebabydino\/pen\/XLzaKV\" rel=\"noopener\">live demo<\/a>).<\/p>\n<h4 id=\"use-1-formula-for-polyhedral-faces\">Use the same formulas to position multiple faces of a 3D shape<\/h4>\n<p>This is a use case I came across while working on the personal project of <a href=\"https:\/\/codepen.io\/collection\/eErLu\/\" rel=\"noopener\">CSS-ing<\/a> the <a href=\"https:\/\/en.wikipedia.org\/wiki\/Johnson_solid\" rel=\"noopener\">Johnson solids<\/a> this summer.<\/p>\n<p>Let&#8217;s take a look at one of these shapes, for example, the gyroelongated pentagonal rotunda (<a href=\"https:\/\/en.wikipedia.org\/wiki\/Gyroelongated_pentagonal_rotunda\" rel=\"noopener\">J25<\/a>), in order to see how logical operations are useful here.<\/p>\n<figure><video controls loop src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2019\/09\/compound_shape.mp4\"><\/video><figcaption>The shape we want to get.<\/figcaption><\/figure>\n<p>This shape is made up out of a <a href=\"https:\/\/en.wikipedia.org\/wiki\/Pentagonal_rotunda\" rel=\"noopener\">pentagonal rotunda<\/a> without the big decagonal base and a <a href=\"https:\/\/en.wikipedia.org\/wiki\/Decagonal_antiprism\" rel=\"noopener\">decagonal antiprism<\/a> without its top decagon. The interactive demo below shows how these two components can be built by folding their <a href=\"https:\/\/en.wikipedia.org\/wiki\/Net_(polyhedron)\" rel=\"noopener\">nets<\/a> of faces into 3D and then joined to give us the shape we want.<\/p>\n<p data-height=\"685\" style=\"height: 685px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"zVLBge\" data-default-tab=\"result\" data-user=\"thebabydino\" data-embed-version=\"2\" data-pen-title=\"Folding nets of J6 + AP10 = J25\" class=\"codepen\">See the <a href=\"http:\/\/codepen.io\/thebabydino\/pen\/zVLBge\/\" rel=\"noopener\">Pen<\/a> by thebabydino (<a href=\"http:\/\/codepen.io\/thebabydino\" rel=\"noopener\">@thebabydino<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p>As it can be seen above, the faces are either a part of the antiprism or a part of the rotunda. This is where we introduce our first switch variable <code>--i<\/code>. This is <code>0<\/code> for the faces that are a part of the antiprism and <code>1<\/code> for the faces that are a part of the rotunda. The antiprism faces have a class of <code>.mid<\/code> because we can add another rotunda to the other antiprism base and then the antiprism would be in the middle. The rotunda faces have a class of <code>.cup<\/code> because this part does look like a coffee cup&#8230; without a handle!<\/p>\n<figure><video controls loop src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2019\/09\/cup.mp4\"><\/video><figcaption>The rotunda looks like an upside down up cup without a handle.<\/figcaption><\/figure>\n<pre rel=\"SCSS\"><code class=\"language-scss\">.mid { --i: 0 }\r\n.cup { --i: 1 }<\/code><\/pre>\n<p>Focusing only on the lateral faces, these can have a vertex pointing up or down. This is where we introduce our second variable <code>--k<\/code>. This is <code>0<\/code> if they have a vertex pointing up (such faces have a <code>.dir<\/code> class) and <code>1<\/code> if they&#8217;re reversed and have a vertex pointing down (these faces have a class of <code>.rev<\/code>)<\/p>\n<pre rel=\"SCSS\"><code class=\"language-scss\">.dir { --k: 0 }\r\n.rev { --k: 1 }<\/code><\/pre>\n<p>The antiprism has <code>10<\/code> lateral faces (all triangles) pointing up, each attached to an edge of its decagonal base that&#8217;s also a base for the compound shape. It also has <code>10<\/code> lateral faces (all triangles as well) pointing down, each attached to an edge of its other decagonal base (the one that&#8217;s also the decagonal base of the rotunda and is therefore not a base for the compound shape).<\/p>\n<p>The rotunda has <code>10<\/code> lateral faces pointing up, alternating triangles and pentagons, each attached to the decagonal base that&#8217;s also a base for the antiprism (so it&#8217;s not a base for the compound shape as well). It also has <code>5<\/code> lateral faces, all triangles, pointing down, each attached to an edge of its pentagonal base.<\/p>\n<p>The interactive demo below allows us to better see each of these four groups of faces by highlighting only one at a time. You can use the arrows at the bottom to pick which group of faces gets highlighted. You can also enable the rotation around the <var>y<\/var> axis and change the shape&#8217;s tilt.<\/p>\n<p data-height=\"685\" style=\"height: 685px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"GVrVvK\" data-default-tab=\"result\" data-user=\"thebabydino\" data-embed-version=\"2\" data-pen-title=\"Types of lateral gyroelongated rotunda faces\" class=\"codepen\">See the <a href=\"http:\/\/codepen.io\/thebabydino\/pen\/GVrVvK\/\" rel=\"noopener\">Pen<\/a> by thebabydino (<a href=\"http:\/\/codepen.io\/thebabydino\" rel=\"noopener\">@thebabydino<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p>As previously mentioned, the lateral faces can be either triangles or pentagons:<\/p>\n<pre rel=\"SCSS\"><code class=\"language-scss\">.s3gon { --p: 0 }\r\n.s5gon { --p: 1 }<\/code><\/pre>\n<p>Since all of their lateral faces (<code>.lat<\/code>) of both the antiprism and the rotunda have one edge in common with one of the two base faces of each shape, we call these common edges the base edges of the lateral faces.<\/p>\n<p>The interactive demo below highlights these edges, their end points and their mid points and allows viewing the shapes from various angles thanks to the auto-rotations around the <var>y<\/var> axis which can be started\/ paused at any moment and to the manual rotations around the <var>x<\/var> axis which can be controlled via the sliders.<\/p>\n<p data-height=\"685\" style=\"height: 685px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"qzMLzO\" data-default-tab=\"result\" data-user=\"thebabydino\" data-embed-version=\"2\" data-pen-title=\"Highlight vertices and midpoints of base edges\" class=\"codepen\">See the <a href=\"http:\/\/codepen.io\/thebabydino\/pen\/qzMLzO\/\" rel=\"noopener\">Pen<\/a> by thebabydino (<a href=\"http:\/\/codepen.io\/thebabydino\" rel=\"noopener\">@thebabydino<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p>In order to make things easier for ourselves, we set the <code>transform-origin<\/code> of the <code>.lat<\/code> faces on the middle of their base edges (bottom horizontal edges).<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2019\/07\/lat_face_base.svg\" alt=\"SVG illustration.\"\/><figcaption>Highlighting the base edges and their midpoints (<a href=\"https:\/\/codepen.io\/thebabydino\/pen\/GbPvvb\" rel=\"noopener\">live<\/a>).<\/figcaption><\/figure>\n<p>We also make sure we position these faces such as to have these midpoints dead in the middle of the scene element containing our entire 3D shape.<\/p>\n<p>Having the <code>transform-origin<\/code> coincide with the midpoint the base edge means that any rotation we perform on a face is going to happen around the midpoint of its base edge, as illustrated by the interactive demo below:<\/p>\n<p data-height=\"685\" style=\"height: 685px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"XLQOoE\" data-default-tab=\"result\" data-user=\"thebabydino\" data-embed-version=\"2\" data-pen-title=\"Rotate poly around base midpoint\" class=\"codepen\">See the <a href=\"http:\/\/codepen.io\/thebabydino\/pen\/XLQOoE\/\" rel=\"noopener\">Pen<\/a> by thebabydino (<a href=\"http:\/\/codepen.io\/thebabydino\" rel=\"noopener\">@thebabydino<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p>We place our lateral faces where we want them to be in four steps:<\/p>\n<ol>\n<li>We rotate them around their <var>y<\/var> axis such that their base edges are now parallel to their final positions. (This also rotates their local system of coordinates &mdash; the <var>z<\/var> axis of an element always points in the direction that element faces.)<\/li>\n<li>We translate them such that their base edges coincide with their final positions (along the edges of the base faces of the two components).<\/li>\n<li>If they need to have a vertex pointing down, we rotate them around their <var>z<\/var> axis by half a turn.<\/li>\n<li>We rotate them around their <var>x<\/var> axis into their final positions<\/li>\n<\/ol>\n<p>These steps are illustrated by the interactive demo below, where you can go through them and also rotate the entire shape (using the play\/pause button for the <var>y<\/var> axis rotation and the slider for the <var>x<\/var> axis rotation).<\/p>\n<p data-height=\"685\" style=\"height: 685px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"orKomV\" data-default-tab=\"result\" data-user=\"thebabydino\" data-embed-version=\"2\" data-pen-title=\"Building: gyroelongated pentagonal birotunda\" class=\"codepen\">See the <a href=\"http:\/\/codepen.io\/thebabydino\/pen\/orKomV\/\" rel=\"noopener\">Pen<\/a> by thebabydino (<a href=\"http:\/\/codepen.io\/thebabydino\" rel=\"noopener\">@thebabydino<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p>The <var>y<\/var> axis rotation value is based mostly on the face indices and less on our switch variables, though it depends on these as well.<\/p>\n<p>The structure is as follows:<\/p>\n<pre rel=\"Pug\"><code class=\"language-pug\">- var n = 5; \/\/- number of edges\/ vertices of small base\r\n\r\nsection.scene\r\n  \/\/- 3D shape element\r\n  .s3d\r\n    \/\/- the faces, each a 2D shape element (.s2d)\r\n    \r\n    \/\/- lateral (.lat) antiprism (.mid) faces, \r\n    \/\/- first half pointing up (.dir), others pointing down (.rev)\r\n    \/\/- all of them being triangles (.s3gon)\r\n    - for(var j = 0; j &lt; 4*n; j++)\r\n      .s2d.mid.lat.s3gon(class=j &lt; 2*n ? 'dir' : 'rev')\r\n    \r\n    \/\/- lateral (.lat) rotunda (.cup) faces that point up (.dir), \r\n    \/\/- both triangles (.s3gon) and pentagons (.s5gon)\r\n    - for(var j = 0; j &lt; n; j++)\r\n      .s2d.cup.lat.s3gon.dir\r\n      .s2d.cup.lat.s5gon.dir\r\n    \/\/- lateral (.lat) rotunda (.cup) faces that point down (.rev)\r\n    \/\/- all of them triangles (.s3gon)\r\n    - for(var j = 0; j &lt; n; j++)\r\n      .s2d.cup.lat.s3gon.rev\r\n\r\n    \/\/- base faces, \r\n    \/\/- one for the antiprism (.mid), \r\n    \/\/- the other for the rotunda (.cup)\r\n    .s2d.mid.base(class=`s${2*n}gon`)\r\n    .s2d.cup.base(class=`s${n}gon`)<\/code><\/pre>\n<p>Which gives us the following HTML:<\/p>\n<pre rel=\"HTML\"><code class=\"language-markup\">&lt;section class=\"scene\"&gt;\r\n  &lt;div class=\"s3d\"&gt;\r\n    &lt;!-- LATERAL faces --&gt;\r\n    &lt;div class=\"s2d mid lat s3gon dir\"&gt;&lt;\/div&gt;\r\n    &lt;!-- 9 more identical faces, \r\n         so we have 10 lateral antiprism faces pointing up --&gt;\r\n\r\n    &lt;div class=\"s2d mid lat s3gon rev\"&gt;&lt;\/div&gt;\r\n    &lt;!-- 9 more identical faces, \r\n         so we have 10 lateral antiprism faces pointing down --&gt;\r\n\r\n    &lt;div class=\"s2d cup lat s3gon dir\"&gt;&lt;\/div&gt;\r\n    &lt;div class=\"s2d cup lat s5gon dir\"&gt;&lt;\/div&gt;\r\n    &lt;!-- 4 more identical pairs, \r\n         so we have 10 lateral rotunda faces pointing up --&gt;\r\n\r\n    &lt;div class=\"s2d cup lat s3gon rev\"&gt;&lt;\/div&gt;\r\n    &lt;!-- 4 more identical faces, \r\n         so we have 5 lateral rotunda faces pointing down --&gt;\r\n\r\n    &lt;!-- BASE faces --&gt;\r\n    &lt;div class=\"s2d mid base s10gon\"&gt;&lt;\/div&gt;\r\n    &lt;div class=\"s2d cup base s5gon\"&gt;&lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/section&gt;<\/code><\/pre>\n<p>This means faces <code>0... 9<\/code> are the <code>10<\/code> lateral antiprism faces pointing up, faces <code>10... 19<\/code> are the <code>10<\/code> lateral antiprism faces pointing down, faces <code>20... 29<\/code> are the <code>10<\/code> lateral rotunda faces pointing up and faces <code>30... 34<\/code> are the <code>5<\/code> lateral rotunda faces pointing down.<\/p>\n<p>So what we do here is set an index <code>--idx<\/code> on the lateral faces.<\/p>\n<pre rel=\"SCSS\"><code class=\"language-scss\">$n: 5; \/\/ number of edges\/ vertices of small base\r\n\r\n.lat {\r\n  @for $i from 0 to 2*$n {\r\n    &amp;:nth-child(#{2*$n}n + #{$i + 1}) { --idx: #{$i} }\r\n  }\r\n}<\/code><\/pre>\n<p>This index starts at <code>0<\/code> for each group of faces, which means the indices for faces <code>0... 9<\/code>, <code>10... 19<\/code> and <code>20... 29<\/code> go from <code>0<\/code> through <code>9<\/code>, while the indices for faces <code>30... 34<\/code> go from <code>0<\/code> through <code>4<\/code>. Great, but if we just multiply these indices with the base angle<sup><a href='#note1' id='orig1'>1<\/a><\/sup> of the common decagon to get the <var>y<\/var> axis rotation we want at this step:<\/p>\n<pre rel=\"SCSS\"><code class=\"language-scss\">--ay: calc(var(--idx)*#{$ba10gon});\r\n\r\ntransform: rotatey(var(--ay))<\/code><\/pre>\n<p>&#8230;then we get the following final result. I&#8217;m showing the final result here because it&#8217;s a bit difficult to see what&#8217;s wrong by looking at the intermediate result we get after only applying the rotation around the <var>y<\/var> axis.<\/p>\n<p data-height=\"575\" style=\"height: 575px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"eYOWZzO\" data-default-tab=\"result\" data-user=\"thebabydino\" data-embed-version=\"2\" data-pen-title=\"y rotation strictly based on index - oops!\" class=\"codepen\">See the <a href=\"http:\/\/codepen.io\/thebabydino\/pen\/eYOWZzO\/\" rel=\"noopener\">Pen<\/a> by thebabydino (<a href=\"http:\/\/codepen.io\/thebabydino\" rel=\"noopener\">@thebabydino<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p>This is&#8230; not quite what we were going for!<\/p>\n<p>So let&#8217;s see what problems the above result has and how to solve them with the help of our switch variables and boolean operations on them.<\/p>\n<p>The first issue is that the lateral antiprism faces pointing up need to be offset by half of a regular decagon&#8217;s base angle. This means adding or subtracting <code>.5<\/code> from <code>--idx<\/code> before multiplying with the base angle, <em>but only for these faces<\/em>.<\/p>\n<p data-height=\"685\" style=\"height: 685px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"JjPWeXL\" data-default-tab=\"result\" data-user=\"thebabydino\" data-embed-version=\"2\" data-pen-title=\"Position of antiprism faces pointing up\" class=\"codepen\">See the <a href=\"http:\/\/codepen.io\/thebabydino\/pen\/JjPWeXL\/\" rel=\"noopener\">Pen<\/a> by thebabydino (<a href=\"http:\/\/codepen.io\/thebabydino\" rel=\"noopener\">@thebabydino<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p>The faces we want to target are the faces for which both of <code>--i<\/code> and <code>--k<\/code> are <code>0<\/code>, so what we need here is multiply the result of their <code>nor<\/code> with <code>.5<\/code>:<\/p>\n<pre rel=\"SCSS\"><code class=\"language-scss\">--nor: calc((1 - var(--k))*(1 - var(--i)));\r\n--j: calc(var(--idx) + var(--nor)*.5);\r\n--ay: calc(var(--j)*#{$ba10gon});\r\n\r\ntransform: rotatey(var(--ay));<\/code><\/pre>\n<p>The second issue is that the lateral rotunda faces pointing down are not distributed as they should be, such that each of them has a base edge in common with the base pentagon and the vertex opposing the base in common with the triangular rotunda faces pointing up. This means multiplying <code>--idx<\/code> by <code>2<\/code>, but only for these faces.<\/p>\n<p data-height=\"685\" style=\"height: 685px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"ZEzedzp\" data-default-tab=\"result\" data-user=\"thebabydino\" data-embed-version=\"2\" data-pen-title=\"Position of cupola faces pointing down\" class=\"codepen\">See the <a href=\"http:\/\/codepen.io\/thebabydino\/pen\/ZEzedzp\/\" rel=\"noopener\">Pen<\/a> by thebabydino (<a href=\"http:\/\/codepen.io\/thebabydino\" rel=\"noopener\">@thebabydino<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p>What we&#8217;re targeting now are the faces for which both <code>--i<\/code> and <code>--k<\/code> are <code>1<\/code> (so the faces for which the result of the <code>and<\/code> operation is <code>1<\/code>), so what we need is to multiply <code>--idx<\/code> with <code>1<\/code> plus their <code>and<\/code>:<\/p>\n<pre rel=\"SCSS\"><code class=\"language-scss\">--and: calc(var(--k)*var(--i));\r\n--nor: calc((1 - var(--k))*(1 - var(--i)));\r\n--j: calc((1 + var(--and))*var(--idx) + var(--nor)*.5);\r\n--ay: calc(var(--j)*#{$ba10gon});\r\n\r\ntransform: rotatey(var(--ay));<\/code><\/pre>\n<p>The next step is the translation for which we use <code>translate3d()<\/code>. We don&#8217;t move any of our faces left or right, so the value along the <var>x<\/var> axis is always <code>0<\/code>. We do move them however vertically (along the <var>y<\/var> axis) and forward (along the <var>z<\/var> axis)<\/p>\n<p>Vertically, we want the cup faces that will later get rotated to point down to have their base edge in the plane of the small (pentagonal) base of the cup (and of the compound shape). This means the faces for which <code>--i<\/code> is <code>1<\/code> and <code>--k<\/code> is <code>1<\/code> get moved up (negative direction) by half the total height of the compound shape (a total height which we have computed to be <code>$h<\/code>). So we need the <code>and<\/code> operation here.<\/p>\n<pre rel=\"SCSS\"><code class=\"language-scss\">\/\/ same as before\r\n--and: calc(var(--i)*var(--k));\r\n--y: calc(var(--and)*#{-.5*$h});\r\n\r\ntransform: rotatey(var(--ay)) \r\n           translate3d(0, var(--y, 0), var(--z, 0));<\/code><\/pre>\n<p>We also want all the other cup faces as well as the antiprism faces that will eventually point down to have their base edge in the common plane between the cup and the antiprism. This means the faces for which <code>--i<\/code> is <code>1<\/code> and <code>--k<\/code> is <code>0<\/code> as well as the faces for which <code>--i<\/code> is <code>0<\/code> and <code>--k<\/code> is <code>1<\/code> get translated down (positive direction) by half the height of the compound shape and then back up (negative direction) by the height of the antiprism (<code>$h-mid<\/code>). And what do you know, this is the <code>xor<\/code> operation!<\/p>\n<pre rel=\"SCSS\"><code class=\"language-scss\">\/\/ same as before\r\n--xor: calc((var(--k) - var(--i))*(var(--k) - var(--i)));\r\n--and: calc(var(--i)*var(--k));\r\n--y: calc(var(--xor)*#{.5*$h - $h-mid} - \r\n          var(--and)*#{.5*$h});\r\n\r\ntransform: rotatey(var(--ay)) \r\n           translate3d(0, var(--y, 0), var(--z, 0));<\/code><\/pre>\n<p>Finally, we want the antiprism faces that will remain pointing up to be in the bottom base plane of the compound shape (and of the antiprism). This means the faces for which <code>--i<\/code> is <code>0<\/code> and <code>--k<\/code> is <code>0<\/code> get translated down (positive direction) by half the total height of the compound shape. So what we use here is the <code>nor<\/code> operation!<\/p>\n<pre rel=\"SCSS\"><code class=\"language-scss\">\/\/ same as before\r\n--nor: calc((1 - var(--k))*(1 - var(--i)));\r\n--xor: calc((var(--k) - var(--i))*(var(--k) - var(--i)));\r\n--and: calc(var(--i)*var(--k));\r\n\r\n--y: calc(var(--nor)*#{.5*$h} + \r\n          var(--xor)*#{.5*$h - $h-mid} - \r\n          var(--and)*#{.5*$h});\r\n\r\ntransform: rotatey(var(--ay)) \r\n           translate3d(0, var(--y, 0), var(--z, 0));<\/code><\/pre>\n<p data-height=\"500\" style=\"height: 500px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"qBWmNzg\" data-default-tab=\"result\" data-user=\"thebabydino\" data-embed-version=\"2\" data-pen-title=\"Building compound shape: translating faces so their bases are in the final planes\" class=\"codepen\">See the <a href=\"http:\/\/codepen.io\/thebabydino\/pen\/qBWmNzg\/\" rel=\"noopener\">Pen<\/a> by thebabydino (<a href=\"http:\/\/codepen.io\/thebabydino\" rel=\"noopener\">@thebabydino<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p>Along the <var>z<\/var> direction, we want to move the faces such that their base edges coincide with the edges of the base faces of the compound shape or the edges of the common base (which is not a face of the compound shape) shared by the two 3D components. For the top faces of the cup (which we later rotate to point down), the placement is on the edges of a pentagon, while for all the other faces of the compound shape, the placement is on the edges of a decagon.<\/p>\n<p>This means the faces for which <code>--i<\/code> is <code>1<\/code> and <code>--k<\/code> is <code>1<\/code> get translated forward by the inradius of the pentagonal base while all the other faces get translated forward by the inradius of a decagonal base. So the operations we need here are <code>and<\/code> and <code>nand<\/code>!<\/p>\n<pre rel=\"SCSS\"><code class=\"language-scss\">\/\/ same as before\r\n--and: calc(var(--i)*var(--k));\r\n--nand: calc(1 - var(--and));\r\n--z: calc(var(--and)*#{$ri5gon} + var(--nand)*#{$ri10gon});\r\n\r\ntransform: rotatey(var(--ay)) \r\n           translate3d(0, var(--y, 0), var(--z, 0));<\/code><\/pre>\n<p data-height=\"500\" style=\"height: 500px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"GRKmjKJ\" data-default-tab=\"result\" data-user=\"thebabydino\" data-embed-version=\"2\" data-pen-title=\"Building compound shape: translating face bases on edges of base\/ section polygons\" class=\"codepen\">See the <a href=\"http:\/\/codepen.io\/thebabydino\/pen\/GRKmjKJ\/\" rel=\"noopener\">Pen<\/a> by thebabydino (<a href=\"http:\/\/codepen.io\/thebabydino\" rel=\"noopener\">@thebabydino<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p>Next, we want to make all <code>.rev<\/code> (for which <code>--k<\/code> is <code>1<\/code>) faces point down. This is pretty straightforward and doesn&#8217;t require any logical operation, we just need to add a half a turn rotation around the <var>z<\/var> axis to the transform chain, but only for the faces for which <code>--k<\/code> is <code>1<\/code>:<\/p>\n<pre rel=\"SCSS\"><code class=\"language-scss\">\/\/ same as before\r\n--az: calc(var(--k)*.5turn);\r\n\r\ntransform: rotatey(var(--ay)) \r\n           translate3d(0, var(--y), var(--z))\r\n           rotate(var(--az));<\/code><\/pre>\n<p data-height=\"500\" style=\"height: 500px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"qBWmaOw\" data-default-tab=\"result\" data-user=\"thebabydino\" data-embed-version=\"2\" data-pen-title=\"Building compound shape: rotating faces to point down if necessary\" class=\"codepen\">See the <a href=\"http:\/\/codepen.io\/thebabydino\/pen\/qBWmaOw\/\" rel=\"noopener\">Pen<\/a> by thebabydino (<a href=\"http:\/\/codepen.io\/thebabydino\" rel=\"noopener\">@thebabydino<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p>The pentagonal faces (for which <code>--p<\/code> is <code>1<\/code>) are then all rotated around the <var>x<\/var> axis by a certain angle:<\/p>\n<pre rel=\"SCSS\"><code class=\"language-scss\">--ax: calc(var(--p)*#{$ax5});<\/code><\/pre>\n<p>In the case of the triangular faces (for which <code>--p<\/code> is <code>0<\/code>, meaning we need to use <code>--notp<\/code>), we have a certain rotation angle for the faces of the antiprism (<code>$ax3-mid<\/code>), another angle for the faces of the rotunda that point up (<code>$ax3-cup-dir<\/code>) and yet another angle for the rotunda faces pointing down (<code>$ax3-cup-red<\/code>).<\/p>\n<p>The antiprism faces are those for which <code>--i<\/code> is <code>0<\/code>, so we need to multiply their corresponding angle value with <code>--noti<\/code> here. The rotunda faces are those for which <code>--i<\/code> is <code>1<\/code>, and out of these, the ones pointing up are those for which <code>--k<\/code> is <code>0<\/code> and the ones pointing down are those for which <code>--k<\/code> is <code>1<\/code>.<\/p>\n<pre rel=\"SCSS\"><code class=\"language-scss\">--notk: calc(1 - var(--k));\r\n--noti: calc(1 - var(--i));\r\n--notp: calc(1 - var(--p));\r\n\r\n--ax: calc(var(--notp)*(var(--noti)*#{$ax3-mid} + \r\n                        var(--i)*(var(--notk)*#{$ax3-cup-dir} + var(--k)*#{$ax3-cup-rev})) +\r\n           var(--p)*#{$ax5});\r\n\r\ntransform: rotatey(var(--ay)) \r\n           translate3d(0, var(--y), var(--z))\r\n           rotate(var(--az)) \r\n           rotatex(var(--ax));<\/code><\/pre>\n<p>This gives us the final result!<\/p>\n<p data-height=\"500\" style=\"height: 500px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"LYPyRQY\" data-default-tab=\"result\" data-user=\"thebabydino\" data-embed-version=\"2\" data-pen-title=\"Building compound shape: rotating faces into final position\" class=\"codepen\">See the <a href=\"http:\/\/codepen.io\/thebabydino\/pen\/LYPyRQY\/\" rel=\"noopener\">Pen<\/a> by thebabydino (<a href=\"http:\/\/codepen.io\/thebabydino\" rel=\"noopener\">@thebabydino<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<hr>\n<p><sup>1<\/sup> <small>For any regular polygon (such as any of the faces of our shapes), the arc corresponding to one edge, as well as the angle between the circumradii to this edge&#8217;s ends (our base angle) is a full circle (360\u00b0) over the number of edges. In the case of an equilateral triangle, the angle is 360\u00b0\/3 = 120\u00b0. For a regular pentagon, the angle is 360\u00b0\/5 = 72\u00b0. For a regular decagon, the angle is 360\u00b0\/10 = 36\u00b0. <a href='#orig1' id='note1'>&#x21aa;&#xfe0f;<\/a><\/small><\/p>\n<p data-height=\"685\" style=\"height: 685px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"QbBWZb\" data-default-tab=\"result\" data-user=\"thebabydino\" data-embed-version=\"2\" data-pen-title=\"\" class=\"codepen\">See the <a href=\"http:\/\/codepen.io\/thebabydino\/pen\/QbBWZb\/\" rel=\"noopener\">Pen<\/a> by thebabydino (<a href=\"http:\/\/codepen.io\/thebabydino\" rel=\"noopener\">@thebabydino<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Very often, while using switch variables (a variable that&#8217;s either 0 or 1, a concept that&#8217;s explained in a greater detail in in this post), I wish I could perform logical operations on them. We don&#8217;t have functions like not(var(&#8211;i)) or and(var(&#8211;i), var(&#8211;k)) in CSS, but we can emulate these and more with arithmetic operations [&hellip;]<\/p>\n","protected":false},"author":225572,"featured_media":295739,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[839,1036],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/logical-operators.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":324644,"url":"https:\/\/css-tricks.com\/the-raven-technique-one-step-closer-to-container-queries\/","url_meta":{"origin":292074,"position":0},"title":"The Raven Technique: One Step Closer to Container Queries","date":"November 10, 2020","format":false,"excerpt":"For the millionth time: We need container queries in CSS! And guess what, it looks like we're heading in that direction. When building components for a website, you don\u2019t always know how that component will be used. Maybe it will be render as wide as the browser window is. Maybe\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/RT_x4UFA.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":344249,"url":"https:\/\/css-tricks.com\/build-complex-css-transitions-using-custom-properties-and-cubic-bezier\/","url_meta":{"origin":292074,"position":1},"title":"Build Complex CSS Transitions using Custom Properties and cubic-bezier()","date":"July 14, 2021","format":false,"excerpt":"I recently illustrated how we can achieve complex CSS animations using cubic-bezier() and how to do the same when it comes to CSS transitions. I was able to create complex hover effect without resorting to keyframes. In this article, I will show you how to create even more complex CSS\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/complex-transition.png?fit=1183%2C659&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":345467,"url":"https:\/\/css-tricks.com\/efficient-infinite-utility-helpers-using-inline-css-custom-properties-and-calc\/","url_meta":{"origin":292074,"position":2},"title":"Efficient Infinite Utility Helpers Using Inline CSS Custom Properties and calc()","date":"August 6, 2021","format":false,"excerpt":"I recently wrote a very basic Sass loop that outputs several padding and margin utility classes. Nothing fancy, really, just a Sass map with 11 spacing values, looped over to create classes for both padding and margin on each side. As we\u2019ll see, this works, but it ends up a\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/variable-property.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":365738,"url":"https:\/\/css-tricks.com\/cool-hover-effects-that-use-css-text-shadow\/","url_meta":{"origin":292074,"position":3},"title":"Cool Hover Effects That Use CSS Text Shadow","date":"May 13, 2022","format":false,"excerpt":"In my last article we saw how CSS background properties allow us to create cool hover effects. This time, we will focus on the CSS text-shadow property to explore even more interesting hovers. You are probably wondering how adding shadow to text can possibly give us a cool effect, but\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/05\/text-shadow.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":322391,"url":"https:\/\/css-tricks.com\/animating-number-counters\/","url_meta":{"origin":292074,"position":4},"title":"Animating Number Counters","date":"October 9, 2020","format":false,"excerpt":"Number animation, as in, imagine a number changing from 1 to 2, then 2 to 3, then 3 to 4, etc. over a specified time. Like a counter, except controlled by the same kind of animation that we use for other design animation on the web. This could be useful\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/random-number-slots.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":341584,"url":"https:\/\/css-tricks.com\/hexagons-and-beyond-flexible-responsive-grid-patterns-sans-media-queries\/","url_meta":{"origin":292074,"position":5},"title":"Hexagons and Beyond: Flexible, Responsive Grid Patterns, Sans Media Queries","date":"June 3, 2021","format":false,"excerpt":"A little while back, Chris shared this nice hexagonal grid. And true to its name, it\u2019s using\u2009\u2014wait for it\u2009\u2014\u2009CSS Grid to form that layout. It\u2019s a neat trick! Combining grid columns, grid gaps, and creative clipping churns out the final result. A similar thing could be accomplished with flexbox, too.\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/featured-image.png?fit=1200%2C524&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/logical-operators.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/292074"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/225572"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=292074"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/292074\/revisions"}],"predecessor-version":[{"id":296915,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/292074\/revisions\/296915"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/295739"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=292074"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=292074"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=292074"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}