Hi I am trying to add a border to button in cshtml
.linkbig:hover {
border: solid #000000 1px;
-webkit-box-shadow: 6px 6px 5px #000000 ;
width: inherit;
}
but all I am getting is a border when I want a shadow this is only failing in IE
any help?
-webkit- is only supported by Safari, Chrome, Opera 15+.
Therefore, your code will not work in IE or Firefox.
You could however try using:
-moz-box-shadow: 6px 6px 5px #000000; /* Firefox */
-ms-box-shadow: 6px 6px 5px #000000; /* Internet Explorer */
box-shadow: 6px 6px 5px #000000; /* CSS3 */
However, this is only supported by IE 9 or later.
box shadow in IE need no prefixing
box-shadow: 1em 0.1em 0.5em 0.05em #000000;
or older IE you need -ms
ms-box-shadow: 1em 0.1em 0.5em 0.05em #000000;
firefox will need -Moz
-moz-box-shadow: 1em 0.1em 0.5em 0.05em #000000;
if you do not need the border line you need to remove this:
border: solid #000000 1px;
or you'll end up with a 1px black line around your .linkbig and this is likely to hide your shadow if its really subtle.
-Website is only supported by Safari, Chrome, Opera.
Update your CSS like below. So that it will work in chrome, firefox and IE.
.linkbig:hover {
border: solid #000000 1px;
-webkit-box-shadow: 6px 6px 5px #000000 ;
box-shadow: 6px 6px 5px #000000 ;
-moz-box-shadow: 6px 6px 5px #000000;
width: inherit;
}
Try like this:
CSS:
.linkbig:hover {
-webkit-box-shadow: 6px 6px 5px #000000;
-moz-box-shadow: 6px 6px 5px #000000;
-o-box-shadow: 6px 6px 5px #000000;
box-shadow: 6px 6px 5px #000000;
}
try this
filter:
progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=10, Color='#000000')
Related
Hello I want to use box shadow for div.
Any idea how to do that ?
I have use
box-shadow: 3px 3px 5px 6px #ccc;
but not working in firefox.
Use :
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
following documents shows it perfectly :
1
2
3
https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
Certain versions of Firefox may still require the use of the -moz prefix. Could that be the issue?
-moz-box-shadow: 3px 3px 5px 6px #ccc;
This looks fine to me
-moz-box-shadow: 3px 3px 3px 3px #cccccc;
box-shadow: 3px 3px 3px 3px #cccccc;
Try this:
-moz-box-shadow: 3px 3px 5px 6px #ccc;
Check the MDN for reference
if you want to using in mozilla using tag -moz-box-shadow:.. if chrome using tag -webkit-box-shadow:.. or in opera using tag -o-box-shadow:... for more details open
http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_image_gallery
for inner box-shadow use this
-moz-box-shadow: inset 0 0 10px #f00;
-webkit-box-shadow: inset 0 0 10px #f00;
box-shadow: inset 0 0 10px #f00;
And for outer box-shadow use this
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
box-shadow:3px 3px 5px 6px #ccc;
-webkit-box-shadow:3px 3px 5px 6px #ccc;
-moz-box-shadow:3px 3px 5px 6px #ccc;
-o-box-shadow:3px 3px 5px 6px #ccc;
-ms-box-shadow:3px 3px 5px 6px #ccc;
Use this code useful for you.
Please use -moz- prefix for older version of firefox.
-moz-box-shadow: 3px 3px 5px 6px #ccc; /*will work only in firefox*/
box-shadow: 3px 3px 5px 6px #ccc; /*will work on all browser and latest firefox also*/
Check it out here.
Just use it: http://css3gen.com/box-shadow/
It saves a lot of time.
box-shadow: 3px 3px 6px 6px;
this property is working in chrome firefox IE but not in safari 5 browser
I tried writing like this but it isn't working
-webkit-box-shadow:3px 3px 6px 6px;
-webkit-appearance: none;
-webkit-box-shadow: 3px 3px 6px 6px #addacolor;
box-shadow: 3px 3px 6px 6px #addacolor;
you haven't defined color here (box-shadow: h-shadow v-shadow blur spread color inset;)
<color> If not specified, the color used depends on the browser - it is usually the value of the color property, but note that Safari currently paints a transparent shadow in this case.
so define color for safari
-webkit-box-shadow: 3px 3px 6px 6px #color_you_want;
For reference, I had a similar problem with this box-shadow :
box-shadow: 0 0.06rem 0 0 rgba(44, 43, 63, 0.1); (very small shadow!)
It was working in other browsers except for Safari(v.8) who didn't show that shadow. I had to increase the value.
Have you tried with
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
#example1 {
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
http://www.css3.info/preview/box-shadow/
I have this button that appears fine on desktop and mobile, but when viewed on an android tablet there is this white background around the corners where the transparency for the button would be. Has anyone encountered this?
button.css3button {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #ffffff;
padding: 10px 20px;
background: none;
background: -moz-linear-gradient(top,#41f0ed 0%,#278a88);
background: -webkit-gradient(linear, left top, left bottom, from(#41f0ed), to(#278a88));
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
border: 0px solid #000000;
-moz-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 1px 1px rgba(255,255,255,1);
-webkit-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 1px 1px rgba(255,255,255,1);
box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 1px 1px rgba(255,255,255,1);
text-shadow:
0px -1px 0px rgba(000,000,000,0.2),
0px 1px 0px rgba(255,255,255,0.3);
}
have you tried
background:none;
to
background: transparent;
Try removing box-shadow or gradient. I imagine one of them is the culprit. If it is, you can do a conditional check for and Android tablet, and exclude that from your CSS.
var userAgent = window.navigator.userAgent.toLowerCase();
if ( /android/.test( userAgent ) && !/mobile/.test( userAgent ) ) {
//it's an android tablet, remove box-shadow
};
I've added both outline and box-shadow to a div in my CSS code.
The div looks great on Chrome and IE but not in Firefox:
Chrome and IE:
http://i.phirune.com/csrjfyqoczob
FireFox:
http://i.phirune.com/4gsrrub3ww6e
The CSS code is as follows:
#container {
width:960px;
margin:0px;
padding:0px;
margin-left:auto;
margin-right:auto;
margin-top:-10px;
background-color: #415475;
-moz-box-shadow: 0 0 25px 25px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 0 25px 25px rgba(0,0,0,0.2);
box-shadow: 0 0 25px 25px rgba(0,0,0,0.2);
outline:#000000 solid thick;
}
I have no idea how to fix this, any insight will be appreciated.
Why not use multiple box-shadows? Just separate your box-shadows by commas.
box-shadow:
0px 0px 0px 1px #fff,
0px 0px 0px 2px #606054,
0px -1px 9px 1px rgba(119, 119, 119, 0.4);
You can add as many has your heart desires.
This is a Firefox bug. You can only get around it. The ticket is still live, you may see at: https://bugzilla.mozilla.org/show_bug.cgi?id=480888
-moz-box-shadow: 1px 1px 10px #00f;
-webkit-box-shadow: 1px 1px 10px #00f;
box-shadow: 1px 1px 10px #00f;
What browser versions are you attempting to support? Modern browsers support css3 and you don't need to do the css hacks.
here's some css3 documentation for drop shadows: http://www.css3.info/preview/box-shadow/
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.