Stack Overflow
Stack Overflow

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
13
votes
1 answer

Is CSS's efficiency with text-shadow as bad as box-shadow?

I have noticed in my many years of web design that CSS's box shadow is enormously expensive with resources and causes many old phones to lag severely; but is that is the case with text-shadow? When is it okay to use text-shadow, and how is it…
Joshua Sandoval
  • 441
  • 1
  • 6
  • 13
11
votes
2 answers

Box Shadow disappearing on a div, when deleting list elements inside it

To test or see the bug: (Note: Bug has been replicated on the link in Second Update, since the question was first posted) go to sukritchhabra.com/importr Type Bootstrap in the search bar. Select bootstrap from the suggested list (Note: If you do…
Sukrit
  • 308
  • 2
  • 12
11
votes
11 answers

CSS Shadows all four sides of div

I want to achieve this in CSS - not CSS3 as I want it to be supported by all browsers ie a div containing content, with the shadows on every side. The top area will be used for navigation. I have searched for tutorials but so far to no avail.…
Sean McRaghty
  • 295
  • 2
  • 6
  • 17
11
votes
5 answers

CSS box-shadow in jQuery .css()

Firefox 18 does not seem to recognize the -moz-box-shadow or the box-shadow CSS attribute. If I use border-color, everything works fine. $($this).hover( function () { //$(this).css('border-color', '#ff0'); …
Chris
  • 309
  • 1
  • 3
  • 14
10
votes
4 answers

Double box/border? Is this possible in CSS?

I'm trying to recreate this image in CSS. This is what I got from experimenting, so far. I used box-shadow to act as the second box. I'm not sure if there's a better way to do this? h4 { font-family: sans-serif; text-transform: uppercase; …
Solus
  • 123
  • 5
10
votes
4 answers

Creating a partial box shadow on a skewed div

I'm trying to create a partial shadow on a skewed div, as close as I can get to this creative. Right now I've been trying to do this with pseudo elements (before specifically) but I found that those elements behave strangely whenever I skew the…
Kathryn Crawford
  • 611
  • 1
  • 10
  • 27
9
votes
4 answers

box shadows on multiple elements at same level but without overlap?

I want to create something like the following screenshot, but I can't figure out any z-index value for which the shadow doesn't appear either over the first or second box (they are always stacked either with the first one on top, or the second). Is…
EoghanM
  • 25,161
  • 23
  • 90
  • 123
9
votes
5 answers

android cardview showing border around card

Android cardview is showing unnecessary border around the card. I have tried different things but I am not able to remove it. It happens when I give the card a custom background color. When I remove the cardBackgroundColor, and when default is used.…
Rakesh Yadav
  • 1,966
  • 2
  • 21
  • 35
9
votes
3 answers

Box-shadow still cutting off with overflow-y set to visible

I am having the same issue as in this question, but I need to have overflow-x set to scroll or else the entire document will be wider than the screen. Theoretically, setting overflow-y to visible should keep the box shadow visible, but it still…
ZomoXYZ
  • 1,763
  • 21
  • 44
9
votes
1 answer

Why is the box shadow only visible after scrolling?

I've been trying for ages to figure out why the box shadow on my top menu is not visible when you first navigate to each page, but appears once you start scrolling. This is the site: http://gourmetsailing.co.nz/DRAFT/charters.html The class with the…
Andrea
  • 163
  • 6
8
votes
3 answers

Android: box shadow and border radius layout

I want box shadow and radius like below image, but in android box shadow not work How can i use xml for this problem ?
My Name
  • 285
  • 1
  • 4
  • 18
7
votes
3 answers

CSS - Is it possible to add a border on the box shadow?

Is it possible to add a border to a box-shadow? I want to create a class with a coloured offset with that offset being outlined in a black border. Now I know I can create a div and offset it to get this desired look, but I want to know if it's…
jermayne williams
  • 344
  • 5
  • 20
7
votes
5 answers

CSS - Combine text shadow with a text outline?

I'm trying to accomplish this (don't mind the red background) So here is what I got I can get a border around the text but then I can't combine it with a text shadow... How can I get around this? Maybe it's something with :before :after…
Zanic L3
  • 1,028
  • 1
  • 16
  • 28
7
votes
2 answers

CSS box-shadow shadows

For practice and fun, I am seeking to recreate the following logo in pure CSS in one element If you notice, each "bar" has a small, shadowed grey area, which gives it a sense of depth. I'd like to create these in pure CSS, if possible. The tricky…
Zach Saucier
  • 24,871
  • 12
  • 85
  • 147
6
votes
2 answers

Anti aliasing border radius Issue when using rgba values

I'm having an issue where when I use border radius in combination of rgba valued colors like let's say rgba(255,255,255,.8) and then use a box-shadow to somewhat make the box appear feathered I get the issue that the corners are not solid as can be…
Rafaël De Jongh
  • 898
  • 2
  • 14
  • 32
1
2
3
…
26 27