Stupid CSS Tricks, Part 1

CSS often has a lot of features and techniques who usage and value aren’t always immediately obvious. Sometimes your just meander around come up with an effect without really having a use for it, other times your project really needs something different or off the beaten path.  I suspect most of these in this series will fall in the former group, thus the title.  🙂  If they are well received, I’ll make a regular column of these.

Auto Preview Text Snippet

Perhaps you are pulling a piece of text in from a longer sources and want to preview a little of it automatically.  This is often done with PHP in WordPress to create automatic teasers.  You can do it with CSS as well, however.

<p class="snippet">This is a fascinating article about exactly what you were looking for. You should definitely ready this.</p>

.snippet {
  width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Inverse Fading Menu

A common effect is to intensify the item the user’s mouse is currently hovering over.  This reverses that and de-intensify’s the ones not hovering on.  Maybe useful in focusing visitor attention or subtly directing them to follow up with a click?

<div class="inverse-fade">
  <span>Home</span>
  <span>Shopping</span>
  <span>Team</span>
  <span>Mission</span>
  <span>Contact</span>
</div>

span {
  transition: opacity 0.1s;
  padding: 0 15px;
}
.inverse-fade:hover span:not(:hover) {
  opacity: 0.3;
}

Fancy Text Underscoring

Print oriented designers will complain endlessly about the loss of control in HTML/CSS layout compared to the print design arena.  Things have gotten a lot better though.  This is an example of how to do fine-control text underlining without having letters that have dangling segments breaking up the underline.

<p class="underscore-fancy">The wizard quickly jinxed the gnomes before they vaporized.</p>

.underscore-fancy {
  display: inline;
  text-shadow: 1px 1px #f5f6f9, -1px 1px #f5f6f9, -1px -1px #f5f6f9, 1px -1px #f5f6f9;
  background-image: linear-gradient(90deg, currentColor 100%, transparent 100%);
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: 100% 1px;
}
.underscore-fancy::-moz-selection {
  background-color: rgba(0, 150, 255, 0.3);
  text-shadow: none;
}
.underscore-fancy::selection {
  background-color: rgba(0, 150, 255, 0.3);
  text-shadow: none;
}