Web designer Stelian Firez shares a neat trick making clever use of CSS blend mode to de-emphasize background image icons on visited links. The reason why the usual opacity
or rgba
codes cannot be used to dim images is because browsers limit the number of CSS properties that can be applied to visited links, for privacy reasons. Stelian’s workaround comes from his experience designing in Photoshop, whereby he sets background-blend-mode:screen;
and background-color:#000;
to all icon links and then applying background-color:#ccc;
to the :visited pseudo element. Click on the buttons below to read the full post or view the demo.
comment 0