I want to position a custom button element under it's sibling, so that the sibling's shadow effect will be visible on button. Currently the shadow isn't visible on button, but under it. See code snipped to better understand what I mean by that:
.parent {
position: absolute;
}
.box {
width: 200px;
height: 40px;
background-color: white;
box-shadow: 1px 0px 20px 0px rgba(0, 0, 0, 0.18);
z-index: 10;
}
.button {
height: 20px;
width: 20px;
background-color: white;
text-align: center;
position: absolute;
right: -20px;
top: 10px;
z-index: 1;
}
<div class="parent">
<div class="box"></div>
<div class="button">x</div>
</div>
Apply position: relative; to .box so that it will support the z-index value without effecting the layout.
.box {
width: 200px;
height: 40px;
background-color: white;
box-shadow: 1px 0px 20px 0px rgba(0, 0, 0, 0.18);
position: relative;
z-index: 10;
}
Another option is to change z-index of .button to -1. But it may have other effects in the layout since the element will be positioned behind all other elements.
.button {
height: 20px;
width: 20px;
background-color: white;
text-align: center;
position: absolute;
right: -20px;
top: 10px;
z-index: -1;
}
Related
I need to make a realistic 3d shadow that looks like the container is standing. Just like the image shows.
Instead of box-shadow, it can be implemented with a pseudo-element like ::before.
This is an over simplified example, but hopefully it will help as a reference.
Example:
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
section {
display: flex;
justify-content: center;
align-items: flex-start;
padding: 30px;
}
div {
position: relative;
isolation: isolate;
}
figure {
overflow: hidden;
border-radius: 20px;
z-idnex: 10;
height: 200px;
}
div::before {
content: "";
position: absolute;
left: 2px;
right: 2px;
bottom: 2px;
height: 9px;
borderradius: 25px;
filter: blur(6px);
background-color: #000;
z-index: -1;
}
<section>
<div>
<figure>
<img src="https://picsum.photos/200" />
</figure>
</div>
</section>
you can do that by using :pseudo-element, than add box shaddow to it, for example
style.css
.container {border: 5px solid black;
width: 160px;
height: 100px;
border-radius: 20px;
position: relative;
}
.container:after {
position: absolute;
bottom: -2px;
width: 100%;
box-shadow: 2px 3px 12px 1px rgba(0,0,0,0.75);
}
index.html
<div class="container"></div>
I'm trying to add kind of "radial box shadow" to a div.
I use a ::before pseudo-element and Z-index to achieve it.
See a simplified fiddle here.
Problem : while it works fine when the element's position is either relative or absolute, the z-index rule doesn't seem to apply when position is set to fixed.
Any idea how to make this work?
.statusBar {
position: absolute;
/*chnaging this to fixed will break the z-index*/
background: #FCFCFC;
width: 90%;
height: 80px;
display: flex;
justify-content: space-around;
align-items: center;
padding: 0px 20px;
box-sizing: border-box;
border: 0.5px solid grey;
}
.statusBar::before {
content: "";
position: absolute;
z-index: -1;
width: 96%;
top: 0;
height: 10px;
left: 2%;
border-radius: 100px / 5px;
box-shadow: 0 0 18px rgba(0, 0, 0, 0.6);
}
<div class="statusBar">
<span>Some</span>
<span>content</span>
</div>
just wrap your statusBar to a div with the property of position: fixed. And make statusBar as position: relative.
<div class="container">
<div class="statusBar">
<span>Some</span>
<span>content</span>
</div>
</div>
.container{
position: fixed;
width: 100%;
}
.statusBar {
position: relative; /*chnaging this to fix will */
background: #FCFCFC;
width: 90%;
height: 80px;
display: flex;
justify-content: space-around;
align-items: center;
padding: 0px 20px;
box-sizing: border-box;
border: 0.5px solid grey;
}
.statusBar::before {
content: "";
position:absolute;
z-index: -1;
width:96%;
top: 0;
height: 10px;
left: 2%;
border-radius: 100px / 5px;
box-shadow:0 0 18px rgba(0,0,0,0.6);
}
Hope this helps.
Is it possible creating a round shadow (a neat circle with the spread value set to zero) under a square element?
E.g. a DIV with no rounded borders.
I have the following element, which I cannot add further markup to:
<div class="square"></div>
In addition, I cannot use :before and :after pseudo-elements, as they are already styled. That's why I am trying to adapt the box-shadow.
In the example below what I would like to achieve (obtained with a ":before" pseudo-element, which I cannot use).
.circle {
width: 20px;height: 20px; margin: 40px 0 0 40px;
display: inline-block; border:1px solid #000;
position: relative; top: 0; left: 0; background: #fff;
}
.circle:before {
content: ''; display: block; position: absolute; top: -15px; left: -15px;
width: 50px; height: 50px; border-radius: 50%; background: #ddd;
z-index: -1;
}
<div class="circle"></div>
I used the :before pseudo-element only to show the result.
I think I found a quite good solution:
.wrapper {
margin-left: 5rem;
margin-top: 5rem;
}
.element {
width: 14px;
height: 14px;
border: 2px solid #5f5f5f;
border-radius: 2px;
background-color: #fff;
}
.element:before {
content: '';
position: absolute;
width: 14px;
height: 14px;
z-index: -1;
border-radius: 50%;
background-color: transparent;
opacity: 0.2;
box-shadow: 0px 0px 0px 13px rgba(0, 0, 0, .6);
}
<div class="wrapper">
<div class="element"></div>
</div>
I hope it will be a helpful answer for you, - Marta.
There are a couple of ways to go about it. I'd simply put the square div in a bigger container div, then style it as you wish. I've included a couple of examples for you.
I hope this helps! - James.
.square {
width: 20px;
height: 20px;
display: block;
position: relative;
background: #fff;
opacity: 1;
margin: 5px 0 0 5px;
}
.circle,.circle-with-spread {
display: block;
background-color: #000;
opacity: 0.3;
width: 30px;
height: 30px;
border-radius: 15px;
position: absolute;
}
.circle-with-spread {
box-shadow: 0 0 5px 5px rgba(0,0,0,1);
}
<!-- Example Circle Shadow -->
<div class="circle">
<div class="square"></div>
</div>
<!-- Spacing makes it look nice -->
<br />
<br />
<br />
<!-- Second Example -->
<div class="circle-with-spread">
<div class="square"></div>
</div>
Consider the following -
#banner {
width: 100%;
height: 50px;
box-shadow: 0 0 10px #000000;
background: #63B0F2;
}
#circle {
position: relative;
top: 20px;
height: 80px;
width: 80px;
margin: 0 auto;
border-radius: 50%;
box-shadow: 0 0 10px #000000;
background-color: white;
}
<div id="banner">
<div id="circle">
</div>
</div>
Is it possible to remove/clip the drop-shadow cast by the top half of the white square onto the blue div?
To put it another way, so there is only shadow cast onto the background, but not each other?
Possible solution with pseudo-elements :before and :after. Just add to your CSS:
#circle:before{
position: absolute;
content: "";
width: 150%;
height: 50%;
left: -25%;
top: -10px;
background: #63B0F2;
}
#circle:after{
position: absolute;
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
background: white;
border-radius: 50%;
}
DEMO
Add a second element for the shadow and position it behind the banner using z-index.
.shadow,
.circle {
display: block;
height: 120px;
width: 120px;
position: absolute;
bottom: -100%;
left: calc(50% - 62px);
border-radius: 50%;
}
.shadow {
box-shadow: 0 0 1em -.125em rgba(10,10,10,.1), 0 0 0 1px rgba(10, 10, 10, .2);
border: 2px solid transparent;
z-index: -1;
}
.circle {
background: #e0e0e0;
border: 2px solid white;
}
See this codepen, in which I have used ridiculous colors to illustrate my point: https://codepen.io/pen/?editors=0100
Here's my fiddle.
Basically I have a parent div that needs to have a box shadow around it and for various reasons this box shadow has to be a pseudoelement. This box shadow prevents the capture of hover events on the children of this parent div. How can I fix this?
.box {
float: left;
width: 200px;
height: 200px;
color: #fff;
background-color: lightblue;
position: relative;
}
.big-box {
float: left;
position: relative;
}
.big-box:after {
content: "";
box-shadow: inset 0px 0px 10px 0px #000;
position: absolute;
left: 0px;
top: 0px;
z-index: 5;
width: 100%;
height: 100%;
}
.box:hover {
background-color: green;
}
.big-box:after{
pointer-events: none;
}
https://jsfiddle.net/tm9pzudy/1/