I have this piece of html:
<html>
<body>
<header></header>
<div></div>
<footer></footer>
</body>
</html>
and this piece of css:
header {
width: 500px;
height: 100px;
background: red;
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.5);
z-index: 10;
}
div {
width: 500px;
height: 700px;
background: yellow;
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.5);
z-index: 5;
}
footer {
width: 500px;
height: 50px;
background: blue;
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.5);
z-index: 10;
}
You can see this also here: http://jsfiddle.net/XGTtT/ Basically, I would like to have yellow area below other two areas, but z-index doesn't seem to work. What is wrong and how to fix it?
To achieve elements which are positioned in front or below each other you will need to use a mix of absolute positioning and z-index, as z-index will not currently work with the default positioning, which is static.
Depending on what you want to achieve it may be easier to add position: relative to the divs, and then use a negative margin on the div to pull it up/below the header and footer.
header {
width: 500px;
height: 100px;
background: red;
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.5);
z-index: 10;
position: absolute;
top:0;
}
div {
width: 500px;
height: 450px;
background: yellow;
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.5);
z-index: 5;
position: absolute;
}
footer {
width: 500px;
height: 50px;
background: blue;
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.5);
z-index: 10;
position: absolute;
bottom: 0;
}
http://jsfiddle.net/XGTtT/8/
Higher number will come front, lower number will go back. A
nd give some different number for each element. Like for div 1, for header 2 and for footer 3.
Related
The top image below indicates how drop-shadow would be drawn if applied to the top element. I'm trying to determine if it's possible to have the shadow cast only upon certain objects (as illustrated in the bottom image).
I'm open to non-standard solutions on this, but if possible I would prefer to still utilize the drop-shadow filter, as I'd like to use it with non-rectangular shapes as well.
Edit: A fiddle as requested. https://jsfiddle.net/fhrktawm/
Edit 2: Adding a more complex example to illustrate my use case. My purpose here is to indicate additional depth by varying the length of a drop shadows.
You can achieve that by using 4th value of box-shadow or drop-shadow .
And place shadow like in screen shots provided
As shadow of square is always square so it is possible at accurate places only when intersecting part is also square
.box {
width: 100px;
height: 100px;
background: white;
border: 1px solid black;
margin-left: auto;
margin-right: auto;
}
.box-1 {
z-index: 10;
box-shadow: -36px 36px 0 -25px rgba(0, 0, 0, 0.25);
transform: translate3d(60px, 42px, 0);
}
<div class="box box-1"></div>
<div class="box"></div>
Update
You can use ::after property to achieve 2nd effect like this
.box {
width: 100px;
height: 100px;
background: white;
border: 1px solid black;
margin-left: auto;
margin-right: auto;
transform-style: preserve-3d;
}
.box-1 {
box-shadow: -36px 36px 0 -25px rgba(0, 0, 0, 0.25);
transform: translate3d(60px, 42px, 100px);
z-index: 100;
}
.box-1::after {
content: "";
width: 100px;
height: 100px;
position: absolute;
box-shadow: -15px 15px 0 rgba(0, 0, 0, 0.1);
z-index: -100;
transform: translateZ(-100px)
}
<div class="box box-1"></div>
<div class="box"></div>
But as you can see another box is above (because of transform-style: preserve-3d;) as not able to get the box shadow below the box . Tried a different method .
So different approach is done by using box-shadow of another element 2nd one like in below snippet with some variations in shadow
.box {
width: 100px;
height: 100px;
background: white;
border: 1px solid black;
margin-left: auto;
margin-right: auto;
}
.box-1 {
z-index: 10;
box-shadow: -36px 36px 0 -25px rgba(0, 0, 0, 0.25);
transform: translate3d(60px, 42px, 0);
}
.box-2::after {
content: "";
width: 100px;
height: 100px;
position: absolute;
box-shadow: 45px -45px 0 5px rgba(0, 0, 0, 0.1);
z-index: -1;
}
<div class="box box-1"></div>
<div class="box box-2"></div>
At last the desired output can be achieved like this :
.boxContainer {
border: 1px solid black;
width: 160px;
padding: 20px;
}
.box {
width: 100px;
height: 100px;
background: white;
border: 1px solid black;
margin-left: auto;
margin-right: auto;
}
.box-1 {
z-index: 10;
box-shadow: -36px 36px 0 -25px rgba(0, 0, 0, 0.25);
transform: translate3d(60px, 42px, 0);
}
.box-2 {
box-shadow: -10px 10px 0 rgba(0, 0, 0, 0.25);
}
.box-2::after {
content: "";
width: 100px;
height: 100px;
position: absolute;
box-shadow: 45px -45px 0 6px rgba(0, 0, 0, 0.1);
z-index: -1;
}
<div class="boxContainer">
<div class="box box-1"></div>
<div class="box box-2"></div>
</div>
I'm trying to determine if it's possible to have the shadow cast only upon certain objects
To be concise: no, this is not possible using either box-shadow or the drop-shadow() filter.
Is it possible to use CSS to reproduce the shadow under the device of the below image?
The following CSS and different variants don't work:
filter: drop-shadow(rgba(22, 22, 22, 0.25) 0px 12px 15px);
The problem is concentrating the shadow under the device and flattening it. The CSS above cannot make the shadow appear as if it's projected on the ground.
Codepen: https://codepen.io/Crashalot/pen/MWYzoJV
A pseudo element is better suited to get this done, see below example:
.object {
margin: 20px;
width: 70px;
height: 140px;
position: relative;
border-style: solid;
background: #E6E6FA;
}
.object:before {
content:"";
z-index: -1;
position: absolute;
bottom: -50%;
width: inherit;
height: inherit;
border-radius: 40%;
background: rgba(0,0,0,.55);
transform: scaleX(1.3) scaleY(0.12);
filter: blur(5px);
}
<div class="object"></div>
Alternatively, you can use box-shadow:
.object {
margin: 20px;
width: 70px;
height: 140px;
position: relative;
border-style: solid;
background: #E6E6FA;
/* This is .shadow-lg from tailwindCSS */
/* See https://tailwindcss.com/docs/box-shadow/ */
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
<div class="object"></div>
Many times I created simple shadows but now I need to create rounded shadow. Like on the picture
Is it possible to do this with CSS??
THIS IS MY CODE:
-webkit-box-shadow: -2px 0px 79px -2px rgba(0,0,0,0.75);
-moz-box-shadow: -2px 0px 79px -2px rgba(0,0,0,0.75);
box-shadow: -2px 0px 79px -2px rgba(0,0,0,0.75);
It looks like your example image is a linear gradient in a round container, so do that:
.round-shadow-clip {
overflow: hidden;
}
.round-shadow {
background-image: linear-gradient(rgba(0, 0, 0, 0.6), transparent 20%, transparent 80%, rgba(0, 0, 0, 0.6));
border-radius: 100%;
height: 0;
margin-left: -10%;
padding-bottom: 25%;
width: 120%;
}
html {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAALklEQVQ4y2N89+4dA24gKCiIR5aJgQIwqnlkaGb8//8/Hun379+PBtioZko0AwAA0Ajuvut+RAAAAABJRU5ErkJggg');
height: 100%;
}
<div class="round-shadow-clip">
<div class="round-shadow"></div>
</div>
With pseudo you can do this
div {
position: relative;
height: 100px;
border-radius: 50%/40%;
overflow: hidden;
}
div::before,
div::after {
content: '';
position: absolute;
left:0; right:0; top: -5px; height: 0;
box-shadow: 0 0 25px 15px rgba(0,0,0,.5);
}
div::after {
top: auto; bottom: -5px;
box-shadow: 0 0 -25px 15px rgba(0,0,0,.5);
}
<div></div>
I'm trying to replicate the white box on this page, Where it says "your success".
body{
background-color:#DFDFDF;
}
.index_whitebox{
background-color: #fff;
height: 60%;
width: 25%;
position: absolute;
margin-left: 4%;
margin-bottom: 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 10px;
}
<div class="index_whitebox">
</div>
I assume there's no border-style and I use % for mobile compatibility. I can't seem to get the border right.
If you look in 'inspect element' you can actually see how they've coded it. I bunched together the main bits they use, as some used a CSS file and others were inline.
.class1 {
left: 1px;
width: 302px;
position: absolute;
top: 445px;
height: 378px;
}
.class2 {
left: 1px;
width: 302px;
position: absolute;
top: 445px;
height: 378px;
}
.class3{
border: 2px solid rgba(255, 255, 255, 1);
background-color: rgba(255, 255, 255, 1);
border-radius: 5px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
It's all in here:
Here's a JsFiddle.
I have an transformed image and I would like to add a gradient (black to transparant) on it.
HTML :
<div class="contentwrap">
<div class="perspectiveDiv">
<img src="http://image.noelshack.com/fichiers/2014/34/1408372755-black-card.png" class="img" />
</div>
</div>
CSS :
.contentwrap {
margin: 0 auto;
max-width: 600px;
height: 100%;
display: table;
padding-top: 150px;
}
.perspectiveDiv{
perspective:750px;
position: relative;
left: 0;
top: 0;
}
.img{
position: absolute;
top: -152px;
left: 25px;
transform: rotateX(60deg);
max-width: 250px;
-webkit-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.8);;
-moz-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.8);;
box-shadow: 0 60px 45px -20px rgba(0, 0, 0, 0.8);;
-moz-border-radius: 15px;
border-radius: 16px;
background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}
Here is the kind of result that I need (made with photoshop) :
I found how to apply a gradient on a background image, but not a standard image...
Is it possible to do what I need ?
Can you help me to do it ? It could be very simple but I'm a beginner and I didn't manage to do it...