artemsheludko

// HTML
<p class="system-font-stack">This text uses the system font.</p>

// CSS
.system-font-stack {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

artemsheludko

// HTML
<div class="shape-separator"></div>

// CSS
.shape-separator {
  position: relative;
  height: 48px;
}
.shape-separator::after {
  content: '';

artemsheludko

// HTML
<p class="pretty-text-underline">Pretty text underline without clipping descending letters.</p>

// CSS
.pretty-text-underline {
  display: inline;
  font-size: 1.25rem;
  text-shadow: 1px 1px 0 #f5f6f9,
    -1px 1px 0 #f5f6f9,
    -1px -1px 0 #f5f6f9,

artemsheludko

// HTML
<div class="overflow-scroll-gradient">
  <div class="overflow-scroll-gradient__scroller">
    Content to be scrolled
  </div>
</div>

// CSS
.overflow-scroll-gradient {
  position: relative;

artemsheludko

// HTML
<button class="mouse-cursor-gradient-tracking">
  <span>Hover me</span>
</button>

// CSS
.mouse-cursor-gradient-tracking {
  position: relative;
  background: #2379f7;
  padding: 0.5rem 1rem;

artemsheludko

//HTML
<div class="hairline-border">text</div>


// CSS
.hairline-border {
  box-shadow: 0 0 0 1px;
}
@media (min-resolution: 2dppx) {
  .hairline-border {

artemsheludko

// HTML
<p class="gradient-text">Gradient text</p>

// CSS
.gradient-text {
  background: -webkit-linear-gradient(pink, red); // for exemple (90deg, pink, red 90%)
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

artemsheludko

// HTML
<div class="easing-variables"></div>

// CSS
:root {
  --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);

artemsheludko

// HTML
<div class="constant-width"></div>

// CSS
.constant-width {
  background: #333;
  width: 50%;
  padding-top: 50%;
}

artemsheludko

.container {
  width: calc(100% - 40px);
  max-width: 1200px;
  margin: 0 auto;
}

p {
  max-width: 75ch;
}