I am trying to replicate canvas frame effect on paintings on images using CSS.
I can do shadows and rounded corners but I couldn't figure out how to do the 3D effect of "rounded/wrapping sides".
My actual is left image while I am trying to replicate the effect of the right one. Please ignore the background of the expected image.
Any help?
Thanks.
.image{
display:flex;
justify-content:space-evenly;
}
#actual {
border-radius: 4px;
box-shadow: 20px 4px 10px rgba(0,0,0,0.35), 40px 8px 10px rgba(0,0,0,0.15);
}
<div class="image">
<img id="actual" src="http://lorempixel.com/output/cats-q-c-640-480-10.jpg">
<img id="expected" src="https://i.imgur.com/XD8Vdvv.jpg">
</div>
You can approximate it using inset shadow:
.image{
display:inline-block;
border-radius: 4px;
box-shadow:
-2px -2px 1px rgba(0,0,0,0.5) inset,
20px 4px 10px rgba(0,0,0,0.35),
40px 8px 10px rgba(0,0,0,0.15);
width:320px;
height:240px;
margin:10px;
background:url(http://lorempixel.com/output/cats-q-c-640-480-10.jpg) center/cover;
}
<div class="image">
</div>
Just want to get creative with box-shadow layering... Cheers;
figure {
display: block;
margin: 1rem auto;
height: 10rem;
width: 10rem;
border: gray 1px solid;
border-radius: 3px;
background: lightgray url('https://i.stack.imgur.com/BVW9D.jpg') no-repeat center center;
background-size: cover;
box-shadow: 2px 2px 0 gray,
3px 3px 4px rgba(0,0,0,.9),
6px 6px 12px 4px rgba(0,0,0,.25),
0 0 14px 4px rgba(0,0,0,.15);
}
<figure></figure>
Related
I want to make box-shadow to the left and right sides,however there is alway a shadow in the top of the box,I have checked my code many times.
#box {
margin: 0 auto;
margin-top: 0px;
border: 1px solid #ffffff;
border-top-color: #e99f2e;
overflow: hidden;
box-shadow: 2px 0 20px 2px #7f7e7f, -2px 0 20px 2px #7f7e7f;
}
<div id="box"></div>
First understand the syntax of box-shadow and then it get's easy to apply box-shadow at any side as you have planned your design,
syntax -
box-shadow : offset-x | offset-y | blur-radius | spread-radius | color
#box {
margin: 0 auto;
margin-top: 0px;
overflow: hidden;
box-shadow: -10px 0 2px -2px #7f7e7f, 10px 0 2px -2px #7f7e7f;
height: 150px;
width: 50%;
background:#cff;
margin-top:20px;
}
<div id="box"></div>
There is a hack actually.
You can achieve this by adding an "empty" top and bottom shadow.
box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(30, 53, 125, 0.9), -12px 0 15px -4px rgba(30, 53, 125, 0.9);
I don't think this is as good as the other answers, but this is an alternative approach using absolute positioned pseudo elements with shadows.
.lr-shadow {
background:#fff;
border: 1px solid #fff;
border-top-color: #e99f2e;
width:100%;
max-width:500px;
height:200px;
position:relative;
margin:0 auto;
}
.lr-shadow:before, .lr-shadow:after {
box-shadow: 0 0 20px 2px #7f7e7f;
content:" ";
position:absolute;
top:50%;
transform:translateY(-50%);
height:90%;
z-index:-1;
}
.lr-shadow:before {
left:5px;
}
.lr-shadow:after {
right:5px;
}
<div class="lr-shadow"></div>
You can achieve this effect if you set the spread to the negative of blur parameter. For the left box shadow, set position to negative blur and the right box shadow, position to positive blur. I used 20px in this demo:
#box {
margin: 0 auto;
margin-top: 40px;
border: 1px solid #ffffff;
border-top-color: #e99f2e;
overflow: hidden;
width: 150px;
height: 150px;
box-shadow: 20px 0px 20px -20px #7f7e7f, -20px 0px 20px -20px #7f7e7f;
}
<div id="box"></div>
Check out this CSS Box-shadow generator to explore further.
I am using this code:
border-right:0px solid #ddd;
height:85px;
box-shadow :5px 5px 10px 1px #eaeaea;
but i just got this results http://codepen.io/anon/pen/MpmPYq
I want to add the same width with shadow at left, buttom and the right side
I'll add this shadow to the dropdown menu at this site http://94.247.169.169/~welloteket/
If you want all four sides shadowed, try this following code:
div {
-webkit-box-shadow: 0 0 100px #000;
box-shadow: 0 0 100px #000;
}
I tested this on CodePen aswell, http://codepen.io/anon/pen/RpVeRG, It is because your Y and X is offset.
If you are looking for the left, right and bottom to be shadowed.
You can use the following code instead:
-moz-box-shadow: 0px 3px 8px rgb(100,100,100);
-webkit-box-shadow: 0px 3px 8px rgb(100,100,100);
box-shadow: 0px 3px 8px rgb(100,100,100);
http://codepen.io/anon/pen/Ppmxoa
Try this code :
div {
height: 200px;
width: 300px;
margin: 50px auto 0;
border-right: 0px solid #ddd;
height: 85px;
box-shadow: 5px 5px 10px 1px #eaeaea, -5px 5px 10px #eaeaea;
}
<div></div>
I just want no border on the bottom of the box, or is it not possible? The reason I am using 'box-shadow:inset' instead of the regular border style because it does not alters my box size and shifts my box out of position.
.box {
width: 82px;
height: 56px;
box-shadow:inset 0px 0px 0px 5px #AC92C4;
border-radius: 5px 5px 0px 0px;
}
https://jsfiddle.net/dcaktwuz/
You wrote:
The reason I am using 'box-shadow:inset' instead of the regular border
style because it does not alters my box size and shifts my box out of
position.
You can still try to make a border (with border-bottom: none;) and add box-sizing: border-box, which will include the borders (and padding) in the overall width and height of the element.
You can shift shadows:
.box {
display: inline-block;
vertical-align: middle;
width: 82px;
height: 56px;
border-radius: 5px 5px 0px 0px;
border: 1px solid #ccc;
}
.shift1 {
box-shadow: inset 5px 5px 0px 5px #AC92C4;
}
.shift2 {
box-shadow: inset -5px 5px 0px 5px #AC92C4;
}
.shift1.shift2 {
box-shadow: inset 5px 5px 0px 5px #AC92C4, inset -5px 5px 0px 5px #AC92C4;
}
<div class="box shift1"></div> + <div class="box shift2"></div> =
<div class="box shift1 shift2"></div>
How can I add an inner shadow to a bootstrap "image-circle"?
jsfiddle
This doesn't work..
.box-shad {
box-shadow: 0 10px 20px #777 inset, 0 0 200px #000 inset, 0 0 150px #000 inset, 0 0 100px #000 inset;
}
<img class="img-circle box-shad" alt="" src="http://placehold.it/140x140"><img class="img-circle box-shad" alt="" src="http://placehold.it/140x140">
Thanks for any ideas.
SOLUTION:
Put the box shadow on a circular div with background image set to the image, rather than using an image.
You can try something like this:
.box-shad {
-webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
}
Demo: http://jsfiddle.net/52VtD/1926/
UPDATE
I don't think it's possibile to set an inner shadow because it's an image; you can draw the circle too instead of use an image, so you'll can set the inner shadow.
Code:
.box-shad {
-webkit-box-shadow: inset 0 0 4px #000;
-moz-box-shadow: inset 0 0 4px #000;
box-shadow: inset 0 0 4px #000;
}
.circle {
width: 140px;
height: 140px;
display: inline-block;
border-radius: 50%;
background-color: #aaa;
}
Demo: http://jsfiddle.net/52VtD/1943/
This works to me. Please try it.
.inner-shadow {
box-shadow: inset 3px 3px 4px black;
border-radius: 50%;
}
img {
width: 100%;
border-radius: 50%;
position: relative;
z-index: -10;
}
<div class="inner-shadow">
<img src="http://placehold.it/300x300" alt="">
</div>
Closest I get is this:
http://jsfiddle.net/52VtD/1941/
<div class="border">
<a class="shadow img-circle"><img class="img-circle" src="http://placehold.it/140x140" /></a>
CSS:
.border
{
padding:10px;
width:160px;
}
.shadow
{
display:block;
position:relative;
}
.shadow img
{
display:block;
}
.shadow::before
{
display:block;
content:'';
position:absolute;
width:100%;
height:100%;
-moz-box-shadow:inset 0px 0px 5px 2px rgba(0,0,0,0.2);
-webkit-box-shadow:inset 0px 0px 5px 2px rgba(0,0,0,0.2);
box-shadow:inset 0px 0px 5px 2px rgba(0,0,0,0.2);
}
this article may help http://designbystevie.com/2011/03/applying-css3-inset-box-shadows-to-images/
I want to draw few circle using inner box-shadow.
Here is my JsFiddle
css
.circle {
width: 20px;
height: 20px;
display: inline-block;
border-radius: 50%;
border:1px solid #000;
}
How can i apply inner box-shadow in the circle
Specify inset for the inner shadow, the x and y displacement, the blurring and the color. Example:
box-shadow: inset 3px 3px 4px #000;
Demo: http://jsfiddle.net/uJzgs/2/
For compatibility:
-webkit-box-shadow: inset 3px 3px 4px #000;
-moz-box-shadow: inset 3px 3px 4px #000;
box-shadow: inset 3px 3px 4px #000;
Why not use a radial-gradient
.circle {
width: 20px;
height: 20px;
display: inline-block;
border-radius: 50%;
border:1px solid #000;
background: radial-gradient(#FFF 40%, #000);
}
Example http://jsfiddle.net/za7b8/1