Disappearing CSS Box Shadows

I'm attempting to replicate effect number 2 from a website I found, but I'm running into an issue. Whenever I add more HTML content to the page, the effect disappears. Here is a sample of what I have so far: http://jsfiddle.net/aHrB7/

Here is a snippet of the HTML code:

<div class="header">
    <img id="imgLogo" src="http://iconpacks.mozdev.org/images/firefox2005-icon.png" width=30px height=20px  /> 

    <div class="divContentSizer">
   <span class="spnName">Master Chief</span>
</div> 

<div class="clearfix"></div>
  </div>

And here is the CSS I am using:

.clearfix {
   *zoom: 1;
}

.header {
   position: relative;
   width: 100%;
   background: #fff;
   padding-top: 10px;
   padding-bottom: 10px;
}

.header:before, .header:after {
   z-index:-1;
   position: absolute;
   display:table;
   content: "";
   top:30px;
   left: 10px;
   width: 50%; 
   padding: .3em .3em;
   max-width:300px;
   background: rgba(0, 0, 0, 0.2); 
   -webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.2);   
   -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.2);
   box-shadow: 0 15px 10px rgba(0, 0, 0, 0.2);
  -webkit-transform: rotate(-3deg);    
  -moz-transform: rotate(-3deg);   
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

.header:after  {
   -webkit-transform: rotate(3deg);
   -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

#imgLogo {
float: left;
padding-left:30px;
}

.divContentSizer {
text-align: center;
vertical-align: middle;
width: 960px;
margin: 0 auto;
}

.spnName {
padding-top: 3px;
font-size: 1.5em;
color: #273137;
}

The problem seems to be with the header class div where the box shadows are supposed to appear. If anyone can offer some insight on why this is happening and how to fix it, I would greatly appreciate it! Thank you!

htmlcss

Answer №1

To resolve the issue, make sure to assign a z-index value to your container.

.container{
    z-index:5;
    position: relative;
}

Answer №2

My understanding is that the reason why .header doesn't display its own stacking context (due to its z-index being set as auto) is because setting z-index: 1 for pseudo-elements creating shadows causes them to be positioned behind the body element. If .header is the only content within body, then body will only be as tall as .header, allowing the shadows to show. However, if additional content in body increases its height, it may hide the shadows.

To avoid the body element obscuring the shadow with its background, you can utilize a simple trick: make the background of body transparent and apply the main background color only to the root element.

html {
    background: #f9f8f8;
}

body {
    background: transparent;
}

You can view the results in this JSFiddle link.

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

Revamp the md-select Container

Hello there! I'm looking for a stylish way to revamp the design of the md-select Window. Specifically, I aim to customize the background and hover effects. Despite my attempts to modify the .md-select-menu-container in CSS, it proved unsuccessful. I ...

cssangularjsangular-material

Having trouble getting PostCSS nesting to work with CSS variables in Tailwind CSS and Next.js?

I've been attempting to utilize PostCSS nesting alongside CSS variables, but unfortunately the CSS variables are not being converted at all. Instead, I am seeing Invalid property value in the DOM for CSS Variables. The tailwind.css file I have inclu ...

cssnext.jstailwind-csspostcsscss-variables

Automatic Update Division in Jade Template (Node.js/Express)

In my development project using Node.js, Express, Jade, and Redis, I have successfully created an app that pulls telnet stream data from reversebeacon.net. This data is then cross-referenced with Redis databases containing amateur radio club member informa ...

node.jshtmlexpresspugpartial-page-refresh

Embracing New and Returning Users with Jquery Cookies: A Guide on Making Every User Feel Welcome

I'm currently working on setting up a Welcome page for both new and returning users using cookies with jQuery. However, I've encountered an issue where upon submitting the form with new user data, the message displayed is not "Welcome New User," ...

jqueryhtmlcookiesjquery-cookie

Transferring data from a text area to a table with AngularJS

Creating a C# MVC App with AngularJS My goal is to populate a table with values entered in a text area using Angular. Here is the process: Users input values into a text area like this: A B C When a user clicks a button, a modal window should open and ...

javascripthtmlangularjs

What causes the width of a card to vary between Windows and a Macbook Pro?

Here is the code I have: <div id="app"> <v-app id="inspire"> <v-content> <v-container> <v-card max-width="1000" class="mx-auto" > <v-form v-model="valid"> ...

