Unable to remove both top and bottom drop shadows

Even after using the code below, I am still unable to remove the small drop shadows at the top and bottom. How can I get rid of them completely?

div#inner_container {
 width: 960px;
 margin: 0 auto;
 background-color: rgb(255, 255, 255);
 box-shadow:0 9px 0 0 transparent,
            0 -9px 0 0 transparent,
            12px 0 15px -4px rgba(255, 255, 255, 0.5),
           -12px 0 15px -4px rgba(255, 255, 255, 0.5);
 position: relative;
 z-index: 5000;
}

Answer №1

Check out this solution:

box-shadow: 10px 0px 12px -5px #ffffff, -10px 0px 12px -5px #ffffff;

Answer №2

Instead of having a drop shadow at the top, it seems like the spread is set too high, causing bleeding that is visible:

box-shadow: 0 0px 0px 0px transparent,
            0 0px 0px 0px transparent,
            12px 0 9px -10px rgba(255, 255, 255, 0.5),
            -12px 0 9px -10px rgba(255, 255, 255, 0.5)

You can try the above code snippet. It may require further simplification as it appears overly complex.

Answer №3

To create a unique effect, consider adding top and bottom shadows as the background color to overlay the shadow:

box-shadow:
0 -5px 0px 0 black,
0 5px 0px 0 black,            
12px 0 15px -4px rgba(255, 255, 255, 0.5),
-12px 0 15px -4px rgba(255, 255, 255, 0.5);

You can also utilize :before and :after elements for CSS drop shadows by visiting this link: CSS Drop Shadow

For visual examples, check out these demos: http://codepen.io/anon/pen/jEkwJ

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

Trigger Vue method when the size of a div element changes

Is there a way to trigger a method every time the dimensions (width or height) of a div element change? <template> <div> </div> </template> <script> export default { methods: { updateSize() { // ...

Maximizing the worth of itemtype using jQuery: A guide

My goal is to include an 'itemtype' attribute in the body tag, body.page-body.ng-scope.device-lg(itemscope='', itemtype='') I attempted the following method $('body').add(itemtype='t1'); Unfortunately, ...

Selecting radio button does not update corresponding label

I am having an issue with setting a radio button as checked. In the example snippet, it works perfectly fine but on my localhost, it is not working. Even though the input gets checked, the label does not change. Surprisingly, if I set another radio button ...

Show me how to customize the default confirmation box using just CSS!

Is it possible to style the standard window.confirm using only CSS without any additional JavaScript code? If so, how can this be achieved? ...

Capture video frames from a webcam using HTML and implement them in OPENCV with Python

While many may find it simple, I am facing a challenge in extracting video frames from HTML or JavaScript and utilizing them in my Python OPENCV project. I have a strong background in Python OPENCV and Deeplearning, but lack knowledge in HTML and JavaScr ...

Place information from an input field into a specific row within a table

Utilizing Angular 4, I am developing a frontend application for a specific project. The interface features a table with three rows that need to be filled with data from an external source. https://i.stack.imgur.com/Dg576.png Upon clicking the "aggiungi p ...

Create a custom jQuery plugin that enables users to toggle checkboxes with the click of a button

Having trouble with my jQuery button code that is supposed to toggle associated checkboxes but ends up freezing the browser. I am in need of the following functionalities: 1) Clicking on "select all" should select all checkboxes. 2) Clicking on "select all ...

Quiz application utilizing MySQL and JSP technology

I've been developing a Web Application using JSP to host MCQ quizzes. The questions are stored in a MySql Database table called 'qna', with each question having 10 choices. My goal is to design the quiz so that each question appears on a new ...

Center text in form-control items on Bootstrap 3 grids

Can you provide guidance on achieving proper alignment of inputs and labels across bootstrap grids? I am looking to ensure that the labels are positioned exactly the same as the first column. Please refer to my plunk: http://plnkr.co/edit/jaMAp38Rr1g7BLW ...

What is the best way to create a border of white space around the background color of a table cell using CSS?

Is there a way to create a white space around the background color of a table cell using CSS? My current code has the background color extend all the way to the edge, and padding only affects the content, not the background color. #main-monitor { widt ...

I'm just getting started: an image carousel featuring a unique twist with random quote overlays, but there's a catch - it only activates on the very first image... what comes next?

After successfully displaying the generator over the first image, I encounter a problem with the second and third images where it seems to disappear. However, upon cycling back to the first slide, the generator reappears with a different quote. I've a ...

Problem with IE off-canvas scrolling

Currently, I am facing an issue with the scrolling functionality of an off-canvas sidebar on my Joomla 3 website. It seems to be working fine in Chrome and Firefox, but when it comes to Internet Explorer, the visible scroll bar refuses to move when attempt ...

Clearly defined form field even with the inclusion of value=" "

I have a database that I am using to display data in an HTML form for user editing. <input type="text" id="name" placeholder="Name" required = "true" value = <?php if(isset($_SESSION['name'])) echo $_SESSION['name'] ;?>> ...

Creating Images that appear optimized on smaller screens - the art of responsive design!

Currently, I am in the process of working on this test page located at the following link: While the page appears fine on my laptop screen, it is displaying poorly on my phone's browser. The images, in particular, appear disorganized and messy. Coul ...

Is there a method to give a webpage a subtle shimmering effect without utilizing CSS box-shadow?

Struggling to Develop a High-Performance Interface Feature I'm currently facing a challenge in coding an interface that requires a subtle and broad glow effect, similar to the example provided below: https://i.sstatic.net/E4ilD.jpg Exploration of ...

Linking two div elements together with a circular connector at the termination point of the line

I am currently working on designing a set of cards that will showcase a timeline. I envision these cards to be connected by lines with circles at each end, for a visually appealing effect. At the moment, I have created the cards themselves but I am struggl ...

Is storing text in data-content and utilizing bootstrap-popover.js compatible?

Is it possible to display HTML content in a popover using ? How reliable is it to store text in data-content? Can we expect it to function properly across all browsers? ...

What is the best way to add a -webkit-transform to a div without affecting its enclosed elements?

Is there a way to apply a webkit transformation to a div without affecting the text inside? I need help with achieving this. Below is my current code: .main_div { width:200px; height:100px; background:red; margin-left:55p ...

Updating the content of a bootstrap alert in real-time by utilizing a form

I am looking to incorporate the following code snippet into my project: <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-wid ...

Guide to displaying or concealing the header using PHP

Once the add button is clicked, the text should be hidden and the form should be displayed. Check out my code below: <h2 style="font-size: 2em; margin-bottom: 0.75em; margin-left: -1%;">Specify Co-Owners for self occupied property</h2> <div ...