Can you please take a look at this demo and let me know how I can add Box-shadow to Pseudo After Content? as you can see I tried to add like
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
but it is not adding the shadow and instead creating a box
body {
padding: 50px;
background: #eee;
}
.hero {
position: relative;
background-color: #fff;
height: 320px !important;
width: 100% !important;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}
.hero:after {
content: '';
position: absolute;
top: 100%;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 0;
border-top: solid 40px #fff;
border-left: solid 40px transparent;
border-right: solid 40px transparent;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}
<div class="hero"></div>
I think This Code will help you.
I have added properties: transform-origin and box-sizing
For reference: transform-origin and box-sizing
body {
background-color: #888;
}
.hero {
position: relative;
margin: 3em;
padding: 1em;
box-sizing: border-box;
background: #bada55;
box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
}
.hero::after {
content: "";
position: absolute;
width: 0;
height: 0;
margin-left: -0.5em;
bottom: -2em;
left: 50%;
box-sizing: border-box;
border: 1em solid black;
border-color: transparent transparent #bada55 #bada55;
transform-origin: 0 0;
transform: rotate(-45deg);
box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.4);
}
<div class="hero"></div>
Deleted all the shadows and added container with property filter: drop-shadow(0 5px 10px rgba(0, 0, 0, .2)); which creates shadow by shape.
body {
padding: 50px;
background: #eee;
}
.container {
filter: drop-shadow(0 5px 10px rgba(0, 0, 0, .2));
}
.hero {
position: relative;
background-color: #fff;
height: 320px !important;
width: 100% !important;
}
.hero:after {
content: '';
position: absolute;
top: 100%;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
filter: drop-shadow;
height: 0;
border-top: solid 40px #fff;
border-left: solid 40px transparent;
border-right: solid 40px transparent;
}
<div class="container">
<div class="hero"></div>
</div>
Related
If you put your mouse over the pill-shaped thing, It'll move over the circle (what I want to happen), but the shadow of the circle will remain visible.
I want the shadows to not affect each other, but still be transparent.
body {
background-color: aqua;
}
#circle1, #circle2 {
position: relative;
float: left;
height: 50px;
width: 50px;
border-radius: 25px;
margin-left: 8px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 0;
background-color: white;
}
#pill1, #pill2 {
position: relative;
float: left;
height: 50px;
width: 100px;
border-radius: 25px;
margin-left: 8px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 1;
background-color: white;
}
#pill2 {
box-shadow: 0 4px 8px 0 rgba(180, 180, 180, 1), 0 6px 20px 0 rgba(200, 200, 200, 1);
}
#circle2 {
box-shadow: 0 4px 8px 0 rgba(180, 180, 180, 1), 0 6px 20px 0 rgba(200, 200, 200, 1);
}
#keyframes animation {
0% {right: 0px;}
100% {right: 58px;}
}
#pill1:hover, #pill2:hover {
animation: animation 0.5s linear forwards;
}
<div id="circle1"></div>
<div id="pill1"></div>
<div id="circle2"></div>
<div id="pill2"></div>
I forgot to mention something, it's supposed to be an animation. I put it in here as a transition but it wasn't working. I just fixed it, so it's now an animation.
The one on the right is what I want to happen, but that is max opacity.
You may remove the shadow on hover of the circle and make its z-index higher than the pill to catch its hover state:
body {
background-color: aqua;
}
#circle {
position: relative;
float: left;
height: 50px;
width: 50px;
border-radius: 25px;
margin-left: 8px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 2;
background-color: white;
}
#pill {
position: relative;
float: left;
height: 50px;
width: 100px;
border-radius: 25px;
margin-left: 8px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 1;
background-color: white;
}
#circle:hover + #pill, #pill:hover {
right: 58px;
}
#circle:hover {
box-shadow:none;
}
/*Added this to avoid the issue of hovering only the pill and not the circle*/
#circle:hover::after {
content:"";
position:absolute;
top:0;
bottom:0;
left:0;
width:100px;
}
<div id="circle"></div>
<div id="pill"></div>
UPDATE
By the way you can simplify your code like this:
I also included the transition
body {
background-color: aqua;
}
#circle {
position: relative;
height: 50px;
width: 50px;
border-radius: 25px;
margin-left: 8px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
background-color: white;
transition:all 0.5s;
}
#circle:before {
content:"";
position: absolute;
top:0;
left:80px;
height: 100%;
width: 100px;
border-radius: 25px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
background-color: white;
transition:all 0.5s;
}
#circle:hover::before {
left:0;
}
#circle:hover {
box-shadow:none;
}
/*Added this to avoid glitchs*/
#circle:after {
content:"";
position:absolute;
top:0;
bottom:0;
left:0;
width:200px;
}
#keyframes animation {
0% {left: 80px;}
100% {left: 0;}
}
<div id="circle"></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 am trying to create a tooltip with shadow-box. all works fine. But I am not able to get the shadow to tool tip part( arrow part ) how to get that?
here is my code :
.parent {
position: relative;
border: 1px dashed green;
height: 200px;
}
.toolTip {
position: absolute;
background: #fff;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
border-radius: 5px;
width: 100px;
height: 100px;
top: 50px;
left: 50px;
}
.tipPoint {
position: absolute;
top: -15px;
right: 20px;
z-index: 100;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid white;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
}
<div class="parent">
<div class="toolTip">
<span class="tipPoint"></span>
</div>
</div>
Another solution is to use the filter property set to drop-shadow
Also you'll need to use the :after pseudo selector for the arrow.
Vendor prefixes are available, but unfortunately the feature is not supported by IE. Check for browser compatibility.
.toolTip {
position: absolute;
background: #fff;
width: 100px;
height: 100px;
top: 50px;
left: 50px;
filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, .5));
}
.toolTip:after {
content: " ";
position: absolute;
top: -15px;
right: 20px;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid white;
}
<div class="parent">
<div class="toolTip">
</div>
</div>
Tweaking the box-shadow property
The property box-shadow is in fact applied to your element .tipPoint but the shadow is on the bottom of the box. You can easily tweak it's value by changing the shadow's direction on .tipPoint: for example the following looks good:
box-shadow: 1px 0px 6px 0 rgba(0, 0, 0, 0.3);
For more details here's how the property works:
box shadow: <offset-x> <offset-y> <blur-radius> <spread-radius> <color>
.parent {
position: relative;
border: 1px dashed green;
height: 200px;
}
.toolTip {
position: absolute;
background: #fff;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
border-radius: 5px;
width: 100px;
height: 100px;
top: 50px;
left: 50px;
}
.tipPoint {
position: absolute;
top: -15px;
right: 20px;
z-index: 100;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid white;
box-shadow: 1px 0px 6px 0 rgba(0, 0, 0, 0.3);
}
<div class="parent">
<div class="toolTip">
<span class="tipPoint"></span>
</div>
</div>
Tip: Chrome has a nice shadow editor that you can use to set your values:
Creating an arrow with shadow
If you really want to get it right, there's a way you can make an arrow with shadow. Instead of having a child div tipPoint under .toolTip you can use the :after pseudo-selector. Will create a cube and rotate it 45deg with transform:
.tipPoint {
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
box-shadow: 0 16px 10px -17px rgba(0, 0, 0, 0.5);
}
.tipPoint:after {
content: "";
position: absolute;
width: 50px;
height: 50px;
background: #999;
transform: rotate(45deg); /* Prefixes... */
top: 75px;
left: 25px;
box-shadow: -1px -1px 10px -2px rgba(0, 0, 0, 0.5);
}
<div class="tipPoint"></div>
You can achieve this by using a box-shadow on the main element combined with pseudo elements that overlay each other. This method will result in a seamless drop shadow around the tooltip while using only one element.
See codepen for demo: https://codepen.io/JKudla/pen/GvWYEx
.Tooltip {
width: 15em;
height: 10em;
background: #fff;
box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
position: relative;
}
.Tooltip:after,
.Tooltip:before {
content: '';
background: #fff;
position: absolute;
height: 1.5em;
}
.Tooltip:before {
width: 1.5em;
right: 1.5em;
transform: rotate(45deg);
top: -0.75em;
box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
z-index: 0;
}
.Tooltip:after {
width: 3em;
top: 0;
right: 0.75em;
z-index: 1;
}
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:
Why isn't #para1 rendering above #para1:before?
CODEPEN HERE
.para {
color: #fafafa;
}
#para1 {
background: blue;
padding: 0 0 20px 0;
position: relative;
z-index: 2;
}
#para1:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0px;
height: 0px;
border: 150px solid rgba(0, 0, 0, 0);
border-top: 0px solid rgba(0, 0, 0, 0);
border-right: 50px solid rgba(0, 0, 0, 0);
border-left: 500px solid rgba(0, 0, 0, 0);
border-bottom-color: red;
z-index: 1;
display: block;
}
#para1 {
font-size: 40px;
}
<div id="para1" class="para"><span class="hpro">HELLO <span class="bold">WORLD</span> </span> <span class="satisfy">pre launch contest festival</span>
</div>
Because the #para is establishing a new stacking context itself.
Try removing its z-index and give a negative z-index to its pseudo child element #para:before as follows:
.para {
color: #fafafa;
}
#para1 {
background: blue;
padding: 0 0 20px 0;
position: relative;
/*z-index: 2;*/
}
#para1:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border: 150px solid rgba(0, 0, 0, 0);
border-top: 0 solid rgba(0, 0, 0, 0);
border-right: 50px solid rgba(0, 0, 0, 0);
border-left: 500px solid rgba(0, 0, 0, 0);
border-bottom-color: red;
z-index: -1;
}
#para1 {
font-size: 40px;
}
<div id="para1" class="para"><span class="hpro">HELLO <span class="bold">WORLD</span> </span> <span class="satisfy">pre launch contest festival</span>
</div>