ive got a div styled with the css properties:
border: 20px solid #000;
-webkit-box-shadow: 0 0 40px 0 rgba(0,0,0,0.5);
the problem i have is, the shadow of the div is just outside, but not inside of the border.
ive allready tried to set the background to 100% opacity with background: rgba(0,0,0,0); but nothing changes.
I also tried to use inset but then the shadow is just inside.
what to do?
No reason to expect anything different. If you want an inner shadow, add a second one to the declaration that starts with the keyword inset.
E.g. -webkit-box-shadow: 0 0 40px 0 rgba(0,0,0,0.5), inset 0 0 40px 0 rgba(0,0,0,0.5);.
Note that elements that are descendants of the element with the box shadow will cover the inner shadow.
Also note that some older versions of modern browsers only support one shadow declaration at a time, but I think that set of browsers/versions is quite small.
Try something like this:
#mydiv {
border: 1px red solid;
box-shadow: 0 0 15px #555, inset 0 0 15px #555;
width: 100px; height: 100px;
}
Codepen
Related
Is it possible to apply two text-shadow values on one p element with CSS3?
I want to create a very light black background with a 1 pixel border.
Something like this:
text-shadow: 0 0 55px black; (very light black background to increase white text readabilitiy)
&
text-shadow: 0 1px 0 rgba(0,0,0, .25); (one pixel black drop shadow)
You can simply seperate the shadows with a comma:
text-shadow: 0 0 55px black, 0 1px 0 rgba(0,0,0, .25);
Demo fiddle
You may want to have a look at this article on MDN for further information.
The text-shadow CSS property adds shadows to text. It accepts a
comma-separated list of shadows to be applied to the text and
text-decorations of the element.
Each shadow is specified as an offset from the text, along with
optional color and blur radius values.
Multiple shadows are applied front-to-back, with the first-specified shadow on top.
You can try using this code :
p { text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; }
REF : CSS SHADOW TRICKS
Question ,surely, for CSS3-guru. I am used box-shadow for buttons,modals,etc. But I never would have thought that we can using like this.
HTML
<div></div>
CSS
div {
border-radius:50%;
height:2px; width:2px; /* To allow border-radius to work */
position:absolute;
top:50%; left:50%;
margin-top:-1px; margin-left:-1px;
box-shadow:
-75px -125px 0 40px #6cce74,
75px -125px 0 40px #c18d46,
150px 0px 0 40px #c14745,
75px 125px 0 40px #2e1e5b,
-75px 125px 0 40px #9c37a6,
-150px 0px 0 40px #76bdd1;
}
I saw only code and result (without explanation). And now i trying understand how single div with enumeration of six (N) box-shadow render to it :
OUTPUT
Please, explain me ( or give me link with any explanation), how renderer works in this case. Thanks!
JSFiddle: http://jsfiddle.net/9Rddm/1/.
The box-shadow style has the following syntax here:
box-shadow: [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ]+
(source: MDN) - where the + represents that the group can be repeated 1 or more times, and the ? represents that that value is optional.
This means that the first dot, created by box-shadow: -75px -125px 0 40px #6cce74,, has an offset with coordinates (-75, -125) relative to the div it's made from. It has a blur radius of 0 (so no blur) and it has a spread-radius of 40px (so it's 40px in radius).
This is then repeated for the other 5 dots with different coordinates and colours. Each shadow gets different coordinates, and a different colour, which results in the 6 dots being positioned and coloured this way.
PS: I suggest (in Chrome:) right-clicking on the result frame in that fiddle, then clicking "Inspect Element" (bottom option), and then navigating down the DOM tree you'll find (you'll most open a panel that has either <html> or <body> selected, you'll want to navigate down that tree to end up on the <div>). In that interface you'll see what styles are applied to the element. What you could do to make things a bit clearer is first clicking on the box-shadow style in the styles part of the panel that showed up, then placing your cursor on any number you see there, and then pressing the up/down arrow. If you press the up/down arrow, it will in/decrement the number you've selected, and dynamically update the result too. If you do that, you can see directly what happens for each value you change.
You can separate different instances of a box-shadow with a comma, this is useful for creating 3D buttons or text boxes that look "pressed" into the page.
The relevant code:
box-shadow:
-75px -125px 0 40px #6cce74,
75px -125px 0 40px #c18d46,
150px 0px 0 40px #c14745,
75px 125px 0 40px #2e1e5b,
-75px 125px 0 40px #9c37a6,
-150px 0px 0 40px #76bdd1;
Each one of those declarations is a separate shadow. So in your example the code creates a small empty (thus invisible), circular div and gives it 6 different shadows with different positions. This effect can also be used for this effect:
HTML:
<input type='text'>
CSS:
html {
background: grey;
}
input {
border: 1px solid black;
box-shadow: inset 1px 1px 9px rgba(0,0,0,.3), inset -1px -1px 9px rgba(0,0,0,.3); /* note the separated declarations */
line-height: 25px;
border-radius: 4px;
}
http://jsfiddle.net/9Rddm/4/
Altering anyone of the properties in the box-shadow rule would alter one of the six-circles
I am creating a website, and I want to create this effect of giving an outer glow shadow to the main column in the page ..
This page serves as an example: http://royalwatches.pk/
Note that the main column has a shadow effect on both left and right sides, to make the column appear to be 'in front' of the background.
This picture also show's what I'm talking about:
This is the page where I want to replicate this effect: http://blu-rays.pk/index.php
Can someone guide me on what CSS/HTML changes need to be done ?
Sidenote: Putting this all in jsfiddle seemed impractical, which is why I've mentioned the sites instead ..
You can use box-shadow property.
CSS
img{
box-shadow: 0px 0px 5px gray;
}
JSFiddle
Or in your case:
#wrapper{
box-shadow: 0px 0px 5px gray;
}
Note: remove the background-image from #wrapper.
Remember to add code so that the shadow is visible in more browsers, like so:
#wrapper {
-moz-box-shadow: 0px 0px 5px gray;
-webkit-box-shadow: 0px 0px 5px gray;
box-shadow: 0px 0px 5px gray;
}
More can be read about this at: http://css-tricks.com/snippets/css/css-box-shadow/
How do I get a drop shadow to spread the full width of an element. This is what I have right now but I'm it's falling short of spreading horizontally across the element.
As you can see at the right and left of the image the shadow is inset I need it to span the entire width.
box-shadow: 0 8px 6px -6px black;
Your negative spread-radius is causing that. Change the -6px to some positive value:
box-shadow: 0 8px 6px 6px black;
jsFiddle example
According to the MDN:
Positive values will cause the shadow
to expand and grow bigger, negative values will cause the shadow to
shrink. If not specified, it will be 0 (the shadow will be the same
size as the element).
Dont use the -6px have it at 0px, also dont forget about other browsers.
-webkit-box-shadow: 0 8px 6px 0 #000000;
-moz-box-shadow: 0 8px 6px 0 #000000;
box-shadow: 0 8px 6px 0 #000000;
How can I define background-image repeat with cap insets? I want the image to be repeated without border. Is it possible to repeat (tile) or stretch the middle in CSS?
The first (smaller) rounded rectangle is my PNG image. Red lines show cap insets I want to define. The latter (bigger) should be shown as result.
Check out the CSS3 border-image property. It's designed for this sort of thing.
.box {
border-image: url(my-image.gif) 20 20 20 20 repeat;
}
Interactive demo here.
It's supported on most non-IE browsers.
This looks like you could just solve this by using pure css3
.box {
background: white;
-moz-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
}