cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <table>
  <thead>
    <tr>
      <th>Type</th>
      <th>Expected</th>
      <th>Actual</th>
    </tr>
  </thead>
  <tbody>
    <tr class="translate-px">
      <th>translateX( calc(20 * 1px))</th>
      <td><p></p></td>
      <td><p></p></td>
    </tr>
    <tr class="translate-vmin">
      <th>translateX( calc(2 * 1vmin))</th>
      <td><p></p></td>
      <td><p></p></td>
    </tr>
    <tr class="translate-percent">
      <th>translateX( calc(200 * 1%))</th>
      <td><p></p></td>
      <td><p></p></td>
    </tr>
    <tr class="width-px">
      <th>width: calc(50 * 1px)</th>
      <td><p></p></td>
      <td><p></p></td>
    </tr>
    <tr class="width-ch">
      <th>width: calc(6 * 1ch)</th>
      <td><p></p></td>
      <td><p></p></td>
    </tr>
    <tr class="rotate-deg">
      <th>rotate( calc(45 * 1deg))</th>
      <td><p></p></td>
      <td><p></p></td>
    </tr>
    <tr class="rotate-turn">
      <th>rotate( calc(.125 * 1turn))</th>
      <td><p></p></td>
      <td><p></p></td>
    </tr>
    <tr class="rotate-combo">
      <th>rotate( calc(45deg + .5turn))</th>
      <td><p></p></td>
      <td><p></p></td>
    </tr>
    <tr class="opacity">
      <th>opacity( calc(.25 * 1))</th>
      <td><p></p></td>
      <td><p></p></td>
    </tr>
    <tr class="scale-x">
      <th>scaleX( calc(2 * 1))</th>
      <td><p></p></td>
      <td><p></p></td>
    </tr>
    <tr class="font-size">
      <th>font-size: calc(2 * 1rem)</th>
      <td><p></p></td>
      <td><p></p></td>
    </tr>
    <tr class="font-size2">
      <th>font-size: calc(200 * 1%)</th>
      <td><p></p></td>
      <td><p></p></td>
    </tr>
    <tr class="line-height">
      <th>line-height: calc(3 * 1)</th>
      <td><p>&nbsp;</p></td>
      <td><p>&nbsp;</p></td>
    </tr>
    <tr class="hue-deg">
      <th>hsl( calc(50 * 2), 50%, 50%)</th>
      <td><p></p></td>
      <td><p></p></td>
    </tr>
    <tr class="hsl-saturation">
      <th>hsl( 100, calc(100 * 1%), 50%)</th>
      <td><p></p></td>
      <td><p></p></td>
    </tr>
    <tr class="color-g">
      <th>rgb( 80, calc(255 * 1), 80)</th>
      <td><p></p></td>
      <td><p></p></td>
    </tr>
    <tr class="color-ga">
      <th>rgba( 80, 255, 80, calc(1 * .5))</th>
      <td><p></p></td>
      <td><p></p></td>
    </tr>
    <tr class="cubic add">
      <th>cubic-bezier( calc(0 + .25), 1, 0, 1)</th>
      <td><p></p></td>
      <td><p></p></td>
    </tr>
    <tr class="cubic multiply">
      <th>cubic-bezier( calc(1 * .25), 1, 0, 1)</th>
      <td><p></p></td>
      <td><p></p></td>
    </tr>
    <tr class="transition-duration">
      <th>*-duration: calc(1000 * 1ms)</th>
      <td><p></p></td>
      <td><p></p></td>
    </tr>
    <tr class="filter-blur">
      <th>blur( calc(.5 * 2px))</th>
      <td><p></p></td>
      <td><p></p></td>
    </tr>
    <tr class="filter-hue">
      <th>hue-rotate( calc(90 * 1deg))</th>
      <td><p></p></td>
      <td><p></p></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Started this as I was seeing what appeared to be broken CSS Variables... but turned out to be a misunderstanding on how calc is implemented in browsers.  Some properties allow you to take any unitless number and multiply it by a number+unit to get a final unit value... others do not.  This appears to be the case in at least Firefox and Edge. Safari and Chrome support all of the ones I've tested. Haven't looked fully into it yet, but Firefox and Edge do fine with px, vmin, and other linear distance units...and seem to not handle degrees, unitless,&nbsp;etc.</td>
    </tr>
  </tfoot>
</table>

        
            
          
!
            
              p {
  width: 1em;
  height: 1em;
  border: .15rem solid #45cdd4;
  display: inline-block;
}
:not(tfoot) > tr > td {
  background: radial-gradient(circle at center center, black 0, black 1px, transparent 2px) center center no-repeat;
}

