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:
Related
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>
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>
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;
}
Can't I have both box shadow inner and outer on the same div?
I've tried but it doesn't work
http://jsfiddle.net/CWuw8/
div{
top: 100px;
position: absolute;
left: 100px;
height: 100px;
width: 100px;
box-shadow: 10px 10px 10px;
box-shadow: 0 0 10px inset;
border-radius: 5px;
background: white;
}
body{background: #d14343}
<div></div>
You need to use comma to separate both shadows: http://jsfiddle.net/gryzzly/CWuw8/3/
And you must also specify the color for your shadow in order for it to be seen.
div{
top: 100px;
position: absolute;
left: 100px;
height: 100px;
width: 100px;
box-shadow:
10px 10px 10px #000,
inset 0 0 10px #000;
border-radius: 5px;
background: white;
}
body{background: #d14343}
<div></div>
Using CSS3 you can have multple box shadows just by seperating them by commas eg:
box-shadow: 10px 10px 10px, 0 0 10px inset;
You can have as many as you want.
Added a runable code snippet:
div {
top: 100px;
position: absolute;
left: 100px;
height: 100px;
width: 100px;
box-shadow: 10px 10px 10px rgba(0, 0, 0, .5),
0 0 10px rgba(255, 0, 0, .5) inset;
border-radius: 5px;
background: white;
}
body {
background: #fff
}
<div></div>