Home/ Questions/Q 8923611
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T07:10:21+00:00

I’d like to develop a generalizable solution for creating etched lines. The goal is

  • 0

I’d like to develop a generalizable solution for creating etched lines. The goal is to be able to not have to manually pick closely related colors for every color scheme where I want etching. The issue seems that the color of the indented part in relation to the color of the background is somewhat critical for creating the 3 dimensional effect.

Below is an example in blue (the lines above the comment bubble/underneath the number “11”). I think I need to use box-shadow but not sure if this is the best way.

If box-shadow is what I should use, does anyone know how to set its CSS values such that would would work for say a gray line would also work for say a blue line?

enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You could use borders with semi-transparent black/white colors (using rgba) that will darken/lighten the underlying color.

    Example at http://dabblet.com/gist/4182495

    Adding pseudo elements with :after/:before gives you extra power in adding second level borders etc..

    • 0