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>
Related
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 interest to know if it's possible to create a border with css3 which is similar to the following image?
Use box-shadow
body {
background: grey
}
div {
position: absolute;
width: 70%;
height: 30%;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background: #666;
/* BOX SHADOW APPLIES THE EFFECT YOU'RE AFTER */
box-shadow: inset 0 -18px 16px -16px #444, 0 6px 6px -7px #fff, 0 14px 8px -7px #444;
}
<div></div>
Trying to simulate a top border that doesn't start at the left edge of the element.
.border-top {
height: 50px;
width: 100px;
box-shadow: 15px -1px 0 0 black;
}
The above css is close, but produces a black 15px wide shadow to the right of the div. How do I contain that?
http://jsfiddle.net/3sjngyk1/
Top border with just a box shadow?
.border-top {
height: 50px;
width: 100px;
box-shadow: 0px -10px 0px 0px red;
margin-top: 25px;
background: lightblue;
}
<div class="border-top"></div>
Alternatively, you can use a pseudo-element and calc (if the border isn't going to be full width - it's not clear from your question).
.border-top {
height: 50px;
width: 100px;
background: lightblue;
position: relative;
margin-top: 25px;
}
.border-top::after {
content: '';
position: absolute;
height: 5px;
bottom: 100%;
left: 15px;
width: calc(100% - 15px);
background: red;
}
<div class="border-top"></div>
How about this?
http://jsfiddle.net/vleong2332/3sjngyk1/2/
.border-top {
height: 50px;
width: 100px;
box-shadow: 15px 0px 0 0 white, 15px -1px 0 0 black;
}
Put another shadow with the same color as the background on top of the black one.
I'm trying to create a tooltip that looks like this using CSS:
This is how i'm trying to solve it: http://jsfiddle.net/NXLuZ/
So, basically i'm using css3 masking:
div:after {
width: 61px;
height: 10px;
background: #fff;
-webkit-mask-image: radial-gradient(circle 10px at 0px 0, transparent 0, transparent 10px, black 11px);
top: -10px;
right: 0px;
position: absolute;
content: '';
display: block;
}
Looks good on regular displays, but you can see the problem when you're viewing it on a retina display or when you're trying to zoom in:
Because i'm using a gradient as a mask, it looks a bit blurry when the color changes in the gradient. Its important to mention, that the rounded corner needs to be transparent, because the background is not fixed behind it.
Any idea how can i fix this issue?
You can do it with a box shadow:
.demo{
position: absolute;
left: 400px;
top: 106px;
background: #fff;
width: 200px;
height: 200px;
-moz-border-radius:10px 0 10px 10px;
-webkit-border-radius:10px 0 10px 10px;
border-radius:10px 0 10px 10px;
-moz-box-shadow: 3px 4px 20px rgba(0,0,0,.5);
-webkit-box-shadow: 3px 4px 20px rgba(0,0,0,.5);
box-shadow: 3px 4px 20px rgba(0,0,0,.5);
line-height:200px;
text-align:center;
color:#dbdbdb;
}
.demo:before {
content: '';
width: 50px;
position: absolute;
right: 0px;
top: -26px;
height: 16px;
background: #fff;
-moz-border-radius:10px 10px 0 0;
-webkit-border-radius:10px 10px 0 0;
border-radius:10px 10px 0 0;
display: block;
}
.demo:after {
width: 10px;
height: 10px;
background: transparent;
top: -10px;
right: 50px;
position: absolute;
content: '';
border-bottom-right-radius: 100%;
box-shadow: 50px 0px 0px 50px white;
clip: rect(0px, 60px, 50px, 0px);
display: block;
}
fiddle