cssvue.jsbootstrap-4vue-componentvuetify.js

The synchronization between Typescript and the HTML view breaks down

I am currently working on an application that retrieves user event posts from MongoDB and displays them in HTML. In the Event-post.ts file, inside the ngOnInit() function, I have written code to retrieve the posts using the postsService.getPosts() method. ...

htmlangulartypescript

An error occurs when trying to modify the classList, resulting in an Uncaught TypeError for setting an indexed property

I am attempting to modify the classes of multiple sibling elements when a click event occurs. Some of these elements may have multiple classes, but I always want to change the first class. Below is the code that I created: let classList = event.currentTa ...

javascriptcsscss-selectors

Utilizing jQuery to close a modal when clicking outside of its container

Trying to target elements in my practice layout but struggling to figure out the right approach: BASIC HTML <button id="opencontact" type="button" name="button"> <i class="far fa-envelope fa-2x"></i> </button> <section id="c ...

jqueryhtmlcss

Looking for an Angular Material component that displays a list of attributes?

I am trying to create a dynamic list of properties in Angular using Material Design that adjusts for different screen sizes. For example, something similar to this design: https://i.stack.imgur.com/EUsmV.png If the screen size decreases, the labels shou ...

cssangularangular-materialmaterial-designkey-value

Apply the "selected" class to the menu located in the common header

I have implemented a menu in the header.php file that will be displayed on all pages such as index.php or contact-us.php. However, I am facing an issue with adding the selected class to the active main category in the menu. The code provided works fine wh ...

phpjqueryhtmlcsssubmenu

Angular: module instantiation unsuccessful

Just getting started with Angular and running into an issue where the module seems to be unavailable. https://docs.angularjs.org/error/$injector/nomod?p0=plopApp My code is very basic at the moment, just setting things up: @section scripts{ <script s ...

javascripthtmlangularjsclient-side

Issues with concealing the side menu bar in Vue.js

I've been attempting to conceal the side menu bar, with the exception of the hamburger icon when in the "expanded" state. Despite my efforts to modify the CSS code, I am still struggling to hide the small side menu bar. The following images represent ...

javascripthtmlcsstypescriptvue.js

swap out the CSS class for my own class dynamically

When I display HTML code like this <div class="btn btn-pagination"> <i class="fa fa-angle-right"></i> </div> and want to replace fa fa-angle-right with myClass when the page loads. I attempted: $(document).ready(function () { ...

javascriptjqueryhtmlcss

I want to initiate a Python script by clicking a button on my HTML page with the help of Ajax

Here is my JavaScript code: function executePython() { alert("executed"); $.ajax({ url: "http://localhost:5000/app.py", type: "POST", ...

javascriptpythonhtmlajax

Why is my React build's index.html coming up empty?

I've been working on a React app using Snowpack, and everything seems to be in order. The build process completes successfully, but when I try to open the index.html file from the build folder, the page appears blank. To temporarily resolve this issu ...

javascripthtmlreactjssnowpack

How come my div can alter its own attributes on hover, but its sibling cannot?

As I delve into the realm of web development, my initial project involves creating a portfolio site. However, I am facing difficulties with the dropdown section in one of the menus. I incorporated a :hover pseudo-class to the dropdownhover div to signal ...

htmlcss

In what way can I obtain CSS comments utilizing jQuery?

I am trying to figure out how I can access CSS comments that are included in an external stylesheet. In order to demonstrate, I have loaded a sample CSS using the following code: <link rel="stylesheet" type="text/css" media="all" href="test.css" /> ...

jquerycsscomments

Creating a responsive design for my website that will adapt to any device, whether it be a phone

As a beginner in HTML and CSS, I am currently working on creating a website for my project. However, one of the requirements is that it should be responsive. I have encountered an issue where my yellow box appears to be getting smaller while the red and ...

htmlcss

Using JavaScript to access a button from a dropdown list in ASP.NET MVC

I'm trying to use a JavaScript function to trigger the click event of an HTML button when a drop-down list is changed. However, it seems like the correct id is not being found. @using (Ajax.BeginForm("GetReport", "Choices", new AjaxOptions() { ...

javascriptjqueryhtmlasp.netasp.net-mvc