Outside drop shadows in CSS3 creates an interesting visual effect by giving

I am currently using the following CSS styling for a list of li items.

border: 1px solid black;
border-radius:10px; 
box-shadow: 8px 8px 4px #666;
-o-box-shadow: 10px 10px 5px #888;
-icab-box-shadow: 10px 10px 5px #888;
-khtml-box-shadow: 10px 10px 5px #888;
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;

My goal is to create spacing between the elements in order to prevent the drop shadow from overlapping the next item.

The challenge I am facing is that the shadow and rounded corners need to be applied directly to the li element, rather than moving them to a child div inside the li for spacing purposes.

This constraint exists because I use Ajax to change the background color of the li elements, and if I place the shadow on a child element, the background color will extend beyond the box where the shadow is not present, resulting in an undesired effect.

css

Answer №1

To enhance the appearance of your list items, you can adjust the height and margin properties with values that suit your design preferences:

li {
    height: 35px;
    margin:0 15px 15px 0;
    border: 1px solid black;
    border-radius:10px; 
    box-shadow: 8px 8px 4px #666;
    -o-box-shadow: 10px 10px 5px #888;
    -icab-box-shadow: 10px 10px 5px #888;
    -khtml-box-shadow: 10px 10px 5px #888;
    -moz-box-shadow: 10px 10px 5px #888;
    -webkit-box-shadow: 10px 10px 5px #888;
    box-shadow: 10px 10px 5px #888;
}

Feel free to experiment and customize these values based on your needs.

If you'd like to test the code further, you can visit this link for a live demo: http://jsfiddle.net/codenighter/FUUwG/. I've included the padding property for additional spacing between the border and text, and set a left margin of 15px (which you can modify or omit).

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

Troubleshooting: Why is Jquery unable to retrieve image height?

Having trouble using jQuery to find the actual height of the first image nested within a container. I can access the src attribute but not the height. Any suggestions on how to get the accurate height? Is it necessary to retrieve heights via CSS? Unfortu ...

javascriptjquerycssimageheight

Stop storing CSS data for nopCommerce

