Unique CSS shadow design & alternative solutions

I'm currently working on some HTML/CSS code and I am looking to implement a unique shadow effect with a custom width and height around a div element.
https://i.sstatic.net/3SnXV.png

Could anyone provide guidance on the most effective method to achieve this? I have attempted to use two overlapping box-shadows, but I am struggling to replicate the desired appearance shown in the image.

While I understand that I could simply create two divs and position them on top of each other with custom dimensions, I am curious if there is a cleaner, CSS-only solution available.

htmlcssshadow

Answer №1

If you're looking to create a box-shadow effect without the green bar, you can try using a negative spread radius in the CSS code. The spread radius option in box-shadow is often overlooked, but it can help achieve the desired result:

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 60px 0 0 -30px #ccc;

To apply this effect to both sides of a div element, you can simply set the spread radius to a negative value for each side. Here's an example of how you can do this in your CSS:

div{
  background: cyan;
  position: relative;
  height: 600px;
  width: 400px;
  margin: 50px auto;
  box-shadow: 
    60px 0 0 -30px #ccc,
    -60px 0 0 -30px #ccc;
}
<div></div>

Another option to consider is using the :before or :after pseudos to achieve a similar effect.

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

Encountering an issue in Angular 8 where a class is not being added after the page loads, resulting in an

Looking to dynamically add a class to a div element using Angular? I have a condition isTrue, and am utilizing the angular function ngAfterViewInit() to add the class hideOnLoad after the page loads when isTrue becomes true. Instead of traditional javascri ...

javascripthtmlangularangular8

Create a horizontal scrolling div with a fixed position

Even though this topic has been discussed numerous times, I have not found any solutions that work for me. My webpage has a sidebar on the left with position:fixed in CSS, and I want it to scroll horizontally along with the rest of the content. For the he ...

javascripthtmlcss

Strategically stacking two Bootstrap columns for perfect alignment

I'm currently having trouble with aligning Bootstrap columns. Can someone assist me, please? <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <di ...

htmlcssbootstrap-4

Achieve a full height for children without the need to specify a fixed height for the

I'm currently working on a container div that houses two child divs: the first one, positioned to align with its parent's left border, contains a series of buttons while the second one holds the main content. In essence, it operates like a tab na ...

htmlcssheight

Unable to fetch css file in Node.js

I am currently in the process of learning Node.js, but I have encountered a small issue with retrieving data from a css file. Interestingly, when I directly add the data to the index file's code, it seems to work perfectly. Let me share the relevant ...

javascripthtmlcssnode.js

Transforming the MUI CircularProgress into a half circle shape

After utilizing CirculaProgress, I was able to achieve the following: https://i.sstatic.net/Y0Seo.png Is there a simple method to transform it into a semicircle like shown here? https://i.sstatic.net/D8bKu.png ...

javascriptcssreactjssvgmaterial-ui

Arrange elements in different directions to accommodate smaller screens

I need help aligning my brand and the links on opposite sides (brand on left, other links on the right) for mobile view. The issue I'm facing is that the links on the right end up moving to the next line. Any suggestions or advice would be greatly app ...

htmlcssbootstrap-5

Create an XPath by utilizing the class and text attributes of a div element

Struggling to create a relative xpath for use with webdriver, none of the ones I've attempted seem to be working. Here is my Web Element: <div class="pa-PrimaryNavWidget-hyperlink" style="color: rgb(255, 255, 255); cursor: default; background-col ...

htmlxpathselenium-webdriverautomation

What is the best method for aligning buttons in a row with all the other buttons?

I have been attempting to display two buttons, id="strength" and id="minion", when a certain button, id="expandButton", is clicked. I want these two buttons to be positioned on either side of the button that triggers their cre ...

javascripthtmlcss

HTML5 database error: Uncaught TypeError due to illegal invocation

When I test the code below in Chrome, I encounter an error: var db = openDatabase('foo', 1, 'foo', 1111); var sql = function(callback){ db.transaction(function(tx){ callback(tx.executeSql); }); }; sql(function(query){ ...

javascriptdatabasehtmlgoogle-chrome

Is it possible to uncheck a checkbox from a list, even if some of them are already unchecked?

I am attempting to implement a feature where checking a checkbox selects all others in the list, and unchecking one deselects all. Currently, only selecting one checkbox allows me to check all the rest, but unchecking one doesn't trigger the reverse a ...

javascriptjqueryhtmlcheckbox

Decrease the size of ion-list items in Ionic 2

I found a similar query over on Stack Overflow, but it's related to Ionic 1 where the ion-item still includes ion-content. In Ionic 2, there is no ionic-content element. I've attempted to adjust the height, padding, and margin of both the ion-ite ...

cssionic-frameworkionic2

Unable to update div CSS using button click functionality

I have been working on this HTML/CSS code and I am trying to change the style of a div using a JavaScript button click event so that the div becomes visible and clickable. However, despite my efforts, it doesn't seem to be working as expected. Whenev ...

javascripthtmlcss

Tips for resolving Layout Shift issues in responsive images utilizing the picture & source HTML tags

One issue I encountered with the <source> element is that even when specifying the width and height attributes for both the <source> and image fallback, there is still significant layout shift. This could be due to using images with varying dim ...

htmlcssresponsivelighthouseresponsive-images

Customize the Position of Icons in Material UI

I am looking for guidance on how to position my components within an image using Material UI. Specifically, I want to move my heart component to the top right corner of the image and place the ratings at the bottom. import image from "../../Assets/pic ...

cssreactjsmaterial-ui

Having trouble displaying images on iPhone 6

I am facing an issue with the background image of one of my elements. The image loads perfectly on most devices such as iPhone 5, iPhone 5c, and Samsung Galaxy, but it does not load on iPhone 6, iPhone 6 Plus, and some iPads. Can anyone provide insights ...

htmlcssbackground-image

Hover effect for Bootstrap cards

I am working on a view where I display dynamically expanding cards upon hover. Below is the CSS code snippet: .card-deck .card { height:200px; width: 200px; transition: transform .1s; } .card-deck .card:hover { -ms-transform: scale(1. ...

phpcsshoverbootstrap-5card

Tips for wrapping text around an image using Bootstrap 5

I am having trouble getting my text to wrap around an image using the Bootstrap 5 grid system. I've attempted to use 'float: right' on the image, but it hasn't produced the desired result. The text should flow naturally around the imag ...

htmlcssbootstrap-5

`Positioning of inline-block elements`

I am encountering an issue with the display CSS attributes set for three tags: a - inline-block img - block span - inline <a id="first"> <img/> <span> A first line of text B second line of text </span> </a> <a id="secon ...

htmlcss

The collapsible tree nodes overlap one another in the D3.js visualization

I'm currently working on integrating a d3 code into Power BI for creating a collapsible tree structure. Each node in the tree is represented by a rectangular box, but I've run into an issue where nodes overlap when their size is large. Below is t ...

javascripthtmlcsstypescriptd3.js