I'm looking to enhance a DIV element by applying a shadow effect using CSS3. To achieve a shadow on the bottom of the DIV, I have utilized the following code:
-webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.75);
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.75);
However, how can I also add the same shadow effect to the top?
Appreciate any guidance.
There are two options available to address this issue:
1) Utilize the spread property with a negative value to counteract the blur effect and prevent the shadow from appearing on the sides:
.one {
box-shadow: 0px 6px 8px -3px rgba(0, 0, 0, 0.75), 0px -6px 8px -3px rgba(0, 0, 0, 0.75);
}
2) Apply clipping to the output so that the borders remain hidden. To achieve this, you will need to use position: absolute:
.two {
box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.75), 0px -6px 8px rgba(0, 0, 0, 0.75);
clip: rect(-12px, 100px, 62px, 0px);
position: absolute;
}
To achieve multiple shadows, simply separate your box-shadow arguments with commas:
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.75), 0 -1px 10px rgba(0,0,0,0.75);
If you're looking for the perfect solution, consider something like this:
.container {
box-shadow: 0 12px 12px -12px rgba(0,0,0,.8),
0 -12px 12px -12px rgba(0,0,0,.8);
}
Check out this JSFiddle example
Greetings, StackOverflow community! I'm currently working on an Angular + Node app and I've run into a major problem related to forms and validators in Material Angular. Right now, I'm facing an issue where the HTML component is not recogn ...
I'm facing a challenge with jQuery, HTML, and CSS. I'm currently in the process of designing a website for a railway company. The Home page is completed, but I've hit a roadblock on the tickets page. Using just HTML, CSS, and jQuery to build ...
Where can I locate the HTML5 specifications for Internet Explorer, Opera, Firefox, and Google Chrome browsers? ...
I've been working on aligning images in a row and centering them using flex, but I'm having trouble figuring it out. I managed to center all the images with flex and justify-content center, but setting flex-direction: row on the container doesn&a ...
Is there a way to adjust the grid layout so that the second row of blocks align just below the corresponding block above instead of creating an entirely new row? http://jsfiddle.net/AndyMP/wSvrN/ body { margin-left: 0px; margin-top: 0px; marg ...
Whenever I submit a form by clicking on the "send message" button, I want to display an Alert message using jQuery. However, currently, I have to double click for the alert message to appear. How can I make it so that the alert message is shown with just o ...
I'm dynamically creating tab navigation from controllers using a list. <div class=""row> <div class="col-xl-3"> <!-- Tabs nav --> <div class="nav flex-column nav-pills nav-pills-custom" id="v-p ...
Creating a function that involves multiple boxes with a search function. The search function is working for the most part, but when clicking on a result, certain content should display. function filterFunction() { var input, filter, ul, li, a, i; ...
When I run the code, I see a table and a button. After entering data in the prompts as instructed, the table does not get updated. I'm unsure why this is happening. Can someone please explain? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...
While attempting to scrape data from the AJIO website, I encountered an issue where the content retrieved by Python did not match what I saw when inspecting the exact webpage. It appears that there is some JavaScript code present on the page which dynamica ...
I am trying to implement the functionality shown in the image. When the Settings button is clicked, a window should open allowing the user to navigate to their desired option. However, I am facing an issue where nothing happens when the button is clicked. ...
We have an XML file named "servers.xml" that needs to be parsed. This file is located on the same server where we want it to be parsed, in the same folder. <root> <list> <server> <server name="28 Disconnects La ...
After diving into react flow, I found it to be quite user-friendly. However, I've hit a roadblock while attempting to update the styles of a selected node. My current workaround involves using useState to modify the style object for a specific Id. Is ...
I'm attempting to divide the viewport's height between two divs. In the top div, there is a small div followed by a larger div that should scroll if it doesn't fit within the remaining space of the parent div. Below is the structure of my HT ...
Struggling with a responsive CSS menu on my website, . The switcher on mobile seems to automatically click the first item in the menu (Home) as I open it, redirecting me instantly. When setting the link to "#" everything is fine, but then I lose the home l ...
Hey there, I'm encountering a strange issue with the form below echo "<td class='contact-delete'> <form method='post' action='update_record.php'>"; echo "<button type='submit' value='" . $ ...
How can I extract the URL of a link from a webpage and add it to my code without an ID for that specific link? Is there a way to search based on the content within the <a> tag? ...
I'm attempting to incorporate this functionality into my Angular project ( link ), but I'm facing challenges with styling it using CSS. Could this be due to limitations in overriding the default settings? I came across this helpful resource: sour ...
I am working on a component in ReactJS that involves a circle in the center displaying the average (rendered as a div element), with 12 progress bars aligned around it at equal angles. To achieve this, I am utilizing React Bootstrap ProgressBar. <Progr ...
Seeking advice regarding setting up a recruitment portal for my employer. Having trouble with the bootstrap scaffolding - columns appear squashed on smaller devices despite using xs columns. Looking for guidance to make it more responsive. Would greatly a ...