CODEWITHSUNDEEP
htmlcss
tim peterson
tim peterson

Reputation: 24315

Generalizable etched line effect with CSS?

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

Upvotes: 0

Views: 2941

Answers (3)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196177

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..

Upvotes: 3

Bidg
Bidg

Reputation: 1

I guess there are two borders together:

border-bottom: 1px solid #1C5380;
border-top: 1px solid rgba(255, 255, 255, 0.12);

Upvotes: 0

Douglas
Douglas

Reputation: 37771

Here's the slightly simplified CSS for that comment indicator, which I found using the Chrome Web Developer tools:

.media-bar .count-badge {
    padding: 0 7px;
    background: #1C5380;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 1px 1px rgba(0, 0, 0, 0.2);
    border-radius: 12px;
}

If you visit the page and inspect the count-badge element, you'll be able to turn the box-shadow styles on and off, which will show how they create the inset effect.

Upvotes: 1

Related Questions