Verwendung eines Helligkeits()-Filters zur generischen Hervorhebung von Inhalten

Rick Strahl:

Ich kann Ihnen nicht sagen, wie oft ich im Laufe der Jahre eine benutzerdefinierte CSS-Implementierung vom Typ „Button“ implementiert habe. Im Laufe der Jahre habe ich Bilder, Hintergründe, Verläufe und Deckkraft verwendet, um ein Steuerelement effektiv „hervorzuheben“. All das funktioniert natürlich, aber das Problem bei den meisten dieser Ansätze ist, dass man auf die eine oder andere Weise einen Farbwert, ein Bild oder einen Verlauf fest codiert.

Sie haben sicherlich viel mehr Kontrolle, wenn Sie exakte Farben angeben, aber wenn Sie Helligkeit, Dunkelheit oder sogar eine Farbtonverschiebung so umsetzen können, dass sie sich auf Ihrer Website kohärent anfühlt, ist das sicherlich viel weniger Wartungsaufwand,

.button.specific-button {
  background: #4CAF50;
}
.button.specific-button:focus,
.button.specific-button:hover {
  background: #A5D6A7;
}

/* vs. */
.button:focus,
.button:hover {
  filter: brightness(120%);
}

/* or maybe you're super hardcore and do it everywhere */
:focus,
:hover {
  filter: brightness(120%) saturate(120%);
}

Direkter Link →

Kommentare