All geek questions in one place

Can a gradient be applied to a shadow box?

I am trying to create a faded embossed shadow box using css3. So far I have an embossed shadow, thanks to this tutorial and this one .

By combining these two guides, I wonder if there is a way to apply the gradient to the shadow box?

Here you can find what I am trying to create:

enter image description here

and here is the problem: enter image description here

Note that the shadow of the dark shadow should disappear.

And find the codes here: http://jsfiddle.net/xkc8Lvs1/

.nav-tabs:after { content:""; height: 2px; background: linear-gradient(to right, rgba(255, 255, 255, 0.0) 0, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.0) 100%); display: block; margin: 10px 0; box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.0);

}

+6
source share
1 answer

Here is one solution that uses one object and two linear gradients. Obviously, these are not field shadows, but you can add shadows as shadows to this element, as shown in the example below.

The downside of using this is that the linear gradient is IE10 + and box-shadow can be used with IE9 +

Js Fiddle Demo: http://jsfiddle.net/urwjb06x/1/

  .separator { height: 2px; border:none; background-color: transparent; background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)), linear-gradient(90deg, rgba(255,255, 255,0), rgba(255, 255, 255, 1), rgba(255,255,255,0)); box-shadow: rgba(255,255,255,0.8) 0 0 20px; background-repeat: no-repeat; background-position: 0 0, 0 1px; background-size: 100% 1px; }

Update: Now it looks correct in Firefox. I forgot to change rgba(0,0,0,0) to rgba(255,255,255,0) , which of course is a huge difference. ( here I found an opener for the eyes )

+3
source

Source: https://habr.com/ru/post/977608/

More articles:


All Articles