.width-px td:first-of-type p {
  width: 50px;
}
.width-px td:nth-of-type(2) p {
  width: calc(50 * 1px);
}
.width-ch td:first-of-type p {
  width: 6ch;
}
.width-ch td:nth-of-type(2) p {
  width: calc(6 * 1ch);
}
.translate-px td:first-of-type p {
  transform: translateX(20px);
}
.translate-px td:nth-of-type(2) p {
  transform: translateX(calc(20 * 1px));
}
.translate-vmin td:first-of-type p {
  transform: translateX(2vmin);
}
.translate-vmin td:nth-of-type(2) p {
  transform: translateX(calc(2 * 1vmin));
}
.translate-percent td:first-of-type p {
  transform: translateX(200%);
}
.translate-percent td:nth-of-type(2) p {
  transform: translateX(calc(200 * 1%));
}
.rotate-deg td:first-of-type p {
  transform: rotate(45deg);
}
.rotate-deg td:nth-of-type(2) p {
  transform: rotate(calc(45 * 1deg));
}
.rotate-turn td:first-of-type p {
  transform: rotate(.125turn);
}
.rotate-turn td:nth-of-type(2) p {
  transform: rotate(calc(.125 * 1turn));
}
.rotate-combo td:first-of-type p {
  transform: rotate(.625turn);
}
.rotate-combo td:nth-of-type(2) p {
  transform: rotate(calc(45deg + .5turn));
}
.opacity td:first-of-type p {
  opacity: .25;
}
.opacity td:nth-of-type(2) p {
  opacity: calc(.25 * 1);
}
.scale-x td:first-of-type p {
  transform: scaleX(2);
}
.scale-x td:nth-of-type(2) p {
  transform: scaleX(calc(2 * 1));
}
.font-size td:first-of-type p {
  font-size: 2rem;
}
.font-size td:nth-of-type(2) p {
  font-size: calc(2 * 1rem);
}
.font-size2 td:first-of-type p {
  font-size: 200%;
}
.font-size2 td:nth-of-type(2) p {
  font-size: calc(200 * 1%);
}
.line-height td:first-of-type p {
  line-height: 3;
  height: auto;
}
.line-height td:nth-of-type(2) p {
  line-height: calc(3 * 1);
  height: auto;
}

.hue-deg td:first-of-type p {
  background: hsl(100, 50%, 50%);
}
.hue-deg td:nth-of-type(2) p {
  background: hsl(calc(50 * 2), 50%, 50%);
}
.hsl-saturation td:first-of-type p {
  background: hsl(100, 100%, 50%);
}
.hsl-saturation td:nth-of-type(2) p {
  background: hsl(100, calc(100 * 1%), 50%);
}
.color-g td:first-of-type p {
  background: rgb(80, 255, 80);
}
.color-g td:nth-of-type(2) p {
  background: rgb(80, calc(255 * 1), 80);
}
.color-ga td:first-of-type p {
  background: rgba(80, 255, 80, .5);
}
.color-ga td:nth-of-type(2) p {
  background: rgba(80, 255, 80, calc(.5 * 1));
}
.cubic p {
  animation: go 1000ms infinite alternate;
}
.cubic.add td:first-of-type p {
  animation-timing-function: cubic-bezier(.25, 1, 0, 1)
}
.cubic.add td:nth-of-type(2) p {
  animation-timing-function: cubic-bezier(calc(0 + .25), 1, 0, 1);
}
.cubic.multiply td:first-of-type p {
  animation-timing-function: cubic-bezier(.25, 1, 0, 1)
}
.cubic.multiply td:nth-of-type(2) p {
  animation-timing-function: cubic-bezier(calc(1 * .25), 1, 0, 1);
}
.transition-duration p {
  animation: go 0ms infinite alternate linear;
}
.transition-duration td:first-of-type p {
  animation-duration: 1000ms;
}
.transition-duration td:nth-of-type(2) p {
  animation-duration: calc(1000 * 1ms);
}
.filter-blur td:first-of-type p {
  filter: blur(1px);
}
.filter-blur td:nth-of-type(2) p {
  filter: blur(calc(.5 * 2px));
}
.filter-hue td:first-of-type p {
  filter: hue-rotate(90deg);
}
.filter-hue td:nth-of-type(2) p {
  filter: hue-rotate(calc(90 * 1deg));
}

@keyframes go {
  from {
    transform: translateX(-10vmin)
  }
  to {
    transform: translateX(10vmin)
  }
}





body {
  font-family: system-ui, -apple-system, 'Segoe UI', 'Roboto',  sans-serif;
  min-height: 100vh;
  background: hsl(230, 10%, 94%);
}
table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
th, td {
  width: 25%;
  border: 1px solid grey;
  text-align: center;
  vertical-align: center;
  padding: 1rem .25rem;
}
th:first-child,
td:first-child {
  width: 50%;
}
th, tfoot td {
  font-size: .875rem;
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console