I want to create a content wrapper with a left and right shadow, not a bottom shadow. This is sort of what I'm going for: http://community.mybb.com/ notice the shadow (though this uses an image, not css).
What's the best way to do this with CSS?
Your best bet is to use an image to be compatible with older browsers. For CSS you'll use box-shadow but IE9 is the first IE to support box-shadow.
That being said you'll need to use two box-shadow properties if you want to use CSS. You'll need to do two of them.
Take a look at http://css-tricks.com/snippets/css/css-box-shadow/
Also the generator at http://css3generator.com/
Here is a vague idea of what to do
<div id="leftBorder">
<div id="rightBorder">
<div id="content">Content here</div>
</div>
</div>
#leftBorder {
-webkit-box-shadow: -10px 0px 5px 0px #999999;
-moz-box-shadow: -10px 0px 5px 0px #999999;
box-shadow: -10px 0px 5px 0px #999999;
}
#rightBorder {
-webkit-box-shadow: 10px 0px 5px 0px #999999;
-moz-box-shadow: 10px 0px 5px 0px #999999;
box-shadow: 10px 0px 5px 0px #999999;
}
Alternatively you can potentially set just the border property alone bit it won't give you the nice fuzzy shadow look.
It may be tough to support below IE9 and you may need to throw in some pictures anyway. An old A List Apart article explains how to do this but it's not pretty.
http://www.alistapart.com/articles/cssdrop2/
Related
Here is my issue. I have 2 css classes, my elements can have either
.classA{box-shadow:inset -2px 0px 0px 0px rgba(63,191,31,1);}
.classB{box-shadow:inset -2px 0px 0px 0px rgba(204,29,29,1);}
I wish to use a third class to change the inset but not the color
.classC{box-shadow:inset -10px 0px 0px 0px;}
That works (the shadow is here) but the color turns black. I would like to keep my original color.
How to change the shadow properties using CSS ONLY without losing the color?
Box-shadow cannot be broken into parts like for example border can. But a trick you can use is that box-shadow inherits its color from the color attribute of the element.
<div class="box">
</div>
<div class="shadow box">
</div>
.box{
box-shadow: 0 0 10px;
width: 100px;
height: 100px;
margin: 10px;
background: #fff;
}
.box.shadow{
color: rgba(255,0,0,.3);
}
http://jsfiddle.net/82z8r73o/
I'm trying to attempt the following. I have a div containing a box with a large border stroke. Here's the code I have been playing with.
.insta{
background:#000;
width:820px;
height:300px;
margin-left: auto;
margin-right: auto;
}
.inner-line{
border:10px solid #fff;
width:88%;
height:300px;
position:relative;
right:20;
left:20;
top:20;
bottom:20;
}
<div class="insta"><div class="inner-line"></div></div>
And I get this result,
I'm trying to get to this as the final result,
I know of the box methods CSS provides, but don't know if I can achieve this using that. Any ideas or thoughts?
You can use a combination of box-shadow that isn't using a spread or blur and border:
CSS
border: 10px solid white;
-webkit-box-shadow: 0px 0px 0px 10px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 0px 10px rgba(0,0,0,1);
box-shadow: 0px 0px 0px 10px rgba(0,0,0,1);
JSfiddle
Maybe border type "ridge" is enough...
http://jsfiddle.net/67U9z/1/
.inner-line{
border:3px ridge white;
...
I know this question is very old, but you can use outline offset:
http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_outline-offset
Just change the offset to a negative in order to get it inside the container:
outline-offset: -15px;
I have this div:
<!------ CONTENT ------>
<div id="content">
<div class="top">
I am cool<br />
I am cool<br />
I am cool<br />
I am cool<br />
</div>
</div>
<!------ /CONTENT ------>
With this CSS:
#content{
height:auto;
width:100%;
background-color:#FF0000;
}
#content .top{
margin:15px 35px 35px 35px;
padding:20px;
width:inherit;
height:inherit;
position:absolute;
-moz-box-shadow: 5px 5px 10px rgba(0,0,0,.8), inset 2px 2px 2px rgba(0,0,0,.2), inset -2px -2px 3px rgba(255,255,255,.85);
-webkit-box-shadow: 5px 5px 10px rgba(0,0,0,.8), inset 2px 2px 2px rgba(0,0,0,.2), inset -2px -2px 3px rgba(255,255,255,.85);
box-shadow: 5px 5px 10px rgba(0,0,0,.8), inset 2px 2px 2px rgba(0,0,0,.2), inset -2px -2px 3px rgba(255,255,255,.85);
-moz-border-radius: 5px;
border-radius: 5px;
background-color:rgba(224,224,224,.92);
}
I thought this would make the content div to be as wide as the browser window, and then resizing the .top div to fit inside of that while also having padding and margin (No idea how to explain that well enough), but it does not. Instead .top is just as wide as the screen, but because of the margin it extends to somewhere outside the window and then adds another margin causing it to have a horizontal scrolling bar, like this:
As you can see it should way more to the left, having a margin of 35 and the end of the page should be where the header ends.
I hope this is clear, I have never explained anything like this but I hope someone can help me out here, this is really bugging me.
If you disregard floats, position absolute and its ilk:
the width:100% refers to the closest enclosing box.
My guess would be that you have an element around your content that is not as wide as you think.
( planting *{border: 1px solid red} somewhere in your css for debugging never hurts ;) )
Your problem is that width specifies the inner container width, and that margin and padding are added on.
I don't understand why you're using position: absolute here.
Is this behaving as expected?
I got a problem rendering box-shadows over floating divs!
Ive tested in chrome and firefox with the same result.
<html>
<head>
</head>
<body>
<div style="float:left; clear: left; background-color: #aaa; -moz-box-shadow: 0px 8px 8px #000; width: 200px; height: 200px;">
</div>
<div style="float:left; clear: left; background-color: #aaa; -moz-box-shadow: 0px 8px 8px #000; width: 200px; height: 200px;">
</div>
</body>
</html>
Edit: The div on top doesn't render its shadow on the div below, is there any fix for this problem or do I have to try a different solution?
regards
/Joel
Works for me in Firefox 4, but that code will never work on chrome or safari, the -moz is a vendor tag indicating mozilla.
You need add all of the following
-moz-box-shadow: 0px 8px 8px #000; width: 200px;
-webkit-box-shadow: 0px 8px 8px #000; width: 200px;
box-shadow: 0px 8px 8px #000; width: 200px;
-webkit is the vendor tag for Chrome/Safari, the following will add in drop shadows for the vendors that support it and then when it's universally supported the last rule will cover all browsers.
Edit: To get the top div's dropshadow over the other element you must position:relative and then give it a z-index higher than the bottom one.
What's wrong with them? If you're worried about not seeing the bottom shadow of the top div it's because you need a little separation. If you're having trouble seeing the box-shadow it's because you need to use vendor-specific prefixes at this stage, like so.
Demo: jsfiddle.net/q5yf3
If you want them to be stuck together, just give the first div a z-index with position:relative and it will look how you want it to.
HTML:
<div class="bs up"></div>
<div class="bs"></div>
CSS:
div.bs {
float:left;
clear:left;
margin:1em;
width:200px;
height:200px;
background:#aaa;
box-shadow:0 8px 8px #000;
-moz-box-shadow:0 8px 8px #000;
-webkit-box-shadow:0 8px 8px #000;
}
div.up { z-index:10; position:relative; }
Demo: jsfiddle.net/VaVhy
That said, I'd also recommend looking into using rgba() instead of hex values for box-shadow color as it renders the shadow a lot more naturally on non flat-colored backgrounds.
looks fine in firefox because you are using -moz-box-shadow, for webkit browsers you will have to use -webkit-box-shadow
I'm not sure about this but is there a way I can simplify:
-moz-border-radius: 10px 0px 0px 10px / 10px 0px 0px 10px;
You can simplify the horizontal and vetical radii to a single declaration:
-moz-border-radius: 10px 0px 0px 10px;
However, you cannot simplify it further, as radii are only inherited diagonally. (bottom left will take top right's value if bottom left value does not exist).