I have a image
<img class="user-img" src="user_img/usr.jpg" alt="username" />
and adding a radius of 100px to create a circle.
.user-img {
width: 170px;
height: 170px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-khtml-border-radius: 100px ;
border-radius: 100px;
-moz-box-shadow: 0px 10px 10px 0px #999999; /* Firefox */
-webkit-box-shadow: 0px 10px 10px 0px #999999; /* Safari, Chrome */
box-shadow: 0px 10px 10px 0px #999999; /* CSS3 */
}
and this works fine, but then I add
border: solid 7px white;
This works in FF but in Chrome the border does not follow the radius of the rounded img.
Here's a demo http://jsfiddle.net/afro360/zcQ3G/2/
Suggestions anyone?
Thanks
Related
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>
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>
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
This works fine in Chrome, but not in IE8. It should just give a light-colored blue background with rounded corners and a drop shadow to the div:
.ppanel
{
background-color: rgba(0, 0, 255, .2);
color: black;
padding: 10px 10px 10px 40px;
margin: 10px 20px 20px 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 5px 5px 5px black;
-webkit-box-shadow: 5px 5px 5px black;
box-shadow: 5px 5px 5px black;
}
Internet explorer 8 does not support rounded corners by default. You can get the result you want however by using a tool like CSS3 PIE.
Internet Explorer did not support border-radius until IE9. You will find detailed information here: http://davidwalsh.name/css-rounded-corners.