Please see this fiddle, or the code below:
http://jsfiddle.net/MegaMatt3/92G6X/9/
HTML:
<div id="outer">
<div id="inner"></div>
</div>
CSS:
#outer {
border: 1px solid black;
box-shadow: 0 0 20px rgba(0, 0, 0, 1) inset;
height: 200px;
position: relative;
width: 200px;
}
#inner {
background-color: #55A8FF;
bottom: 0;
height: 50px;
left: 0;
position: absolute;
width: 100%;
}
If I have a parent element, with an inset box shadow, and a child element inside it, the child element appears over top of the box shadow. I'd like for the child element to be "underneath" the box shadow, if possible. The effect would essentially show the inset box shadow on top of the child element.
I've messed with the z-index, but with no luck. Is this possible? Any help would be much appreciated. Thanks.
EDIT:
This question is kind of a mess now, but my original question should have indicated that I'm looking for a solution that works when the outer div has a non-transparent background. I've updated my original fiddle and code to reflect this scenario. The other answers here are valid, but the one I've marked as correct works for me in that scenario.
Another solution that works with non transparent backgrounds:
Set the shadow on a pseudo element
CSS
#outer {
border: 1px solid black;
height: 200px;
position: relative;
width: 200px;
background-color: white;
}
#outer:after {
content: "";
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) inset;
height: 100%;
position: absolute;
width: 100%;
left: 0px;
top: 0px;
}
#inner {
background-color: #55A8FF;
bottom: 0;
height: 50px;
left: 0;
position: absolute;
width: 100%;
}
demo
Set #inner to a negative z-index.
#inner {
background-color: #55A8FF;
bottom: 0;
height: 50px;
left: 0;
position: absolute;
width: 100%;
z-index: -10;
}
http://jsfiddle.net/S8Sm7/
PS:
Remember to close your tags :) just to be safe.
I would add another <div>.
You could use z-index, but if anything else is in the <div> you're going to have modify them all or do some other hack.
I suggest adding another <div> with the shadow. This is a flexible solution.
<div id="outer">
<div id="inner"></div>
<div id="newDiv"></div> // shadow moved to this div
</div>
I had a similar problem here css - box shadow covering all contained divs using absolute positioning
example here: http://jsfiddle.net/92G6X/8/
Related
Consider:
<div class="my-class">
AAA
</div>
I am trying to only skew the shadow, but not the content of the div by putting the shadow into the pseudo-element:
.my-class {
height: 5rem;
width: 10rem;
&::before {
content: "";
box-shadow: 0.2em -0.4rem 0 -0em rgba(0,0,0,0.6);
transform: skew(0, 25deg);
}
}
The example appears in jsbin.
I am obviously misunderstanding something about pseudo-elements, because the shadow doesn't even appear. What am I missing and how can this code be fixed to skew the shadow, but not the text?
There are a couple of things. The pseudo element needs width and height - and the snippet below assumes those are to be the same as its 'owning' element.
Also, where is the element to be placed? This snippet assumes that what is wanted is the shadow skewed but as if it were otherwise the shadow on the main element so it positions it absolutely relative to the main element. Obviously change this if I've misunderstood.
.my-class {
height: 5rem;
width: 10rem;
position: relative;
}
.my-class::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0.2em -0.4rem 0 -0em rgba(0, 0, 0, 0.6);
transform: skew(0, 25deg);
}
}
<div class="my-class">
AAA
</div>
I have created a circular vertical progress bar which fills vertically on page level progress. For this I have created two divs(outer div and inner div) and I have made the circular outer div using border radius 50% and overflow hidden and the inner div with square shape and width greater than the width of outer div. So on the completion of the page the height of the inner div increases and it gives the effect of filling of circular outer div as the edges of the inner div gets hide by the overflow property of the outer div. Its working fine in desktop and IPad but not in the other touch devices(mainly mobile devices). I am adding the snippet of the css and HTML that I am using. There are similar questions available on stackoverflow but none of the answer solved my problem, so plese don't take it as a duplicate answer, thanks.
#progress-container {
position: absolute;
top: 100px;
left: 100px;
}
#progress-indicator-outer {
position: absolute;
width: 25px;
height: 25px;
border: 2px solid #fff;
border-radius: 50%;
background: #999999;
overflow: hidden;
}
#progress-indicator-inner {
position: absolute;
bottom: 0px;
width: 28px;
height: 12.5px;
margin: 0px 0 0 -2px;
background: #007BAf;
}
<div id="progress-container">
<div id="progress-indicator-outer">
<div id="progress-indicator-inner"></div>
</div>
</div>
This appears to be caused by browsers parsing the tag. To solve this problem at the source, try the following:
<meta name="viewport" content="width=device-width, initial-scale=1,
minimum-scale=1">
original answer
Some things to note:
You don't need all these position: absolute;. Try to avoid them.
Decimal pixel values are highly discouraged
The width of your inner element was not correct. If your outer is 26px, and you want to move the inner two px left, that means you also need 2px on the other side, ending up at 30px
I tested the following and this works on my mobile devices
#progress-container {
position: absolute;
top: 100px;
left: 100px;
}
#progress-indicator-outer {
width: 26px;
height: 26px;
border: 2px solid #fff;
border-radius: 50%;
background: #999999;
overflow: hidden;
}
#progress-indicator-inner {
position: relative;
width: 30px;
height: 13px;
top: -2px;
left: -2px;
background: #007BAf;
}
<div id="progress-container">
<div id="progress-indicator-outer">
<div id="progress-indicator-inner"></div>
</div>
</div>
I have tried few but is there a way to create an outline to right side of the div?
somthing like the purple line in the below image
https://unsee.cc/geduzopi/
use a pseudo element absolutely positioned to the right of the parent, then use translateX() to push it outside of the parent.
div {
display: inline-block;
width: 5em;
background: orange;
text-align: center;
position: relative;
}
div:after {
content: '';
width: .5em;
background: purple;
position: absolute;
right: 0; top: 0; bottom: 0;
transform: translateX(200%);
<div>1</div>
You can use border-right. For example
border-right: aqua 2pt solid;
See
https://www.w3schools.com/cssref/pr_border-right.asp
If you want to create an outline on one side and NOT a border, you can use box-shadow with inset like I did in my codepen example below. My example is good to look at if you have a border radius.
https://codepen.io/drewkiimon/pen/qeWQVx
div {
background: pink;
height: 250px;
width: 250px;
box-shadow: inset 0 1px black;
}
<div>
</div>
I found various examples of how to create triangles using CSS (like this one); all of them are based on creating a 0-sized box and fiddling with borders to create the triangle shape. Ok, very nice.
But how can I actually place something inside such a triangle?
You can use positioning techniques to place some content over the triangle and not under the triangle..
I emphasized over and under because using positioning am positioning the text over the triangle, so triangle element isn't the parent of the content, as to create triangles we use height: 0; and width: 0; so you need to overlay the text.
Just make sure you use position: relative; for parent element holding absolute positioned element.
Didn't used z-index but you can use that to play safe with the stacking order.
Demo
<div class="wrap">
<div class="triangle"></div>
<span>Hello</span>
</div>
div.wrap {
position: relative;
}
div.triangle {
height: 0;
width: 0;
border: 50px solid #f00;
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
}
div span {
position: absolute;
left: 35px;
bottom: 0;
}
This way can be sloppy but it would work for a basic situation.
http://jsfiddle.net/Yc5nF/1/
<div class="arrow-right">
<p>Foobar</p>
</div>
.arrow-right {
position: relative;
width: 0;
height: 0;
border-left: 150px solid transparent;
border-bottom: 150px solid green;
border-right: 150px solid transparent;
}
.arrow-right p {
position: absolute;
top: 70px;
left: -20px;
}
I have a container that uses inset box shadow. The container contains images and text. The inset shadow apparently does not work on images:
The white section here is the container. It contains a white image, and there is inset box shadow applied to it.
body {
background-color: #000000;
}
main {
position: absolute;
bottom: 0;
right: 0;
width: 90%;
height: 90%;
background-color: #FFFFFF;
box-shadow: inset 3px 3px 10px 0 #000000;
}
<main>
<img src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Solid_white.png">
</main>
Is there a way to make the inset box shadow overlap images?
Just to chime in on this, because I was just creating something similar...
I hate polluting my markup with extra elements for the sake of styling, so the CSS solution is to use the :after pseudo element:
main::after {
box-shadow: inset 3px 3px 10px 0 #000000;
content: '';
display: block;
height: 100%;
position: absolute;
top: 0;
width: 100%;
}
<main>
<img src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Solid_white.png">
</main>
It's probably too late for what you were trying to do, but is the better solution in my estimation.
Because the shadow is part of the parent container it renders below the image. One alternative is to have a div which places a shadow overtop the image like so:
body {
background-color: #BBB;
}
main {
position: absolute;
bottom: 0;
right: 0;
width: 90%;
height: 90%;
background-color: #FFFFFF;
border-radius: 20px;
}
main img {
border-radius: 20px;
}
.shadow {
position: absolute;
width: 100%;
height: 100%;
box-shadow: inset 3px 3px 10px 0 #000000;
border-radius: 20px;
top: 0;
left: 0;
}
<main>
<img src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Solid_white.png" />
<div class="shadow"></div>
</main>
Edit: I've updated the fiddle to include border radius on the shadow and on the img which solves the issue identified in the comments.
The reason it's not overlapping is because the image is inside the div, so the image is on top of it. The image is higher (closer to the user) than the div.
You can change the image to use position: relative; z-index: -1, and have the containing div use a border instead of setting background color on the body. You'll need to use box-sizing: border-box to include the border in the width of the div.
DEMO
body {
background-color: #FFF;
}
main {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border: 60px solid black;
box-shadow: inset 3px 3px 10px 0 #000000;
box-sizing: border-box;
}
img {
z-index:-1;
position: relative;
}
For those, who're using absolute-positioned, full-size :before/:after pseudo elements, consider using pointer-events: none on the pseudo-element so the original elements remain clickable.
The best way to achieve this in 2020 would be to use mix blend mode on the image. use the box-shadow on the parent element of the img and use mix-blend-mode: multiply.
You could set the image as the div's background instead:
background-image:url(http://www.placehold.it/500x500)
jsFiddle example
https://stackoverflow.com/a/21415060/6235358
that's a great way to do it but we can do it in a better way using the ::after pseudo-class so you'll not have to add an empty <div> to your HTML
As Rilus mentioned we could use a pseudo class. Unfortunately this does not seem to work on an img tag for some reason however we can use a combination of inner and outer containers to achieve the affect we need.
.outer:hover .inner:after {
position: absolute;
content: '';
color: white;
display:block;
bottom: -0px;
right: -0px;
width: 100%;
height: 100%;
z-index: 11;
border: solid 10px red;
}
http://jsbin.com/kabiwidego/1/
not sure about ie 10 though as it seems to handle pseudo classes that are absolutely positioned slightly differently to most browsers.
One simple fix if you are clever with your decimals is to store your content in a separate div which you then select and implement a certain number of pixels from the top.
For example, let's say your header has a height of 50px. You could begin your #content div id 53.45px from the top (or whatever height your drop shadow is) and then your shadow would appear above the images.
One issue with this is that if you are using a rather transparent shadow, the more transarent it is the more tacky it may look by implementing this css.
In practice the code would be as follows:
HTML:
<header>
Whatever's in your header
</header>
<div id="content>
Page content
</div>
CSS:
header {
height: 50px;
box-shadow: 0 5px 5px rgba(0,0,0,1);
}
#content {
top: 55px;
}
Even if i'm late for the party, I had the same issue these days and worked on a solution. For me, the best solution (mobile friendly) is this one:
JSFiddle:
.image-inset-container {
margin-bottom: 30px;
}
.image-inset-shadow {
position: relative;
}
.image-inset-shadow img {
border-radius: 20px;
}
.image-shadow {
position: absolute;
width: 100%;
height: 100%;
box-shadow: inset 3px 3px 10px 0 #000;
border-radius: 20px;
top: 0;
left: 0;
}
<body>
<h4>Reimagined Web Design</h4>
<p>With your input and business goals in mind, we bring your brand to life through custom human-facing graphics and
visual elements targeted toward your audience for good user experience and created in future-forward technology,
guaranteeing a successful new web design.</p>
<div class="image-inset-container">
<div class="image-inset-shadow"><img src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Solid_white.png" alt="img1" />
<div class="image-shadow"></div>
</div>
</div>
<p>We initiate a collaborative process where your team is involved in every step to create a frictionless and
delightful
experience for your customers. Our designers immerse themselves in your industry and your brand aesthetic to
deliver
a website that represents your business while achieving your goals for a connected future.</p>
</body>