Css Tips and Tricks

Text tooltips

<button type="button" class="tooltip" data-tip="This css tooltip">
   I have a Tooltip
</button>
// only add tooltip when there is a message
.tooltip[data-tip]:not([data-tip=""])::before {
  content: attr(data-tip);
  position: absolute;
  background-color: rgba(0,0,0,0.8);
  color: #fff;
  padding: 15px 10px;
  border-radius: 3px;
  max-width: 300px;
  width: 250%;
  left: 50%;
  transform: translate(-50%, 0);
  bottom: calc(100% + 12px);
}

Extend the clickable area

button {
  border: none;
  background: #222;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  padding: 0;
  position: relative;
  cursor: pointer;
}
button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 200%;
  height: 200%;
  display: inline-block;
  /* for demo purpose only - should be removed   */
  background: rgba(0,0,0,0.2);
}

== Responsive text ==
<pre>
font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));

font-size: clamp(min, viewport-width-unit, max);

Frosted glass effect

.container {
   background-color: rgba(255, 255, 255, .15);
   backdrop-filter: blur(5px);
}

</pre>