Container with subtle side shadows (CSS)

I've been working on a website where I want the main container to have a light brown shadow on both the right and left sides. However, I've managed to add shadows on both sides but they are too dark for my liking. I'd prefer them to be much lighter, similar to the shadows on Bloomingdales.com.

Below is the CSS code I'm using. Any suggestions on how to achieve the desired effect would be greatly appreciated!

Thank you!

.container {
overflow: hidden;
background: white;
padding: 15px;
-webkit-box-shadow: 4px 2px #492409, -4px 0 2px #492409;
-moz-box-shadow: 4px 0 2px -6 #492409, -1px 0 2px #492409;   
box-shadow: 4px 0 2px #492409, -4px 0 2px #492409;
}
css

Answer №1

According to @Vlad Saling, css3 provides a wide range of options for box-shadow effects.

This particular website contains valuable insights on how shadows are calculated by different browsers. In essence:

You have the ability to define colors in CSS using the alternate rgba([red], [green], [blue], [alpha]) format. RGB values are expressed in decimal (0-255) and the last parameter is "alpha" (i.e. opacity) which is a decimal value from 0 (transparent) to 1 (opaque). An alpha of 0.5 results in a shadow that is 50% transparent. Therefore, rgba(0, 0, 0, 0.25) will give you a softly faded black shadow that remains dark enough to be visible even against a dark grey background.

To address your issue, either adjust the color to a lighter brown shade, or modify your box shadow properties to incorporate an alpha channel by specifying its color using rgba instead of hexadecimal:

-webkit-box-shadow: 4px 2px rgba(28, 14, 3, x), -4px 0 2px rgba(28, 14, 3, x);
-moz-box-shadow: 4px 0 2px -6 rgba(28, 14, 3, x), -1px 0 2px rgba(28, 14, 3, x);   
box-shadow: 4px 0 2px rgba(28, 14, 3, x), -4px 0 2px rgba(28, 14, 3, x);

This should resolve the issue. Remember to replace x with your desired level of alpha transparency (opacity), such as .5 for 50% transparency.

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

Tips for creating responsive designs with specific media queries for various device sizes

I am looking to create a responsive website using media queries and have already created different media queries for mobile, tablets, and desktops. However, I am unsure if I should be writing the same CSS code multiple times for various device sizes, such ...

htmlcssmedia-queries

Designing a Dynamic Page Layout with Flexbox or Grid

I have been attempting to create this specific layout using a grid system. Unfortunately, I have not been successful in achieving the desired result with my current code snippet. Please note: The DOM Structure cannot be altered https://i.stack.imgur.com/b ...

htmlcssflexboxgrid

Explore the Image Gallery feature that dynamically adjusts the width and height of images for optimal viewing experience

I am currently creating a unique photo gallery that showcases images uploaded by users. These images are resized to fit the gallery but can vary in dimensions from 100x100 to 2500x2500. The Photo Gallery View page I have designed is Fluid, meaning the wid ...

jquerycsshtml

How can PHP be used to display a varying number of items in a slider depending on the size of the screen?

