CSS snippets // Alex Carpenter

Diagonal line pattern

.pattern {
  --fill: #ddd;
  background-image: linear-gradient(
    45deg,
    var(--fill) 7.25%,
    transparent 0,
    transparent 50%,
    var(--fill) 0,
    var(--fill) 57.25%,
    transparent 0,
    transparent
  );
  background-size: 8px 8px;
}

.pattern {
  --fill: #ddd;
  background-image: linear-gradient(
    45deg,
    var(--fill) 7.25%,
    transparent 0,
    transparent 50%,
    var(--fill) 0,
    var(--fill) 57.25%,
    transparent 0,
    transparent
  );
  background-size: 8px 8px;
}

Dot pattern

.pattern {
  --fill: #ddd;
  background-image: radial-gradient(
    var(--fill) 1px,
    transparent 0
  );
  background-size: 8px 8px;
}

.pattern {
  --fill: #ddd;
  background-image: radial-gradient(
    var(--fill) 1px,
    transparent 0
  );
  background-size: 8px 8px;
}

Equal height grid rows

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Makes row heights equal */
  grid-auto-rows: 1fr;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Makes row heights equal */
  grid-auto-rows: 1fr;
}

Full width within parent

.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

Nested border radius

.parent {
  --padding: 16px;
  --radius: 4px;
  --nested-radius: calc(var(--radius) - var(--padding));
}
 
.nested {
  border-radius: var(--nested-radius);
}

.parent {
  --padding: 16px;
  --radius: 4px;
  --nested-radius: calc(var(--radius) - var(--padding));
}
 
.nested {
  border-radius: var(--nested-radius);
}

via jy3yy

Text divider

h2 {
  display: flex;
  align-items: center;
  gap: 16px;
}
 
h2::before,
h2::after {
  content: '';
  height: 1px;
  background-color: #ddd;
  flex-grow: 1;
}

h2 {
  display: flex;
  align-items: center;
  gap: 16px;
}
 
h2::before,
h2::after {
  content: '';
  height: 1px;
  background-color: #ddd;
  flex-grow: 1;
}

SVG texture

<svg id="texture">
  <filter id="noise">
    <feTurbulence type="fractalNoise" baseFrequency=".8" numOctaves="4" stitchTiles="stitch"></feTurbulence>
    <feColorMatrix type="saturate" values="0"></feColorMatrix>
  </filter>
  <rect width="100%" height="100%" filter="url(#noise)"></rect>
</svg>

<svg id="texture">
  <filter id="noise">
    <feTurbulence type="fractalNoise" baseFrequency=".8" numOctaves="4" stitchTiles="stitch"></feTurbulence>
    <feColorMatrix type="saturate" values="0"></feColorMatrix>
  </filter>
  <rect width="100%" height="100%" filter="url(#noise)"></rect>
</svg>

#texture {
  opacity: .25;
  pointer-events: none;
  filter: contrast(120%) brightness(120%);
}

#texture {
  opacity: .25;
  pointer-events: none;
  filter: contrast(120%) brightness(120%);
}

View usage ped.ro