Currently, I am looking for a method to avoid caching CSS files on my nopCommerce website. In the past, I have achieved this by adding the date and another element at the end of the CSS call. Html.AppendCssFileParts("~/Themes/CustomTheme/Content/css/site. ...

htmlcssasp.netcachingnopcommerce

What is the best way to keep an image fixed at the bottom, but only when it's out of view in the section

There are two buttons (images with anchors) on the page: "Download from Google Play" and "Download from App Store". The request is to have them stick to the bottom, but once the footer is reached they should return to their original position. Here are two ...

javascriptjqueryhtmlcssfrontend

Implement the Bootstrap datetimepicker functionality for the specified div element

The date picker successfully functions when I assign the id to the input tag as shown below: <div class="col-sm-4" id="datepicker"> <input type="text" class="form-control" id="inputDate" placeholder="Date"> <span class="glyphicon gl ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to customize a div depending on the validation status of all reactive form fields within it?

I am facing a challenge with a rather complex form that contains multiple fields. Some of these fields are used to create logical blocks, and I would like to emphasize the surrounding div if any of these included fields are invalid. Can you suggest the bes ...

cssangularvalidationangular-reactive-formsstyling

Tips for showing form data upon click without refreshing the webpage

Whenever I input data into the form and click on the calculate button, the result does not appear in the salary slip box at the bottom of the form. However, if I refresh the page and then click on the calculate button, the results are displayed correctly ...

javascripthtmlcssbootstrap-5

What steps can I take to prevent constantly re-fetching a disabled CSS file?

I'm currently in the process of implementing a dark theme on my website, and my current method involves using 2 style sheets: <link rel="stylesheet" type="text/css" href="/flatly.css"> <link rel="stylesheet& ...

htmlcssvue.jsdarkmode

Unable to alter background color of checkbox with jQuery slide toggle

I've been working on changing the background colour of the toggle button to green when it's turned on. I feel like I've followed all the correct steps, but for some reason, the background just stays grey. Can anyone point out what might be ...

jqueryhtmlcsscheckboxslidetoggle

Adding a background image in javascript using data from a MySQL database

My current tech stack includes CodeIgniter, vanilla JavaScript, AJAX, CSS, and MySQL. I am trying to figure out how to set the background of an image that is stored in a MySQL database. While the following code is error-free and working perfectly, my cha ...

javascriptphpcssajaxcodeigniter

What are some ways to utilize symbol fonts such as marvosym within a web browser?

Are you looking to use special LaTeX fonts like \Pluto from marvosym in your web development projects? Wondering how to display this symbol with HTML / JavaScript / CSS without relying on an image? You can download the font from This symbol corresp ...

javascripthtmlcssfonts

Is it possible to create a similar design that is also responsive?

I've been struggling to create a header for a website project I'm working on. My goal is to design something like the image below: https://i.sstatic.net/szQGf.jpg The biggest challenge I'm facing is making this design responsive. The point ...

htmlcss

Utilize CSS and Bootstrap to ensure equal-sized responsive images in a row by scaling them down to the same dimensions

I am new to web design and struggling with resizing images using the img-fluid class in a particular portfolio view where they function as thumbnails. I will upload some images to clarify my goal. The challenge is maintaining consistency in size for each i ...

htmlcssbootstrap-5

Using HTML to showcase various prompt messages based on the screen resolution

For the button click event, when clicked on desktop screens it will show a prompt message saying 'Hi'. On the other hand, when clicked on mobile screens, the prompt message displayed will be "Hello". ...

javascriptangularjshtmltwitter-bootstrapcss

I'm looking to keep the footer anchored at the bottom without using the absolute positioning

I am currently developing a website and have implemented a wrapper for the footer. My goal is to create a sticky footer, but when I minimize the screen, the footer ends up overlapping with the content and header. #footerWrapper { height: 177px; bottom: ...

htmlasp.netcsssticky-footer

Words fail to display

.sport { content: url("../img/sport.png"); background-color: rgba(0,0,0,1.0); top: 61px; height: 310px; width: 300px; position: absolute; margin: 0; left: 0; border-radius: 4px; overflow: hidden; } .sportsandactivis { background-colo ...

htmlcss

Exploring the reasons for utilizing class and ID selectors within a <div> element to enclose a map in OpenLayers

The 'quickstart' guide provides a comprehensive overview of using id and class css selectors within the html code. In order to link the map object to a specific div element, a target is required as an argument for the map object. This target val ...

cssopenlayersopenlayers-3

The pull-right feature in Bootstrap 4 seems to be malfunctioning when used in a

Currently, I am utilizing bootstrap 4 for my project. I have encountered an issue with the navbar not aligning correctly on the page, and I'm struggling to identify the root cause of this problem. Is there someone who can provide assistance in resolvi ...

htmlcssbootstrap-4

Unexpected issue with accessing the jQuery class descendant

I am currently developing a photo gallery and I am trying to add some CSS styling to the first photo that is visible within my #wrapper div. Below is the code snippet I have been working on: $('.inside:first-of-type>div:nth-of-type(1)').css(& ...

jquerycss

A solution for optimizing accessibility by concealing anchor outlines in Internet Explorer and Firefox

Initially, I want to clarify that I acknowledge the fact that removing outlines impairs keyboard navigation. In contrast to Internet Explorer and Firefox, Google Chrome handles this issue by displaying outlines exclusively when the user interacts with the ...

cssinternet-explorerfirefoxfocusaccessibility

iOS 11's Mobile Safari presents a challenge for web apps with the nav bar overlapping the top portion of the screen, cutting off content that relies on

When using 100vh on Mobile Safari, it fails to account for the height of the lower navigation bar. For example, look at the screenshot below. To show my app-like footer, I have to manually subtract 74px from the container's height in a somewhat messy ...

cssweb-applicationsresponsive-designmobile-safari