Questions tagged [box-shadow]

The box-shadow CSS property describes one or more shadow effects as a comma-separated list. It allows casting a drop shadow from the frame of almost any element and allows for shadow rounded corners by border-radius.

The box-shadow CSS property describes one or more shadow effects as a comma-separated list. It allows casting a drop shadow from the frame of almost any element. If a border-radius is specified on the element with a box shadow, the box shadow takes on the same rounded corners (see Mozilla docs).

Further reference:

  1. W3C reference.
  2. Mozilla reference
393 questions
0
votes
1 answer

How to make inset box shadow show over child links, but still have them be clickable?

I have a div with an inset box shadow and there are links in that div that I want the shadow to display over, but still have the links be clickable. Here's an example: https://jsfiddle.net/5rsbn927/
0
votes
1 answer

Why does the CSS box-shadowing work in IE11 on a Meteor app, but not on a Sharepoint CEWP?

I asked a question about getting box-shadow to work on IE here. It turns out, though, that IE is not really the problem -- IE can produce a shadow, as seen here: The screamshot above is from a Meteor app running on localhost; However, when I try to…
0
votes
2 answers

Box shadow for panel

I have following css property defined: box-shadow: #CCCCCC x2 y2 blur2; But, when I run on browser, it says invalid property / value. What's wrong here?
Smitha
  • 6,110
  • 24
  • 90
  • 161
0
votes
1 answer

Box-shadow is cut on the right when squeezing the browser window

I'm making a 960px template and I'm experiencing a problem when squeezing the browser window. The box-shadow on the right is gone whenever I make the window smaller than my elements min-width. Why is that happening? HTML: …
0
votes
2 answers

HTML - Image box-shadow does not cover image border

I might need your help. I tried to use an image as the background of a div, and cover up the borders with a box-shadow. The problem is that it still displays like one pixel of the background image at the borders in Firefox and Internet Explorer,…
Feirell
  • 719
  • 9
  • 26
0
votes
1 answer

Overlayed box-shadow pseudoelement prevents hover event on child

Here's my fiddle. Basically I have a parent div that needs to have a box shadow around it and for various reasons this box shadow has to be a pseudoelement. This box shadow prevents the capture of hover events on the children of this parent div. How…
Jack Guy
  • 8,346
  • 8
  • 55
  • 86
0
votes
1 answer

Is there a way to combine border-image and inset box-shadow that works?

I'm attempting to make a wood frame with inset border. I made a border-image and applied an inset and regular box-shadow to it. The regular shadow works nicely as a drop shadow. The inset shadow is offset by many pixels. What's going wrong and can…
Hideto
  • 309
  • 1
  • 3
  • 14
0
votes
4 answers

How to set a shadow on a two panels page, regardless of its height?

I have already found an answer, but I am not sure this is the best approach for my problem. My page has two panels: one sidebar and one content view. I want to have a shadow over the sidebar as if the content view was producing it: The problem is…
makeMonday
  • 2,303
  • 4
  • 25
  • 43
0
votes
2 answers

How to get rid of the bottom shadow in label of the css tabs

I'm making the css tabs with shadows. How can I get rid of the bottom shadow in label? Here's an example: http://codepen.io/ekscentrysytet/pen/QbNdEB I've tried z-index: -1; for label:after but shadow disappears.
0
votes
1 answer

jQuery help for slideshow: adding a div for box-shadow effects has jQuery selecting the div

So I used this place to help me create a slideshow, however, thanks to certain limits of CSS, you can't set a box-shadow property to IMG. However, the issue is thanks to the nature of the script, once it's done running through the IMGs, it…
0
votes
1 answer

Shadow on text and on box have not the same Y position

I'm using a function for generating a gradian shadow on text or html tag. And I don't understand why the angle of the shadow isn't the same. To get the same result on HTML tag I have to divide by 2 the y position of shadow (you have to uncomment…
Arthur
  • 4,870
  • 3
  • 32
  • 57
0
votes
2 answers

box shadow for simulating top border

Trying to simulate a top border that doesn't start at the left edge of the element. .border-top { height: 50px; width: 100px; box-shadow: 15px -1px 0 0 black; } The above css is close, but produces a black 15px wide shadow to the right…
hvgotcodes
  • 118,147
  • 33
  • 203
  • 236
0
votes
2 answers

Box-Shadow not carrying out Transition

I know this may be a dupe, but I'm willing to take the hit as I feel confident I have researched multiple solutions. I have tried many methods to get This box-shadow transition to work, including: Switching between hex, rgb, and rgba colors in the…
ExcellentSP
  • 1,529
  • 4
  • 15
  • 39
0
votes
1 answer

Box shadow inner covered by another div

I have a div that containing a inner box shadow, but these shadow is coverd by another div, i tried with postion:relative but nothing is changed. Here is a example CODE EXAMPLE example-div{ background:#fff; color:#000; margin-top: 10px; …
0
votes
1 answer

Is it possible to render a box-shadow in internet explorer while using Perch CMS?

I am using and header { -webkit-box-shadow: inset 0px -18px 99px -53px rgba(0, 0, 0, 0.75); -moz-box-shadow: inset 0px -18px 99px -53px rgba(0, 0, 0, 0.75); box-shadow: inset 0px -18px 99px…
skinnysuit
  • 157
  • 2
  • 7