A Pen by wanfeichao

Thumbnail
This awesome code was written by 0xfc, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 0xfc ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  wanfeichao</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <h1>XYZABCDabcdxyz</h1>
<h2>XYZABCDabcdxyz</h2>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/0xfc/a-pen-by-wanfeichao-ermOzg */
/* Usage Examples
    .my-level-1-heading-class {
        @include text-crop; // Will use default line height of 1.3
        font-size: 48px;
        margin: 0 0 0 16px;
    }

    .my-level-2-heading-class {
        @include text-crop; // Will use default line height of 1.3
        font-size: 32px; // Don't need to change any settings, will work with any font size automatically
        margin: 0 0 0 16px;
    }

    .my-body-copy-class {
        @include text-crop($line-height: 2); // Larger line height desired, set the line height via the mixin
        font-size: 16px;
    }

    // Sometimes depending on the font-size, the rendering, the browser, etc. you may need to tweak the output. 
    // You can adjust the top and bottom cropping when invoking the component using the $top-adjustment and $bottom-adjustment settings 
    
    .slight-adjustment-needed {
        @include text-crop($top-adjustment: -0.5px, $bottom-adjustment: 2px);
        font-size: 17px;
    }

    .dont-do-this {
        @include text-crop;
        font-size: 16px;
        line-height: 3; // DO NOT set line height outside of the mixin, the mixin needs the line height value to calculate the crop correctly
    }
*/
html, body {
  margin: 0;
}

h1, h2 {
  margin: 0;
}

h1 {
  line-height: 1.3;
}
h1::before, h1::after {
  content: '';
  display: block;
  height: 0;
  width: 0;
}
h1::before {
  margin-bottom: calc(-0.2880952381em + 0px);
}
h1::after {
  margin-top: calc(-1.4785714286em + 0px);
}

Comments