How to delete the right part of a box shadow in CSS

I have a div with a box-shadow applied. I want to remove the right side of the shadow without adding any new code, but by modifying the existing box-shadow property. I attempted using clip-path, but I need it to also work on Internet Explorer. Can you provide some advice on how to achieve this?

.test1 {
  box-shadow: 0 0 0 1px rgba(138, 155, 168, 0.6), 0 0 0 rgba(138, 155, 168, 0), 0 1px 1px rgba(138, 155, 168, 0.3);
  padding: 20px;
  margin-top: 50px;
  margin-left: 20px;
  margin-right: 20px;
}
<div class="test1">MY AWESOME CONTENT</div>

Any suggestions or guidance would be greatly appreciated.

htmlcss

Answer №1

To achieve the desired effect, simply adjust the position of the shadow to align it behind the element in this manner...

.test1 {
  box-shadow: -1px 0 0 1px rgba(138, 155, 168, 0.6), 0 0 0 rgba(138, 155, 168, 0), 0 1px 1px rgba(138, 155, 168, 0.3);
  padding: 20px;
  margin-top: 50px;
  margin-left: 20px;
  margin-right: 20px;
}
<div class="test1">MY AWESOME CONTENT</div>

Answer №2

add an additional white shadow to cover up the unwanted one:

.example {
  box-shadow: 
   1px 0 1px #fff,
   0 0 0 1px rgba(138, 155, 168, 0.6), 
   0 1px 1px rgba(138, 155, 168, 0.3);
  padding: 20px;
  margin-top: 50px;
  margin-left: 20px;
  margin-right: 20px;
}
<div class="example">MY AMAZING TEXT</div>

Answer №3

.style1 {
  box-shadow: -1px 0 0 1px rgba(138, 155, 168, 0.6), 0 0 0 rgba(138, 155, 168, 0), 0 1px 1px rgba(138, 155, 168, 0.3);
  padding: 20px;
  margin-top: 50px;
  margin-left: 20px;
  margin-right: 20px;
}

It seems like this code is working well, but the last two box shadows may not be necessary. If you only need a border effect, there are more efficient ways to achieve it.

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

What is the best way to exclude blank fields when displaying a form for printing?

I have a form created using PHP. Although it displays correctly, I would like it to check each field and exclude any div/element/field that is left empty when I choose to print the form. Below is an example of the form code in the printable PHP file. If n ...

phphtml

What are the steps to retrieve JSON data and display it using an unordered list in an HTML document?

My JSON data structure looks like this: { "fID": "00202020243123", "name": "John Doe", "List": ["Father", "Brother", "Cousin"] } When I render this JSON element in my model and view it in the HTML, everything works fine. However, when I try t ...

javascriptjqueryhtmljsonhtml-lists

What is the best way to retrieve information from a webpage I have created using an express backend and an HTML frontend

I designed a login page named index.html that prompts users to enter their email and password, followed by a submit button with the label "Log In": <input type="submit" value="Log In" id="loginbutton"> Within my app.js ...

javascripthtmlexpressfrontendbackend

How to Align Text and Image Inside a JavaScript-Generated Div

I am attempting to use JavaScript to generate a div with an image on the left and text that can dynamically switch on the right side. What I envision is something like this: [IMAGE] "text" Currently, my attempt has resulted in the text showing ...

javascripthtmlcss

The properties of JavaFX in the CSS file are not recognized by Eclipse, showing an error message as "unknown property"

After installing Eclipse and downloading the OpenJFX SDK, I encountered an issue where Eclipse marked all -fx- properties in the .css file as warnings with the message "unknown property". Surprisingly, my JavaFX projects still compiled and ran smoothly, ...

javacsseclipsejavafxefxclipse

HTML: Attempting to extract the inner div from the outer div and relocate it outside of the outer div

I am attempting to extract an inner div from an outer div and relocate it outside of the outer div. https://i.stack.imgur.com/NSS7B.png <div class="vc_gitem-zone-mini"> <div class="vc_gitem_row.............."></div> <div> I Would ...

