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).
Related
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;
As shown above, can I give a radius to the top parts only and not to bottom or sometimes to bottom not to top?
And is there any idea to give border radius to one corner only?
Like border-radius:top-left top-right bottom-right bottom-left,
div{
width: 100px;
height: 30px;
background: black;
border-radius: 8px 8px 0 0
}
DEMO
Either use border-radius, such as:
border-radius: 5px 5px 5px 5px;
Or, for the top left border, you can be more specific with:
border-top-left-radius: 5px;
Here's the CSS for the rounded corners only on a div with a class of box:
.box {
border-radius: 5px 5px 0px 0px;
}
You may also find this helpful: http://css3generator.com/
Edit: Apparently you don't need the webkit prefix anymore!
For an element with 100% width and box-shadow defined such that it appears on the bottom only, how can I make the shadow appear consistent along the entire width of the element?
Currently, the shadow fades out at both the left and right edges; the shadow is noticeably different there than at the middle. Example:
<style>
body { padding: 0; margin: 0; }
h1 { margin: 0; box-shadow: 0 10px 10px #009;}
</style>
<h1>Bacon</h1>
Or see http://jsfiddle.net/RxVbt/1/.
Add a spread distance to counter the blur value. For a blur of 10px you need a spread of 5px (5px in each direction = 10px) For example:
h1 { margin: 0; box-shadow: 0 5px 10px 5px #009;}
See http://jsfiddle.net/RxVbt/9/
I did this by changing the h1 to include
margin-left: -10px; margin-right: -10px; padding-left: 10px; padding-right: 10px;
The negative margin pulls the shadow wide enough to appear the same all the way across. This is a bit crude and hackish, but it works.
try this:
h1 { margin: 0; box-shadow: 0px 10px #009;}
Add negative values for the end caps.
box-shadow: -5px -5px 10px 10px #009;
fiddle here
try this:
h1 { margin: 0; box-shadow: 0 2px 10px 8px #009;}
Example here
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 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/