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/
Related
How can I made inner border with different values each? For example:
Top: 20px
Right: 80px
Bottom: 40px
Left: 10px
Example that what I want made...
Thank you. :)
To make it an inner border, use two box-shadows on the element, separated with a comma, and use negative values on the second set.
Like this:
box-shadow: inset 10px 20px 0px #000, inset -80px -40px 0px #000;
Here is a jsfiddle demo: http://jsfiddle.net/dr_lucas/23Egu/326/
This is the cross-browser compatible CSS:
-webkit-box-shadow:inset 10px 20px 0px #000, inset -80px -40px 0px #000;
-moz-box-shadow:inset 10px 20px 0px #000, inset -80px -40px 0px #000;
box-shadow:inset 10px 20px 0px #000, inset -80px -40px 0px #000;
Note that if you need it to be compatible with old IE versions that don't support box-shadow, you can use CSS3pie:
http://css3pie.com/
Hope this helps.
You can do it by using box-shadow
Here is an example how i've used it
Inner border: Do you mean padding?
If so:
padding: 20px 80px 40px 10px; // top left bottom right
Else if you really meant border then:
border-top: 20px solid #color;
border-right: 80px solid #color;
border-left: 10px solid #color;
border-bottom: 40px solid #color;
It can be achieved via CSS3 box-shadow also
hi there i am using the following code to get a shadow on the right and left side of a div tag but all four sides of the div are shadowed...
.shadow1 {
border-right:1px solid #8d8d8d;
border-left:1px solid #8d8d8d;
-moz-box-shadow:0px 0px 5px 0px #000;
-webkit-box-shadow: 0px 0px 5px 0px #000 ;
box-shadow: 0px 0px 5px 0px #000;
}
is there a way to get the shadow appear only on the right and left side of the div... ?? any help would be appreciated... thanks in advance... :)
This seems to work ok :)
box-shadow: 5px 0px 5px -4px #000,
-5px 0px 5px -4px #000;
EDIT: Oh, I'm waaay late :p looks like we came to more or less the same conclusion tho.
try this:
jsFiddle
div {
width:200px;
height:200px;
margin:20px;
border:1px solid #8d8d8d;
-weibkit-box-shadow: 5px 0px 10px -5px #000, -5px 0px 10px -5px #000;
-moz-box-shadow: 5px 0px 10px -5px #000, -5px 0px 10px -5px #000;
box-shadow: 5px 0px 10px -5px #000, -5px 0px 10px -5px #000;
}
Try this : http://css3-drop-shadows.herokuapp.com/app
It provides a css3 generator at the end.
It uses :before and :after
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/
Is there any way to add a glow around the div? Look at twitter login and how there is a blue glow around the input box, can that be done for the div?
CSS3 can do that
-webkit-box-shadow:0 0 20px blue;
-moz-box-shadow: 0 0 20px blue;
box-shadow:0 0 20px blue;
Working JSFiddle.
Here is the complete code to style a div exactly like the twitter login input. The styles for the blue border are the box-shadow and border styles for the selector div[contenteditable]:focus. Live demo here (click).
Markup:
<div contenteditable="true">Username or email</div>
CSS:
div[contenteditable]:focus {
border: 1px solid rgb(86, 180, 239);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05) inset, 0px 0px 8px rgba(82, 168, 236, 0.6);
}
div[contenteditable] {
width: 97%;
max-width: 280px;
margin-right: 10px;
font-family: Arial,sans-serif;
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.075);
box-shadow: inset 0 1px 3px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.075);
display: inline-block;
padding: 4px;
margin: 0;
outline: 0;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 13px;
line-height: 20px;
}
As shown before, use css: focus, border and box-shadow.
If using IE, make sure <doctype> is specified.
.text:focus {
border: 1px solid #07c;
box-shadow: 0 0 10px #07c;
}
jsFiddle example.
Also you will face some problem with Internet Explorer while dealing this issue. IE-9 How ever supports box-shadow but the previous versions don't, Check it out here for making it work in all versions of IE
I'm creating multiple borders to element using box-shadow, but they don't show at Webkit. What's wrong with this code? I'm using this four times to create shadow on each side, then border for extra border
box-shadow: 1px 1px 0px rgba(0,0,0,0.1);
Martti Laine
to display box-shadow in webkit browsers you have to use the following statement at the moment:
-webkit-box-shadow: 1px 1px 0px rgba(0,0,0,0.1);
To make it compatible with most modern browsers use this:
-webkit-box-shadow: 1px 1px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 1px 1px 0px rgba(0,0,0,0.1);
box-shadow: 1px 1px 0px rgba(0,0,0,0.1);
This works well enough, but please note that best practice is to place the non-proprietary declaration last.
-webkit-box-shadow: 1px 1px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 1px 1px 0px rgba(0,0,0,0.1);
box-shadow: 1px 1px 0px rgba(0,0,0,0.1);