jqueryhtmlcss

The problem of a static click function not working when clicked on a link. What is the solution for this

Details I am currently using a flickity slideshow that automatically goes to the next picture on a click. Within the slideshow, I have placed a button with text and a link to an external website (e.g. ). My Problem: When I click on the link, my slidesho ...

javascriptjquerycssperformanceflickity

Adjusting the border size of an SVG without using the viewbox

Currently, I am working with 2 SVGs where one has a viewbox and the other doesn't. They both are set to be 100% width of the parent element. The first SVG scales according to its viewbox while the second one scales according to the height of the paren ...

htmlcss

Problems with CSS: Struggles with Overflow-x and display:flex

I have already completed 2 questions regarding the current issue I am facing. However, I have now created a more improved example. Please take a look below. The boxes are being loaded using Angular ng-bind. Check out the code pen here: http://codepen.io/a ...

javascripthtmlcssangularjsflexbox

What is the best way to enable a css class for an image in Sitecore Field Renderer?

I am working with Sitecore (7) & MVC and need guidance on how to include a css class attribute for an image using a field renderer in Sitecore. Here is the HTML structure without Sitecore: <div class="background-container"> <img src="/images/ ...

cssasp.net-mvcsitecoresitecore7sitecore-mvc

Learn the effective way to customize the primary button text color in Bootstrap 4 using SCSS styling

Looking to customize the .btn-primary text color. I attempted to modify the background color in _variables.scss by adding the following line: $primary: #a1c1b6; However, I was unable to change the text color despite trying various options. // not working ...

csstwitter-bootstrapbootstrap-4sass

Volkswagen elements spilling over

Why are two divs overlapping each other? I have divided the two divs equally with viewport width. When I set the width to 49% instead of 50%, the code works fine. Why is that? <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

htmlcss

Can you tell me the name of the unique animated style featured on the new iMac Pro page?

Is it possible to replicate the animation seen on the Apple iMac Pro page using only HTML5 and CSS3? What is this particular type of animation called? Visit the Apple iMac Pro page for reference. ...

htmlcss

Utilizing visual elements to change the options of a dropdown menu

I am currently working on creating a form for a client who has requested a map of the city to allow visitors to visually select their location. They want this feature to link to the City Dropdown/Select area of the form. Here is a link to the client' ...

javascriptjqueryhtml

Is it possible to include line breaks within a CSS value?

(I am posting this here because I couldn't find a solution and eventually figured it out through trial and error. Hopefully, this information can help others with the same question.) Note: This is not the same as the discussion on Single-line vs mult ...

csssyntax

What is the jQuery plugin that can search for elements and display them in real-time within a DIV?

Currently, I am in search of a jQuery plugin that can assist me with the following: Ability to have an input field for user search text Search through my elements and display only those that match the search string entered by the user. Essentially creati ...

jqueryhtmlsearchpluginsnavigation

What is the best way to begin IMA HTML5 SDK ads with sound off?

One challenge I encountered was getting autoplay video to work on iOS 10 using HTML5. To achieve this, I utilized the following code: <video autoplay loop muted playsinline controls> <source src="http://distribution.bbb3d.renderfarming.net/vi ...

javascriptioshtmlimasdk

When the size is reduced, the content spills out of the div

I made a div container and added some callouts inside it. You can find my code uploaded here https://codepen.io/muhammad-usman-the-animator/pen/mKgoNj .name { color: black; font-weight: bold; margin-left: 20px; font-size: 20px; } .det ...

htmlcssbootstrap-4

Converting HTML into an image in a Node.js Buffer

Can you suggest a simple method to convert a raw HTML string, like the following: <b>Hello World</b> into a regular PNG image in Node.js Buffer form? I've been exploring various npm packages for a solution that supports this functionali ...

htmlnode.jsnpm

The onreadystatechange function is not triggering

For some reason, the onreadystatechange callback function is not triggering in asynchronous mode. After testing the post request in synchronous mode, it seems that the post itself is functioning correctly (the testing code used for synchronous mode has b ...

javascripthtmlajax