CSS

Updated: September 28, 2024

CSS snippets for hugo. Hugo I assosiate with webdev because it

has been my goto for many years for statically generating sites.

Font
New Morphism
Resize

Checkbox

can be used to toggle an element on and off, like a button.

.container {
  display: none;
}

#myCheckbox:checked ~ .container {
  display: block;
}

#myCheckbox {
  display: none;
}

Clamp

can be used to clamp text to a certain number of lines:

.container {
  width: clamp(400px, 50vw, 800px);     /* min, preferred, max */
}

Focus-within

allows clicking inside a dropdown menu, where before an element would hide after being clicked.

Font

h1 {
    font-size: 4em;
    position: fixed;
    top: 10 px;
    color: white;
    mix-blend-mode: difference;
}

lets say we want a gradient on text, we cannot apply it to the text directly.
Instead we can apply it to the background, and clip it to the text. h1 { background: linear-gradient(to right, red, blue); background-clip: text; color: transparent; }

Glass

use a background with some transparency
use with borders and shadows for more realism

.element {
  background-color: rgba(255, 255, 255, 0.5);
}

.glass {
  backdrop-filter: blur(10px);
}

Has

reference to other elements via relative selector list
this will apply to only buttons with an icon

button:has(svg) {
  padding-right: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  fill: white;
}

light/dark mode

<select>
  <option value="light">Light</option>
  <option value="dark">Dark</option>
</select>

body:has(option[value="dark"]:checked) {
  --background: #292929;
  --text-color: #f8f8f8;
}

New Morphism

Cause a element to look carved in by using inset on both shadows or
we can have a popup look by removing the inset from the shadows:

.element:hover {
  box-shadow: 12px 12px 12px rgba(0, 0, 0, 0.1) inset,
  -10px -10px -10px white inset;
}

Resize

Allow users to control h + w of elements as long as overflow is not hidden.

.element {
  resize: both;       /* vertical horizontal */
}

Scroll Snap

great for cards, sliders, and other elements that need to be snapped to the edges of the screen.

<!-- imagine we have 3 cards -->
<div class ="wrapper">
  <div class="card">
    <h2>Card 1</h2>
    <p>Some text</p>
  </div>
</div>

.wrapper {
  display: flex;
  gap: 10px;
  width: 300px;
  overflow-x: scroll;
  /* proximity can be used instead of mandatory, so it snaps by being close */
  scroll-snap-type: x mandatory;    /* x for horizontal, y for vertical */
}

.card {
  box-sizing: border-box;
  padding: 20px 30px;
  flex-shrink: 0;
  border-radius: 10px;
  text-align: center;
  width: 300px;       /* by matching width of wrapper we get perfect fit */
  scroll-snap-align: start;     /* start, center, end */
}

Video

.video {
    --side-length: 200px;
    width: var(--side-length)
    aspect-ratio: 16 / 9
}

Nesting

:is(ol, ul) is(ol, ul) li {
    color: #008822;
}

Not

not selector to exclude element

.button:not(:first-child) {
  background-color: #ee4400;
}

Colors

60 30 10 Rule

60% is the more base or neutral color
30% is the primary color (not as important as call to action color)
10% is the call to action color use sparingly for click me, look at me things.

CSS