Creating a volume shadow effect with CSS is a great way to add

Can anyone help me achieve a shadow effect like the one shown in this image example? I've attempted to use the after pseudo element, radius, and clip, but haven't been able to get the desired result.

https://i.sstatic.net/pqUtb.png

.page{
  width: 100%;
  display: flex;
  justify-content: center;
  min-height:100%;
  background: #ebebeb;
  padding-top: 100px;
  padding-bottom: 100px;
}

.sidebar{
  width: 260px;
  height: 500px;
  background: #ebebeb;
  position: relative;
}

.sidebar::after{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    height: 500px;
    right: 0;
    width: 40px;
    box-shadow: 5px 0 20px 0 rgba(0, 0, 0, 0.4);
    display: block;
    border-radius: 50% / 20px;
    clip: rect(auto, 80px, auto, 40px);
}
<div class="page">
  
  <div class="sidebar">Sidebar</div>
  
  <div class="content"></div>
  
</div>

cssbox-shadow

Answer №1

Consider applying the box-shadow specifically to the right side:

.page{
  width: 100%;
  display: flex;
  justify-content: center;
  min-height:100%;
  background: #ebebeb;
  padding-top: 100px;
  padding-bottom: 100px;
}

.sidebar{
  width: 260px;
  height: 500px;
  background: #ebebeb;
  box-shadow: 15px 0 15px -15px rgba(0, 0, 0, 0.8);
}
<div class="page">
  
  <div class="sidebar">Sidebar</div>
  
  <div class="content"></div>
  
</div>

If you prefer using a pseudo element for this effect:

.page {
  width: 100%;
  display: flex;
  justify-content: center;
  min-height: 100%;
  background: #ebebeb;
  padding-top: 100px;
  padding-bottom: 100px;
}

.sidebar {
  width: 260px;
  height: 500px;
  background: #ebebeb;
  position: relative;
}

.sidebar:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 50px;
  transform: translateX(-50px);
  box-shadow: 15px 0 15px -15px rgba(0, 0, 0, 0.9);
}
<div class="page">

  <div class="sidebar">Sidebar</div>

  <div class="content"></div>

</div>

To achieve a more curved look (requires an inner element):

.page {
  width: 100%;
  display: flex;
  justify-content: center;
  min-height: 100%;
  background: #ebebeb;
  padding-top: 100px;
  padding-bottom: 100px;
}

.sidebar {
  width: 260px;
  height: 500px;
  position: relative;
}


.sidebar .inner {
  min-height:100%;
  background: #ebebeb;
  position: relative;
  z-index:2;
}

.sidebar:after {
  content:'';
  position: absolute;
  z-index:1;
  bottom: 3%;
  left:100%;
  transform: translateX(-18px);
  width: 15px;
  height: 94%;
  background: #999999;
  border-radius: 15px / 100%;   
  box-shadow: 0 0 10px 10px #999999;
}
<div class="page">

  <div class="sidebar"><div class="inner">Sidebar</div></div>

  <div class="content"></div>

</div>

Answer №2

body ,html {
  height:100%;
}

.page{
  width: 100%;
  height:100%;
  background: #ebebeb;
  display:flex;
  flex-direction: row;
  justify-content: center;
}

.sidebar{
  width: 260px;
  background: #ebebeb;
  position: relative;
  left:0;
  top:0;
  height:100%;
  box-shadow:5px 0px 5px #cacaca;
}


.content {
    width: calc(100% - 260px);
    padding-left: 25px;
    background-color: #dedede;
}
<div class="page">
  
  <div class="sidebar">Sidebar</div>
  
  <div class="content">Content</div>
  
</div>

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

Include specific javascript files only for smartphones

