🎨Quick and Subtle CSS Enhancements for a Polished Look

Unique Text Selection Styling

The ::selection pseudo-element allows you to customize the appearance of selected text on a web page. By specifying different values for the color and background properties, you can create a unique highlight effect when users select text within an element. This can be useful for creating a visually appealing and cohesive design.

selection.css

::selection {
  color: hsl(var(--theme-bg));
  background: hsl(var(--theme-accent));
}

::selection {
  color: hsl(var(--theme-bg));
  background: hsl(var(--theme-accent));
}

Custom Scrollbar Design

Scrollbar styling allows you to customize the appearance of scrollbars in the browser. In this example, the ::-webkit-scrollbar selector is used to target the scrollbar itself, while ::-webkit-scrollbar-thumb targets the draggable thumb element within the scrollbar. By adjusting properties like background-color, border-radius, and border, you can create a scrollbar that matches the overall design of your website.

scrollbar.css

body::-webkit-scrollbar {
  width: 16px;
}
body::-webkit-scrollbar-thumb {
  background-color: hsl(var(--theme-accent) / 50%);
  border-radius: 8px;
  border: 4px solid transparent;
  background-clip: content-box;
}
body::-webkit-scrollbar-thumb:hover {
  background-color: hsl(var(--theme-accent) / 75%);
}

body::-webkit-scrollbar {
  width: 16px;
}
body::-webkit-scrollbar-thumb {
  background-color: hsl(var(--theme-accent) / 50%);
  border-radius: 8px;
  border: 4px solid transparent;
  background-clip: content-box;
}
body::-webkit-scrollbar-thumb:hover {
  background-color: hsl(var(--theme-accent) / 75%);
}

Improved Scroll Margin Behavior

The scroll-margin property is used to define the margin between the scrolling container’s edge and the start of the scrollable content. In this case, the selector :is(h1, h2, h3, h4, h5, h6) targets all heading elements, and the scroll-margin property adds a margin of 2.25rem at the top of the container when scrolling to a heading. This can help ensure that the heading remains visible and properly positioned when using anchor links or other navigation methods.

Additionally, by setting scroll-behavior: smooth; on the html element, you enable smooth scrolling behavior, providing users with a more fluid and visually appealing scrolling experience. With these CSS styles in place, your website’s scrolling behavior becomes more intuitive and user-friendly.

scroll-behavior.css

:is(h1, h2, h3, h4, h5, h6)) {
  scroll-margin: 2.25rem;
}
html {
  scroll-behavior: smooth;
}

:is(h1, h2, h3, h4, h5, h6)) {
  scroll-margin: 2.25rem;
}
html {
  scroll-behavior: smooth;
}

Accessible Focus Visibility

The :focus-visible pseudo-class allows you to apply styles to an element when it receives focus, but only if the focus is visible to the user. This is particularly useful for accessibility purposes, as it helps users who navigate websites using the keyboard to identify which element has focus. In this example, a solid outline with a customized color and width is applied to the focused element, enhancing its visibility.

focus-visible.css

:focus-visible {
  border-radius: 0.125rem;
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: hsl(var(--theme-accent) / 1);
}

:focus-visible {
  border-radius: 0.125rem;
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: hsl(var(--theme-accent) / 1);
}

Eye-Catching Target Change Animations

These CSS styles demonstrate how you can create eye-catching animations when a specific target (e.g., heading) within an article is selected. The noScope360 keyframes animation applies a rotation and scaling effect to the ::before pseudo-element of the targeted heading, making it visually engaging. The colorMeSurprised keyframes animation changes the color of the targeted heading, adding an element of surprise to the user’s interaction with the page.

target-animation.css

@keyframes noScope360 {
  0% {
  }
  50% {
    transform: rotate(1turn) scale(2);
  }
  100% {
    transform: rotate(3turn);
  }
}
 
article :is(h1, h2, h3, h4, h5, h6):target::before {
  animation: noScope360 1s forwards;
}
 
@keyframes colorMeSurprised {
  0% {
  }
  15% {
    color: hsl(var(--theme-accent));
  }
  100% {
  }
}
 
article :is(h1, h2, h3, h4, h5, h6):target {
  animation: colorMeSurprised 3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

@keyframes noScope360 {
  0% {
  }
  50% {
    transform: rotate(1turn) scale(2);
  }
  100% {
    transform: rotate(3turn);
  }
}
 
article :is(h1, h2, h3, h4, h5, h6):target::before {
  animation: noScope360 1s forwards;
}
 
@keyframes colorMeSurprised {
  0% {
  }
  15% {
    color: hsl(var(--theme-accent));
  }
  100% {
  }
}
 
article :is(h1, h2, h3, h4, h5, h6):target {
  animation: colorMeSurprised 3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

Balanced Text Wrapping

The text-wrap property controls how long strings of text are allowed to wrap within an element. By setting it to balance, the text will be divided evenly across multiple lines, creating a visually pleasing distribution of words within the available space. This can be particularly useful when dealing with long link texts in navigation menus, ensuring they wrap nicely without creating awkward line breaks.

text-wrap-balance.css

nav a {
  text-wrap: balance;
}

nav a {
  text-wrap: balance;
}