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
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 know it doesn't by default, but I'm trying to force it to.
I'm building a button-like anchor that has a solid box-shadow (no blur) to create the illusion of depth, and when hovered it reacts.
Only problem is that it reacts only when the cursor is above the anchor itself, and since it moves a few pixels when hovered, depending on how close is the cursor to the edge, it causes the anchor to flicker.
Is it possible to order the shadow to be included in the element's total size? And I know it's kind of bothersome that a button misbehaves in this way, but is it terrible coding? I realize it's kind of a design question, but I'm after the code, really.
TLDR: my anchor flickers when hovered too close to the edge. alternatives?
The code is working, but I'll paste it anyway.
Here's the code:
.btn {
display: inline-block;
width: 50%;
margin-left: 25%;
/*center*/
padding: 10px 20px;
border-radius: 20px;
background-color: #71e2ff;
box-shadow: 0 1px #34d6ff, 0 2px #34d6ff, 0 3px #34d6ff, 0 4px #34d6ff;
}
.btn:hover {
box-shadow: 0 1px #34d6ff, 0 2px #34d6ff, 0 3px #34d6ff, 0 4px #34d6ff, 0 5px #34d6ff, 0 6px #34d6ff;
transform: translateY(-2px);
}
.btn:active {
box-shadow: 0 1px #34d6ff, 0 2px #34d6ff;
transform: translateY(0);
}
<a class="btn" href="#">suscribe</a>
EDIT:
Thanks Paulie_D, worked like a charm! Pseudo element with absolute position stretched in all directions was the way to go.
No you can't include a box-shadow in the height/width calculations but you can increase the click / hover area by using a pseudo-element which is sized to include the box-shadow.
From CSS-Tricks
button {
border: 0;
border-radius: 0;
outline: 0;
background: #4e68c7;
box-shadow: 1px 0px 1px #203891, 0px 1px 1px #3852b1, 2px 1px 1px #203891, 1px 2px 1px #3852b1, 3px 2px 1px #203891, 2px 3px 1px #3852b1, 4px 3px 1px #203891, 3px 4px 1px #3852b1, 5px 4px 1px #203891, 4px 5px 1px #3852b1, 6px 5px 1px #203891;
color: white;
white-space: nowrap;
padding: 9px 16px;
position: relative;
}
button:hover,
button:focus {
background: #3d57b4;
}
button:hover,
button:active {
box-shadow: 1px 0px 1px #203891, 0px 1px 1px #3852b1, 2px 1px 1px #203891, 1px 2px 1px #3852b1, 3px 2px 1px #203891;
-moz-transform: translate(3px, 3px);
-ms-transform: translate(3px, 3px);
-webkit-transform: translate(3px, 3px);
transform: translate(3px, 3px);
}
button:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: -5px;
bottom: -5px;
outline: 1px solid red;
/* for demo */
}
button:hover::after,
button:active:after {
top: -3px;
left: -3px;
right: -2px;
bottom: -2px;
}
body {
padding: 30px;
}
#message {
padding: 10px 0;
}
<button>A Button</button>
How to create a border shadow inset as in the above image
jsfiddle
<div id="progress-bar">
<div id="bar"></div>
</div>
#progress-bar {
margin-top: 50px;
margin-bottom: 100px;
}
#bar {
width: 97%;
height: 20px;
background-color: #eeebf1;
border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
}
You can use the css box-shadow property : Box Shadow
#bar {
width: 97%;
height: 20px;
background-color: #eeebf1;
border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
-moz-box-shadow: 3px 3px 3px #CCC inset;
-webkit-box-shadow: 3px 3px 3px #CCC inset;
box-shadow: 3px 3px 3px #CCC inset;
}
http://jsfiddle.net/8kbwd/2/
Give this a shot...
.shadow {
-moz-box-shadow-top: inset 0 0 10px #000000;
-webkit-box-shadow-top: inset 0 0 10px #000000;
box-shadow-top: inset 0 0 10px #000000;
}
I'm using PIE for shadows, radius borders and gradients but none of these are working in IE8.
Here is an example of the code I'm using for radius and shadow.
.conflict-suggestion-body-left{
border-right:2px solid #FDFDFD;
border-bottom:2px solid #FDFDFD;
border-top:1px solid #B8B8B8;
float: left;
width: 49%;
margin-left:1px;
-moz-box-shadow: 1px 1px 2px #000;
-webkit-box-shadow: 1px 1px 2px #000;
box-shadow: 1px 1px 2px #000;
border-radius:0 0 2px 2px;
behavior: url(PIE.htc);
}
Here is an example of the code I'm using for the gradient.
.yui3-widget-hd {
background: #C9D2DD;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#D8D8DA', endColorstr='#B6CAD5');
background: -webkit-gradient(linear, left top, left bottom, from(#D8D8DA), to(#B6CAD5));
background: -moz-linear-gradient(0% 100% 90deg, #B6CAD5 35%, #D8D8DA 83%, white 100%) repeat scroll 0 0 transparent;
border: 1px solid #F3FAFE;
border-radius: 0.435em 0.435em 0 0;
behavior: url(PIE.htc);
height: 33px;
margin: 0;
width: 97%;
cursor: default;
}
Thanks in advance for your assistance.
You should specify the behavior url as absolute path:
http://css3pie.com/documentation/known-issues/#relative-paths
Maybe this solves your problem.
I think its your url problem.. try this one
behavior: url(//Yoursite.com/path/to/PIE.htc);