Recently, I encountered an issue with a JavaScript code that swaps background images on scroll down. To address the problem with debounce, I ended up setting different debounce times for various browsers (I am aware this is not the ideal solution, but it&a ...

javascriptjqueryhtmlcss

Performing read and write operations on targeted CSS classes using C#

I'm currently developing a C# application that needs to manipulate CSS files. Imagine you have the following CSS code snippet: .ClassOne { color: #FFFFFF; font-weight:normal; font-size: 9pt; font-family: Tahoma; ...

c#cssparsing

Center the logo between the menus in the foundation framework

Struggling to center the logo between menus using Foundation Zurb. I'm envisioning a layout similar to [menu1] [menu2] --[logo]-- [menu3] [menu4]. I believe utilizing the grid system may help achieve this: <div class="panel hide-for-small-down"&g ...

htmlcsszurb-foundation

Tips for setting discrete mapper style in cytoscapejs?

Currently, I am defining the style of cytoscape.js through CSS and converting it to JSON format using this resource. My goal is to implement a discrete mapper for styling. It's similar to the scenario discussed in How to use a descreteMapper like on c ...

cssjsoncytoscape.js

Combining an input box and label on a single line with the help of Bootstrap

Hi, I'm Sonal and I'm currently utilizing a Modal on my website. Within this Modal, I am looking to create a form with labels and input boxes displayed on the same line. Below is the code snippet I am working with: <a data-toggle="modal" hre ...

htmlcsstwitter-bootstrap

Reposition the checked box to the top of the list

My goal is to click on each item, and the selected item should move to the top of the list and be rendered at the top. However, I encountered an issue where when clicking on an item, it moves to the top but the item that replaces it also gets checked. Bel ...

javascripthtmlcss

Element does not cross both explicit and implicit columns

When working in a grid container with only 1 column and 1 row, if there is an implicit column in the first row, how can an element in the second row (as shown by the green column in the example) span across both the explicit and implicit columns? I appreci ...

csscss-grid

Tips for creating responsive elements with a z-index of 1 in CSS

I have implemented the code provided in a codepen tutorial, but I replaced the world map image with a USA map. However, the dots are not responsive due to the z-index=1 specified on them. I experimented with vh, vw, and percentages, yet when I resize my s ...

javascripthtmlcsssass

Incorporating Cascading Style Sheets (CSS) to

I'm looking to style my form with CSS but I'm unsure of the process. Currently, the form is generated using PHP and MySQL, and in the browser it appears like this: http://gyazo.com/5d099ead9bd6ea83859a5114b2438748 I want to align the text and dr ...

phphtmlcssforms

There was an issue with the SidebarController function being undefined, as it was expected to be a function

I'm encountering two issues with my demo: Error: [ng:areq] Argument 'SidebarController' is not a function, received undefined http://errors.angularjs.org/1.2.26/ng/areq?p0=SidebarController&p1=not%20aNaNunction%2C%20got%20undefined ...

phpjqueryhtmlcssangularjs

Is there a way to modify the border shape of items in the navigation bar?

Is there a way to achieve this particular shape when the current page is being displayed? https://i.stack.imgur.com/HELTM.jpg This is how my current code looks: current { transform: skew(-20deg); border: 1px solid white; color: black; background ...

htmlcss

Is there a way to adjust my input value to correspond to December of 2022?

I am working on a project where I need to set a default month and year that the user cannot modify. They should only be able to change the date in December months. Any tips on how I can achieve this? <input id="input_date" type="date&qu ...

htmlcss

What are the steps to update your profile picture using Angular?

In my Angular 6 application, I am implementing an image upload feature with the following code: Html: <img [src]="url ? url : 'https://www.w3schools.com/howto/img_avatar.png'"> <br/> <input type='file' (change)="onSelec ...

javascripthtmlcssangulartypescript

How can I eliminate the border appearance from a textfield fieldset component in Material-UI?

I have been struggling to remove the border using CSS code I found on Stack Overflow, but unfortunately, the issue persists. If anyone could kindly assist me in fixing this problem, I would be extremely grateful. Can someone please advise me on the specif ...

javascriptcssreactjsmaterial-ui

Refreshing a page will disable dark mode

I'm in the process of implementing a dark mode for my website using the code below. However, I've encountered an issue where the dark mode resets when refreshing the page or navigating to a new page. I've heard about a feature called localst ...

javascripthtmljquerycss

ReactJS -- Button Overlay Issue: Unresponsive Clicks when Positioned on Top of List

Please check out the Code Example in my Code Sandbox demo that I have set up https://codesandbox.io/s/W7qNgVnlQ I am trying to get the button action of the Floating Button to work, but currently it is triggering the Action assigned to the ListItem instea ...

htmlcssreactjsoverlaymaterial-ui

Vertically and horizontally align an SVG within 2 divs without modifying the parent div of the SVG

Is there a way to center an SVG both vertically and horizontally inside a div? The issue is that the width and height of the SVG are determined using the vx-responsive library, resulting in the following DOM structure: https://i.sstatic.net/3p2wc.png Edi ...

csshtmlsvgflexbox

Difficulty adjusting table heights in Dreamweaver, Struggling to set table height with <p style declarations

I'm currently designing an email signature in Dreamweaver using a table. However, I encountered an issue when I added the <p=style tag to customize my font size and color - it caused my table heights to change unexpectedly. Despite trying various s ...

htmlcssdreamweaver

Steps for displaying a bootstrap modal in alignment with the triggering button's position

Recently diving into the world of bootstrap and AngularJs has been quite the learning experience for me. One challenge I encountered was trying to implement a bootstrap modal dialog box to show additional details within a table column. My goal was to hav ...

javascripthtmlcssangularjstwitter-bootstrap

The capacity to rotate div containers, adjust their dimensions, and engage with the content within

I'm attempting to design small clickable div boxes that flip 180° when clicked to reveal interactive content. This includes the ability to click links, copy text, or manipulate the content with additional buttons. Although I've successfully ach ...

javascripthtmlcss