I am currently utilizing media queries to adjust the layout of my website. My query is: How can I display a different number of items in a slider based on the screen size? For small screens, I have included the following code: <?php if($i == 4) {echo ...

phpcss

How can I retrieve and showcase the size of each file, including images, CSS, and JS, present on a website?

Currently, my goal is to create a dashboard capable of retrieving the file size for all resources (images, javascript, css, etc.) loaded on a webpage. I aim to then further filter these resources by file type and file size in order to identify which ones c ...

javascripthtmlcss

Confirm that the CSS syntax is valid

Is there a way to validate CSS syntax by checking for specific characters like "{", "}", ";", and ":"? I have come up with four checks to ensure the code is valid, such as verifying that the number of opening and closing curly braces match, as well as the ...

cssregexvalidation

Troubleshooting problem with Bootstrap column and grid dimensions

I have a Bootstrap page displaying a title along with 2 forms in a single row positioned above a table. The 2nd form, located at the top left above the table, is currently occupying the full width of the parent column (col-md-8) when it only needs to occup ...

htmlcsstwitter-bootstrap

Print page headers are being overlapped by THEAD elements

I have created a table and am considering using the thead as page headers if the table spans multiple pages. However, I am encountering an issue where the content of the table overlaps with the table header on the second page. Here is a snippet of my HTML ...

htmlcssbootstrap-4printinghtml-table

Having trouble with dragging and dropping items into a text box on an HTML page?

Is there a way in HTML to drag and drop elements from one div to another div's textbox? In the image above, we can see Div1 and Div2. I need to drag text/words from Div1 and drop them into the TEXT BOX in Div2. How can I implement this functionality ...

javascriptjqueryhtmlcss

The hide and show buttons seem to be missing when utilizing the datatable API

For my current project, I referenced this example: https://datatables.net/extensions/responsive/examples/styling/bootstrap.html Despite trying various datatable API examples, I'm still unable to display the expand/collapse buttons. The required CSS a ...

jqueryhtmlcssdatatable

Encountering an Uncaught TypeError while trying to read properties of undefined (specifically 'remove') during a Change event is causing an issue for me

Looking to update the icons by changing the class from .fa-plus to .fa-minus for this specific menu section <div class="accordion-menu"> <h2 class="accordion-header" id="subseccOne"> ...

javascripthtmlcssaccordionbootstrap-5

The carousel image slider seamlessly transitioning from the second image

I'm having an issue with the Carousel slider where it is overlapping the image from the second slide onwards. The first image loads properly, but subsequent images are not displaying correctly. Here's a reference image: https://i.sstatic.net/pyY ...

htmlcssbootstrap-4carouselangular10

ChessboardJs: JavaScript Boards Function Properly on Initial Use Only

Update: The page code can be accessed via my page URL. I'm unsure where the issue lies. Your assistance is appreciated. Issue: Initially, when clicking on the chess puzzles page, everything works fine. However, upon re-clicking from the homepage, th ...

javascriptjqueryhtmlcss

Removing the active class from a Bootstrap menu can be achieved by targeting the specific

I have successfully implemented a Bootstrap Menu by placing it in a separate header.html file and using the php include function to call that file on every page of my website. However, I am now trying to figure out how to dynamically change the active cl ...

htmlcss

Creating a Pop-Up on Website Load with HTML, CSS, and Jquery

<script> // utilizing only jquery $(document).ready(function(){ $('#overlay-back').fadeIn(500,function(){ $('#popup').show(); }); $(".close-image").on('click', function() { $('#po ...

javascriptjqueryhtmlcsstwitter-bootstrap

How to make stylish block buttons with ReactJS and Bootstrap

I'm looking to make block buttons that fill the entire div. In React, I'm using the react-bootstrap package to achieve this. Below is the code snippet I have implemented: <Container> <Row className="justify-content-center"& ...

cssbootstrap-4flexboxreact-bootstrap

H1 and span elements experiencing abnormal size discrepancies

Check out this code snippet: <h1><a href="">Windows App Store<br /><span class="smallSubText">applications</span></a></h1> and here's the CSS styling: #windowsStoreApplications { float: right; width ...

htmlcss

Python Selenium- Extract and print text from a dynamic list within a scrolling dropdown element

I am currently working on a project using Selenium and Python to extract a list of company names from a dropdown menu on a javascript-driven webpage. I have successfully managed to reveal the list of company names by clicking the navigation button, and eve ...

javascriptjquerypythoncssselenium

Change the class of each item in a list individually by hovering over them with the mouse using JavaScript

How to toggle classes in a list item one by one using the mouseover event in JavaScript? const items = document.querySelectorAll("ul li"); let currentItem; for (const item of items) { item.addEventListener("mouseover", e => { currentItem &am ...

javascripthtmlcss

Exploring the world of animation in React can be an exciting journey, especially

In my useState, I have an array of objects const [tasks,setTasks] = useState([{completed: true},{completed: false}]) I decided to sort the tasks so that completed ones are at the bottom. <div> {tasks.map((elem) => ( <div onClick={ ...

javascriptcssreactjs