Ways to apply a box shadow exclusively to specific elements

Question

Ways to apply a box shadow exclusively to specific elements

Is there a way to apply a box-shadow to a div without it affecting specific other divs?

In simpler terms, is it possible to prevent shadows from being cast on a particular div?

Take for example this scenario: http://jsfiddle.net/Cd6fE/

How can I prevent the shadow generated by .p1 from appearing on .noShadowsOnMePlease, while still casting a shadow on other divs?

If necessary, I am willing to use JavaScript or jQuery for a solution, but ideally, I'd prefer to achieve this using pure CSS.

Solution: Essentially, no, but you can create a workaround if the shadow is static. Alternatively, consider using css masking, although browser support may be limited as of Jan 2014. A good workaround without css masking can be found here: http://jsfiddle.net/zExS9/ - this method uses the :before selector to conceal shadow sections and then hides overflow.

Wouldn't it be convenient to have an accepts-shadows: false; attribute?

jquery css

Answer 1

Answer №1

Unfortunately, the answer is: no, it is not possible.

Here is the best solution I could come up with: http://example.com/Cd6fE/5/

If you apply a transparent background to your .p1 element, you can create a transparent shape within the shadow. This seems to be the only workaround available.

To hide the remaining parts of the shadow, consider using blue pseudo elements.

Answer 2

Unfortunately, the answer is: no, it is not possible.

Here is the best solution I could come up with: http://example.com/Cd6fE/5/

If you apply a transparent background to your .p1 element, you can create a transparent shape within the shadow. This seems to be the only workaround available.

To hide the remaining parts of the shadow, consider using blue pseudo elements.

Answer 3

Answer №2

To enhance your project, experiment with utilizing various pseudo-selectors such as :after in the following manner:

.item1:after, .item2:after, .item3:after {
  display:block;
  content:" ";
  position:absolute;
  width:20px;
  height:20px;
  box-shadow: 0px 0px 5px 5px #000;
  background-color:black;
}

For a visual example, view this Demo Fiddle

Answer 4

To enhance your project, experiment with utilizing various pseudo-selectors such as :after in the following manner:

.item1:after, .item2:after, .item3:after {
  display:block;
  content:" ";
  position:absolute;
  width:20px;
  height:20px;
  box-shadow: 0px 0px 5px 5px #000;
  background-color:black;
}

For a visual example, view this Demo Fiddle

Answer 5

Answer №3

While there are methods to simulate it, truly preventing the rendering process seems difficult

One simple solution is changing the shadow color to blue, creating the illusion of it blending into the background seamlessly

Answer 6

While there are methods to simulate it, truly preventing the rendering process seems difficult

One simple solution is changing the shadow color to blue, creating the illusion of it blending into the background seamlessly

Answer 7

Answer №4

To position the elements over the shadow-casting element, you can utilize z-index. This will ensure that the shadow remains hidden underneath the element.

Check out this Updated Fiddle for reference

It's worth noting that only the third box .p3 is showcasing a shadow effect.

Update: Another approach is to use inset box-shadow to create shadows inside the divs. Feel free to review this updated example on Fiddle, keeping in mind that adjustments to shadow positioning may be necessary.

Don't forget to include vendor prefixes like -moz-, -webkit-, -o- when working with box-shadow properties.

Answer 8

To position the elements over the shadow-casting element, you can utilize z-index. This will ensure that the shadow remains hidden underneath the element.

Check out this Updated Fiddle for reference

It's worth noting that only the third box .p3 is showcasing a shadow effect.

Update: Another approach is to use inset box-shadow to create shadows inside the divs. Feel free to review this updated example on Fiddle, keeping in mind that adjustments to shadow positioning may be necessary.

Don't forget to include vendor prefixes like -moz-, -webkit-, -o- when working with box-shadow properties.

Ways to apply a box shadow exclusively to specific elements

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

How to efficiently handle a queue of JSON calls and callbacks using jQuery

Preventing the automatic selection of the initial item in a PrimeNG dropdown menu

Struggle with Arranging Elements in CSS using position absolute & relative

What is the best method for restricting the visibility of an animation to specific regions within an SVG?

Tips for adjusting breakpoints in the SCSS of Vuetify version 2?

Using both PHP and jQuery to add a class upon changing the URL

Ways to conceal images until AFTER the completion of the jquery flexslider loading process

Utilizing vue-router to create two separate navigation bars where only one link is highlighted as active

Arranging expandable divs horizontally

Issue with modal rendering in Bootstrap4 when the body is zoomed in

Searching for text using JQuery autocomplete feature with results fetched from an external source

Change the left position of the sliding menu in real-time

What is the method for generating an oval shape with a border-radius in CSS?

Video playback disabled on hover in Chrome browser

A guide on transferring and transforming text data on the server

Increasing the size of elements with jQuery animate method

What could be causing my page width to only expand to 100% when using "fit-content"?

Having trouble with Isotope masonry functionality

Exploring the capabilities of jQuery ajax, working with arrays, and

Building a JSON-powered navigation bar with Bootstrap 4