Applying shadows to a collection of HTML elements

I am trying to style two elements that are positioned next to each other with one side touching. The issue I'm facing is that when adding shadows underneath, one shadow always overlaps the other element. Adjusting the z-index can help but it only determines which element's shadow will be on top.

It would be ideal if there was a way to apply a shadow to a group of elements so that the shadows render behind the entire group without any interference regardless of their vertical ordering in terms of z-index.

Is there a CSS3 solution to achieve this effect without using shadow images?

css

Answer №1

Consider incorporating a 

span:before {

pseudoclass

http://example.com/87HjK/

A clever workaround that gets the job done!

Answer №2

After carefully considering your issue, I have put together a demonstration for you to review. Please leave any feedback in the comments below! Check out the demo here

Answer №3

Another approach is to utilize the clip property:

div {
    display: block;
    box-shadow: 0 0 10px 2px black;
    background-color: #fff;
    background: linear-gradient(180deg, red, white 30px);
}

#one {
    height: 200px;
    width: 200px;
    margin-left: 50px;
    position: relative;
}

#two {
    height: 50px;
    width: 50px;
    margin: 0 0 0 -50px;
    position: absolute;
    clip: rect(-10px, 50px, 100px, -10px);
}

demo

  • Pros: Allows for utilizing the full extent of the divs (as shown by the gradient background)

  • Cons: The second div must be absolutely positioned to function correctly (or fixed; but not any other position)

Answer №4

Why not consider using four divs if there are images inside? Two could be used for shadow effects, while the other two can be positioned on top with the same coordinates but without shadows, just a background-image.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Change the background color to be visible when there is text overflow with CSS

When I set my <P> tag with a fixed height and overflow:hidden, the text is displayed. However, when I apply a hover effect to it, I set overflow:visible; The issue I am facing is that the text is displayed, but I would like to adjust the z-index and ...

htmlcss

Tips for adjusting the table's height and width in a container while also including horizontal and vertical scroll bars in the <tbody> to prevent overflow

Despite adding height and width adjustments in the table tag and setting the overflow properties to 'auto', the table still overflows. Attempting to follow this, it doesn't seem to work with my code. Any assistance in identifying mistakes or ...

htmlcsstwitter-bootstraphtml-tablebootstrap-4

Implementing dual backgrounds in CSS

I am trying to achieve a gradient background for li elements along with different image backgrounds for each individual li. Is there a way to accomplish this? List of items: <div id="right_navigation_container"> <ul> <li id ...

htmlcss

How can I adjust a large image to fit the browser window using CSS?

I have a large image (3000px by 2000px) that I want to use as the background for my website and adjust it to fit the window size. Currently, I have implemented the following CSS: body { background: url('image.jpg') !important; background ...

htmlcssimagebackgroundposition

Creating dynamic height based on width using JavaScript

I'm trying to make a rectangle responsive based on the width of the window. This is my current logic: aspectRatio = 16 / 9 win = { width: window.innerWidth, height: window.innerHeight, } get browser() { const width = this.win.width - 250 ...

javascripthtmlcsscanvaskonvajs

Enhance your UI experience with a beautifully styled button using Material-

I was using a Material UI button with a purple background. <Button component={Link} to={link} style={{ background: '#6c74cc', borderRadius: 3, border: 0, color: 'white', heig ...

javascriptcssreactjstypescriptstyled-components

The box-shadow feature seems to be disabled or ineffective when trying to send HTML content via

I am having a unique approach to sending emails using html. To combat the issue of image blocking by email providers, I have resorted to utilizing box-shadow to create the images I require. The strange thing is that it appears perfectly fine in the browser ...

htmlcsshtml-email

mandatory data fields for an HTML form

I'm having some trouble creating an HTML form with mandatory input fields. The code I have so far is shown below: <div class="col-sm-6"> <label for="city" class="form-control">City ...

javascriptphphtmlcsstwitter-bootstrap

What is the best way to center these buttons vertically within the bootstrap container?

I'm having a difficult time center aligning these buttons in the middle of the page. I want them to stack on top of each other in the center of the overlay, but currently they are stuck at the top. Can anyone help me with this issue? https://i.sstati ...

htmlcssbootstrap-4

troubleshooting problems with jquery loading animations

My goal is to hide the menu, display an animated gif, hide the gif, and then show the updated menu. However, even though the menu disappears and reappears, the animated gif refuses to be shown. Where could I be making a mistake? $(document).ready(functio ...

cssjquery

How can you make a floating div shift below a non-floating table rather than resizing when there is limited space available?

My layout consists of a div and a table displayed side-by-side: <div style="float:right ...">Contents</div> <table>contents</table> I am looking for a solution to make the div move below the table when there is not enough space to ...

htmlcsscss-float

Creating Functions with HTML, CSS, and Javascript

I have been working on a website that is designed to convert numbers for you. Most of the code is complete, but I have encountered an error that I am currently unable to resolve. When I try to run the code, I see content on the page but when I click the ...

javascripthtmlcss

Split a column into two at the md breakpoint with Bootstrap

I am looking to rearrange the cards in a specific order on breakpoint -md. Please refer to the image below for reference. https://i.sstatic.net/UXABN.png The goal is clarified in the image above. I would prefer if this can be achieved using bootstrap and ...

htmlcssbreakpointsbootstrap-5card

What is the most efficient way to create a smiley face emoji box using HTML?

I want to incorporate a box with smiley icons above the comment section that opens with a click using jQuery. Here's what I have come up with: <div class="emo"> <i href="#" id="showhide_emobox">&nbsp;&nbsp;&nbsp;&nbsp;&a ...

htmlcss

Avoid displaying a popup menu on the webpage during page refresh

How can I prevent a popup menu from appearing again after refreshing the page? I have tried using some javascript but haven't been successful. If anyone has a solution, such as a video tutorial or code snippet, please let me know. ...

javascriptcss

How to shift an image to the right side of the navbar

Is it possible to change the position of an image within a navbar from left to right? I have tried using the float property but it doesn't seem to work. .logo-img{ float: right; margin: 0px 15px 15px 0px; } <a class="navbar-brand logo-img" ...

javascriptcssnavbarbootstrap-5nav

Optimizing the position of smart info windows in Google Maps

I am facing a challenge while attempting to switch the infowindow in Google maps to the smartinfowindow, as the position of the infowindow appears incorrect. This issue only occurs with the smartinfowindow and not with the standard infowindow. Upon furthe ...

javascriptcssgoogle-mapsinfowindow

What is the reason for the ul selector not functioning in the attached CSS file?

I attempted to create a navigation bar by using the code below. <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body class="background"> <ul> <li>Home</li> <li>Ne ...

csshtmlcss-selectors

Displaying user input data in a separate component post form submission within Angular

I recently developed an employee center app with both form and details views. After submitting the form, the data entered should be displayed in the details view. To facilitate this data transfer, I created an EmployeeService to connect the form and detail ...

htmlcssnode.jsangulartypescript

troubleshoot clientWidth not updating when CSS changes are made

Summary: When I adjust the size of a DOM element using CSS, its directive fails to acknowledge this change even with a watch on the size. Aim I have multiple custom directives (simple-graph) each containing an svg. My goal is to enlarge the one under the ...

javascriptcssangularjsangularjs-directive