Box shadow works in Firefox but not Chrome. Does anyone know how to fix this problem.
I tried adding the web-kit line as shown in my code below, but has no effect.
#cv_photo
{
border: 3px solid black;
box-shadow: 6px 6px 4px rgb(60 60 60);
box-shadow: 6px 6px 4px rgb(60 60 60);
}
I have included the full code below in case the problem is coming from elsewhere in the code:
#anchor_me
{
text-align: center;
}
#cv_photo {
position: absolute;
right: 40px;
top: 60px;
display: flex;
z-index: -1;
}
body
{
background-image: url("IMG_89120.jpg");
background-position: center
}
body
{
color: rgb(0,0,0);
}
#anchor_me
{
color: rgb(102,51,0);
}
#cv_photo
{
border: 3px solid black;
box-shadow: 6px 6px 4px rgb(60 60 60);
box-shadow: 6px 6px 4px rgb(60 60 60);
}
Any help to fix the problem will be much appreciated.
You need to put a colon to separate the RGB values
Try this:
#cv_photo{
border: 3px solid black;
box-shadow: 6px 6px 4px rgb(60, 60, 60);
box-shadow: 6px 6px 4px rgb(60, 60, 60);
}
I've got a weird situation. I'm using AngularJS to dynamically set the position of a range slider based on the current position in the video. If I style just the thumb (by enabling the bottom two calls below) the thumb moves along the slider in real time as expected. If I style the input[type="range"] as in the first section below, the thumb doesn't move dynamically unless you mouse over it.
I have tried other CSS styles of range inputs that I pulled from various websites, and I experience the same outcome each time. This seems to affect only Chrome. The weirdest thing is that IE works just fine (who would have thought?!) with the styled slider and the thumb moves along nicely.
input[type="range"] //::-moz-range-track //::-ms-track
{
outline:none;
background: rgb(127, 183, 219);
width: 130px;
height: 6px;
-webkit-appearance: none;
border-radius: 8px;
-moz-border-radius: 8px;
-wekkit-border-radius: 8px;
}
input[type="range"]::-webkit-slider-thumb// ::-moz-range-thumb ::-ms-thumb
{
outline:none;
-webkit-appearance:none !important;
width:20px;
height:20px;
-webkit-appearance: none;
border-radius: 10px;
-moz-border-radius: 10px;
-wekkit-border-radius: 10px;
border:1px solid rgba(127, 183, 219, 1.0);
background: #FFF;
-webkit-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(255, 255, 255, 0.05);
-moz-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(255, 255, 255, 0.05);
}
input[type="range"] ::-webkit-slider-thumb:hover// ::-moz-range-thumb:hover ::-ms-thumb:hover
{
outline:none;
-webkit-appearance:none !important;
width:22px;
height:22px;
-webkit-appearance: none;
border-radius: 10px;
-moz-border-radius: 10px;
-wekkit-border-radius: 10px;
border: 1px solid rgba(127, 183, 219, 1.0);
background: #FFF;
-webkit-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(255, 255, 255, 0.05);
-moz-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(255, 255, 255, 0.05);
}
I want to get a textfield effect using CSS3 like this :-
I tried to do that using CSS3 but yet not succeeded to get exactly the same look, please find my code here in jsfiddle.net
CSS
.field {
-webkit-box-shadow: inset 0px 1px 4px 1px #929292;
-moz-box-shadow: inset 0px 1px 4px 1px #929292;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset;
width: 277px;
height: 18px;
border-top: #9f9e9e 1px solid;
border-right: #c9c9c9 1px solid;
border-bottom: #ececec 1px solid;
border-left: #c9c9c9 1px solid;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
outline: none;
padding: 6px 8px;
font-size: 13px;
line-height: 16px;
color: #333;
}
HTML
<input type="text" name="name" value="" class="field">
Thanks in advance.
It is difficult to define "exactly the same look". Any way, that is my try:
updated demo
I have changed box-shadow, and given it a second shadow
box-shadow: inset 0px 1px 2px 1px rgba(0, 0, 0, 0.3),
inset 0px -1px 1px 1px rgba(0, 0, 0, 0.2);
The key issue here is that you can set as many shadows as you want, even of the same kind (I mean both being "inset"). This way, you can get almost whatever you want. Even more, if you are using alpha in the colors.
By the way, I think you can drop -webkit-border-radius.
Can an inset box-shadow work on an inputfield?
JsFiddle: http://jsfiddle.net/hKTq2/
Yes, this is something I was working on the other day, it is indeed possible.
input
{
box-shadow:inset 0 0 5px 5px #888;
background: #fff;
}
You just need to have a background set for the shadow to fall onto :)
http://jsfiddle.net/Kyle_/ZCq6w/
In the meantime, this has become a common, though here's my "the perfect inset input".
input {
background: #fff;
color: #525865;
border-radius: 4px;
border: 1px solid #d1d1d1;
box-shadow: inset 1px 2px 8px rgba(0, 0, 0, 0.07);
font-family: inherit;
font-size: 1em;
line-height: 1.45;
outline: none;
padding: 0.6em 1.45em 0.7em;
-webkit-transition: .18s ease-out;
-moz-transition: .18s ease-out;
-o-transition: .18s ease-out;
transition: .18s ease-out;
}
input:hover {
box-shadow: inset 1px 2px 8px rgba(0, 0, 0, 0.02);
}
input:focus {
color: #4b515d;
border: 1px solid #B8B6B6;
box-shadow: inset 1px 2px 4px rgba(0, 0, 0, 0.01), 0px 0px 8px rgba(0, 0, 0, 0.2);
}
body {
background: #fff;
margin: 20px;
}
<input type="text" />
Yes you need to add :
background-color:transparent;
Hi ADD this css then you able to insert shadow
.innershadow{ -moz-box-shadow: inset 0 0 5px 5px #888; -webkit-box-shadow: inset 0 0 5px 5px#888; box-shadow: inset 0 0 5px 5px #888; height:15px; background-color:transparent; height:50px}
Just add background:none; on class .innershadow
http://jsfiddle.net/jack_fiddle/hKTq2/6/
you could do something like this to realize a inset dropshadow inside the text-input:
.innershadow {
font-size: 16px;
color: #999;
padding: 6px;
-moz-box-shadow:inset 2px 2px 5px #888;
box-shadow:inset 2px 2px 5px #888;
border: 1px solid #b8b8b8;
}
HTH,
--hennson
I'm wondering about the support for side specific inner shadows in css3.
I know this works great on supported browsers.
div { box-shadow:inset 0px 1px 5px black; }
I'm just curious as to whether there is a way to achieve something like:
div { box-shadow-top:inset 0px 1px 5px black; }
This is what worked for me:
box-shadow: inset 1px 4px 9px -6px;
Example: http://jsfiddle.net/23Egu/
I don't think your really need box-shadow-top because if you set offsetx to 0 and offsety to any positive value only remaining shadow is on top.
if you want to have shadow on top and shadow in the bottom you just can simply use two divs:
<div style="box-shadow:inset 0 1px 5px black;">
<div style="box-shadow:inset 0 -1px 5px black;">
some content
</div>
</div>
if you want to get rid of shadow on sides use rgba instead of hex color and set bigger offsety:
box-shadow:inset 0 5px 5px rgba(0,0,0,.5)
this way you give shadow more opacity so sides stay hidden and with more offset you get less opacity
full example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
body {
background: #1C1C1C;
}
div {
margin: 50px auto;
width: 200px;
height: 200px;
background: #fff;
-webkit-border-radius: 20px;
-khtml-border-radiust: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
box-shadow:inset 0px 5px 5px rgba(0,0,0,.5);
}
div > div {
background:none;
box-shadow:inset 0px -5px 5px rgba(0,0,0,.5);
}
</style>
</head>
<body>
<div><div></div></div>
</body>
</html>
using :before and after elements with regular shadows cut of by overflow:hidden on the parent box like in this example: http://dabblet.com/gist/2585782
CSS
/**
* Top and Bottom inset shadow
*/
#element{
background-color: #E3F2F7;
height: 55px;
position: relative; /* to position pseudo absolute*/
overflow: hidden; /* to cut of overflow shadow*/
margin-top: 200px;
}
#element:before , #element:after{
content: "\0020";
display: block;
position: absolute;
width: 100%;
height: 1px; /* when 0 no shadow is displayed*/
box-shadow: #696c5c 0 0 8px 0;
}
#element:before { top: -1px} /* because of height: 1*/
#element:after { bottom: -1px} /* because of height: 1*/
HTML
<div id="element"></div>
You can use a background gradient for a work around in most cases:
SCSS(with compass) example:
#include background(linear-gradient(top, #666 1%, #999 3%, #ddd 6%, #f6f6f6 9%, #f6f6f6 92%, #ddd 94%, #999 97%, #666 99%) );
box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
-moz-box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
-o-box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
This works just lovely :)
Here is a codepen illustrating it:
http://codepen.io/poopsplat/pen/cGBLy
For the same shadow but only on the top :
box-shadow: inset 0px 6px 5px -5px black;
To have the shadow in one direction you have to negate the "blur" parameter with the "spread" parameter and then adjust the "h-pos" and/or "v-pos" parameters by this same value.
It doesn't work with opposite border or triple border. You have to add one more definition.
More examples here : http://codepen.io/GBMan/pen/rVXgqP
No, not directly, but you can crop off the parts that you don't want by putting it in a div with overflow: hidden:
http://jsfiddle.net/Vehdg/
I just had this problem myself. The solution that I found was with multiple box-shadows (one for each side that you want your shadow). Here is the definition:
box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;
Here is how to think it:
first, make the spread 0 (this will disable the effect on all sides)
the h-offset (if you set it to be positive, it will cast on the left side, if you set it negative, on the right side)
the v-offset (if you set it to be positive, it will cast on the top side, if you set it negative, on the bottom side
Here you can see my case with box-shadow on three sides (left, top, right and the bottom is with same color as the background to create the effect that I wanted - the left side and the right go all the way to the bottom)
https://codepen.io/cponofrei/pen/eMMyQX
You can accomplish a single-sided, inner shadow by setting your div to overflow:hidden and adding shadow elements along the borders.
Set an inner shadow on the top and bottom borders of a division:
HTML
<div id="innerShadow">
<div id="innerShadowTop">
Content...
<div id="innerShadowBottom">
</div>
CSS
#innerShadow
{
position: relative;
overflow: hidden;
}
#innerShadowTop
{
width: 100%;
height: 1px;
margin: 0;
padding: 0;
position: absolute;
top: -1px;
-moz-box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
-webkit-box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
-o-box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
}
#bannerShadowBottom
{
width: 100%;
height: 1px;
margin: 0;
padding: 0;
position: absolute;
bottom: -1px;
-moz-box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
-webkit-box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
-o-box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
}
box-shadow is for all four sides. You can't change that (yet?). The 4 sizes in the box-shadow definition are OffsetX, offsetY, Blur and Spread.
Multiple box shadows did the trick for me.
box-shadow:
inset 0 -8px 4px 4px rgb(255,255,255),
inset 0 2px 4px 0px rgba(50, 50, 50, 0.75);
http://jsfiddle.net/kk66f/