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>
Related
This question already has answers here:
Box-shadow only on right and left
(3 answers)
Closed 3 years ago.
I currently have global box shadow on a site -
box-shadow: 0 0 5px rgba(0,0,0,.1);
But how do I modify the above so that it only appears on left or right side or both left and right?
Remember that you can use negative values for spread and multiple values for box-shadow.
.shadow {
width: 30%;
height: 40px;
margin: 2rem;
box-shadow:
-5px 0px 5px -6px rgba(0,0,0,1),
5px 0px 5px -6px rgba(0,0,0,1);
}
<div class="shadow"></div>
Another solution could be to use ::before and ::after and filter: blur. The benefits here is that you can transform: rotate the shadows to make it look like the parent element is slightly tilting.
.shadow {
position: relative;
margin: 2rem;
width: 30%;
height: 30px;
background-color: white;
}
.shadow::before,
.shadow::after {
z-index: -1;
content: '';
position: absolute;
top: 2px;
bottom: 2px;
background-color: #000;
width: 2px;
filter: blur(2px);
}
.shadow::after {
right: 0px;
}
.tilting.shadow::before,
.tilting.shadow::after
{
height: 4px;
top: initial;
bottom: 0px;
width: initial;
}
.tilting.shadow::before {
left: 0px;
right: 10px;
transform: rotate(-3deg);
}
.tilting.shadow::after {
left: 10px;
right: 0px;
transform: rotate(3deg);
}
<div class="shadow"></div>
<div class="tilting shadow"></div>
Try this:
box-shadow:
5px 0 5px -2px rgba(0,0,0,.5),
-5px 0px 5px -2px rgba(0,0,0,.5);
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>
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
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>