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
Related
I am using box-shadow but it makes the whole container wrapped with shadow, how can I make a shadow only in the inside (top center) box?
Have you tried INSET this will put a shadow on the inside of an element.
.shadow{
box-shadow: inset 0px 0px 10px 0px #ABABAB,5px 5px 5px 1px #DDDDDD;
-webkit-box-shadow: inset 0px 0px 10px 0px #ABABAB,5px 5px 5px 1px #DDDDDD;
-moz-box-shadow: inset 0px 0px 10px 0px #ABABAB,5px 5px 5px 1px #DDDDDD;
-o-box-shadow: inset 0px 0px 10px 0px #ABABAB,5px 5px 5px 1px #DDDDDD;
}
div{
height:100px;
width:100px;
background:pink;
box-shadow: 0px 0px 0px 3px #000;
}
Above css worked but when I do box-shadow: inset 0px 0px 0px 3px #000; is wasn't work, I also tried box-shadow: 0px 0px 0px 3px #000 inset. Any idea?
try it with smaller number of parameters:
box-shadow: inset 0px 0px 3px #000;
or with specified engine:
-moz-box-shadow: inset 0px 0px 10px #000000;
-webkit-box-shadow: inset 0px 0px 10px #000000;
box-shadow: inset 0px 0px 10px #000000;
The syntax of box-shadow property is as follows:
box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;
You are not setting any value to h-shadow and v-shadow. That is why you are not able to see a shadow.
Try this code
div {
box-shadow: 10px 10px 5px #888888;
height: 100px;
width: 100px;
}
<div>
</div>
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
i am using the following code to make a shadow inside a div tag..
box-shadow: inset 0 10px 10px -10px #000 , inset 0 -10px 10px -10px #000;
but i get shadows on the top and bottom.. i only want the shadow to appear on top not the botton something like the following picture..
i'e been tinkering with the codes for hours but nothing... how can i do this. thanks.
Like this?
box-shadow: inset 0 10px 20px -15px #000;
DEMO
You need to delete the part after the comma.
box-shadow: inset 0 10px 10px -10px #000;
http://jsfiddle.net/9LzV4/
-webkit-box-shadow:inset 0 3px 5px 0 #E3E3E3;
box-shadow:inset 0 3px 5px 0 #E3E3E3;
for more experiments go to css3 generator
-webkit-box-shadow: inset 0px 6px 16px 0px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px 6px 5px 0px rgba(0,0,0,0.75);
box-shadow: inset 0px 6px 5px 0px rgba(0,0,0,0.75);
Demo
How to show only right and bottom parts of a shadow?
I know box-shadow can set a bottom. but how to set in -webkit-box-shadow and -moz-box-shadow?
box-shadow-bottom: 0px 4px 4px black;
The same way I am pretty sure:
-moz-box-shadow: 10px 10px 5px #222;
-webkit-box-shadow: 10px 10px 5px #222;
box-shadow: 10px 10px 5px #222;
box-shadow:
first argument: bottom offset, second: right offset, third: blur, fourth: color
for -moz and -webkit it's the same. So for a bottom right shadow of 4px with 4px blur:
-moz-box-shadow-bottom: 4px 4px 4px black;
-webkit-box-shadow-bottom: 4px 4px 4px black;
box-shadow-bottom: 4px 4px 4px black;