I need a bit of help applying a drop shadow image to a range of DIV elements. The elements in question already have a background image so I am wrapping another DIV around them. Things get complicated further because I'm also using the 960gs CSS framework.
This is my current HTML for a content box type display:
<div class="grid_12 boxout-shadow-920">
<div class="boxout">
<p>The personal site and blog of CJD. The site is still a work-in-progress but please do have a look around and let me know what you think! </p>
</div>
</div>
Boxout CSS:
.boxout {
background:url("../images/overlay.png") repeat-x scroll 0 0 #EEEEEE;
-moz-border-radius:4px 4px 4px 4px;
border:1px solid #DDDDDD;
margin-bottom:15px;
padding:5px;
}
boxout-shadow-920 CSS:
.boxout-shadow-920 {
background:url("../images/box-shadow-920.png") no-repeat scroll 50% 101% transparent;
}
Now this works to a degree. The boxshadow image shows at the bottom of the content box which is what I would like. However as I'm using a fixed percentage of 101%, if the content box height is too small, not much of the drop shadow image gets shown, and if the content box is too big, whitespace starts to appear between the box and the shadow image.
So anyway, what I'm looking for is a cross-browser CSS based solution for doing this properly.
I'm sure there is an easy answer to this - any help is appreciated!
With the new CSS3 specification we got the property box-shadow that is already supported by Mozilla browsers (through -moz-box-shadow) and Webkit browsers (through -webkit-box-shadow). Since 10.5 pre-alpha also Opera supports this property, too.
So as far as you can accept to display no shadow for Internet Explorer you could stick to this property. The idea behind it is much cleaner because there is no layout specific HTML markup needed.
See here for more information on browser compatibility: http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows
For greatest support through most of the browser engines you should use the following three statements:
box-shadow: 3px 3px 5px #000;
-moz-box-shadow: 3px 3px 5px #000;
-webkit-box-shadow: 3px 3px 5px #000;
Same technique as rounded corners.
Check out this website for various CSS3 effects, including box shadow (what you're looking for): http://css3please.com/
I'd use the CSS3 box-shadow property, with that IE blur filter on div as a fallback for legacy browsers.
Related
I am trying to create a button with 3 layers of border around it with the middle layer showing the background of the containing div. Examples are worth a thousand words so here you go
http://jsfiddle.net/e5Sxt/2/
html
<div id="content">
<p>Generic Content</p>
<button class="button">Search</button>
</div>
css
#content{
width: 500px;
height: 500px;
background-color: black;
padding: 50px;
color: white;
}
button{
margin-top: 50px;
padding: 20px;
text-align: center;
background-color: #333;
box-shadow: 0 0 0 5px #666, 0 0 0 10px red, 0 0 0 15px #bbb;
border: none;
cursor: pointer;
}
The red box-shadow is where the black of the containing div should come through. If the box-shadow is set to transparent for this layer, the box-shadow under it shows through instead.
I have tried utilizing outlines, borders, and box-shadows to no avail so far. As of right now, I think I will have to wrap the button in another div with the outer border and a padding to show the background, but wanted to see if anyone could do this without adding another html element.
Thanks!
The answer depends on what browsers you need to support (and whether you'd be happy with a fall-back solution for older browsers).
There is a CSS feature called border-image, which, frankly, can do pretty much anything you could think of for a border. You could achieve this effect very easily using this style.
With border-image, you could simply specify a small image with your two colours and transparent middle section. Job done.
Learn more about border image here: http://css-tricks.com/understanding-border-image/
However... there is a big down-side: browser support. border-image is a relatively new addition to the CSS spec. Firefox and Chrome users should be okay, but IE users miss out -- this feature didn't even make it into IE10.
Full browser support details can be found here: http://caniuse.com/#search=border-image
If poor browser support for border-image is enough to kill that idea for you, then another viable answer would be to use :before or :after CSS selectors to create an pseudo-element sitting behind the main element. This would have a transparent background and be sized slightly larger than the main element and with it's own border. This will give the appearance of the triple border you're looking for.
Of course, you can only use this solution if you aren't already using :before and :after for something else.
Hope that gives you some ideas.
I think the only way to do this is by using a wrapper unfortunately. I'm not sure if it is possible to get the transparency through the button background.
Although, if you know the background color, you can use that in the border obviously, but of course this won't work for background gradients.
Here is a proposed jsFiddle showing knowing the color, and another using a wrapper:
http://jsfiddle.net/eD6xy/
HTML:
<div class="box one-div">(1 div, know color)</div>
<div class="two-div">
<div class="box">(2 divs, pure transparent)</div>
</div>
CSS:
/*
With one div, works fine with a constant color (#abc)
But with gradient, probably won't match up correctly
*/
.one-div {
margin: 15px 10px;
border: 5px solid blue;
box-shadow: 0 0 0 5px #abc,
0 0 0 10px red;
}
.two-div {
margin-top: 30px;
padding: 5px;
border: 5px solid red;
}
.two-div > .box {
border: 5px solid blue;
}
i'm creating a new website and im looking to recreate the curved corner of the SAVE 25% banner. http://www.sonycreativesoftware.com/
Does anyone know how i would do this with css or html?
Cheers
Use the image as a background-image, and apply border-radius on the element
div
{
background-image:url('http://placehold.it/350x150');
width:350px;height:150px;
border-radius:5px;
}
http://jsfiddle.net/mdNCm/1/
You can use border-radius.com to generate cross-browser CSS
Yes, by using border-radius.
CSS:
div.rounded{
border-radius: 5px;
border: 1px solid black;
}
HTML:
<div class="rounded">This text is in a rounded border!</div>
This is a css3 feature and not yet fully supported of all browsers. Read further about this tag:
border-radius: 25px;
You can achieve this with
border-radius: 5px;
If you want a cornered border please use this.
Border-radius.com
Which gives you the code.
Note: border-radius don't work with some browsers such as ie
Alternatively you can use some image as background in css.
Here's an example: http://jsfiddle.net/JPQxX/
I tried this in Chrome and FF. In both browsers there's a 1-2px margin between the two inputs. I want to make the two elements touch without explicitly shifting the submit button to the left. Margin is already set to 0px;
Reset the border style and it should work http://jsfiddle.net/JPQxX/1/
input { border: 1px solid grey; }
The elements do touch, without a margin. If you inspect the submit button element in Firebug, you’ll see that it has no margin but a border that is 3px wide. What seems to be a small margin is part of the border. If you take a screen capture and magnify, you can see that the border has a 1px wide gray part with 1px wide transparent parts on each side of it, except at the rounded corners.
The default border is drawn by built-in routines in browsers, and modern browsers tend to use this kind of routines. If you set border properties for the button in CSS, browsers tend to switch to normal border drawing, so the button stops looking like a normal button and takes whatever shape you set. I don’t think you can completely simulate the default border appearance (getting rid just of the transparent part that causes the margin-like phenomenon), but the following might take you sufficiently close (on supporting browsers):
input[type="submit"] {
border: solid gray 1px;
border-radius: 4px;
background: #ddd;
}
Demo: http://jsfiddle.net/m2CSy/
So lets just say i got it all to work on IE since its always IE that gives the problems. But now the dropdown menu appears behind the content on other browsers like firefox and chrome. All i did was remove the z-index in the #head div.
Website: http://www.stingrayimages.ca/
With Z-index: it breaks in IE
Without it it fails in other browsers.
Anyway to fix the dropdown menu without adding z-index to the head div?
#head {
position:relative;
height: 140px;
width: 100%;
background: #FFF;
filter:alpha(opacity=93);
padding-top:20px;
/* CSS3 standard */
opacity:0.93;
-moz-box-shadow: 0 0 5px black;
-webkit-box-shadow: 0 0 5px black;
box-shadow: 0 0 5px black;
}
You need to lessen the opacity. The drop down is washing out when it is displayed over the images and that is making it look like it is behind the pictures.
Also, IE9 shows the same problem as Chrome and FireFox 4.
Use z-index, just apply a higher z-index to the drop down elements that sit on top, or you could apply - z-index values to all content behind, either way works.
One thing you can do is put the z-index back and look up the IE fix for it.
Another thing to consider is the rendering order and tree structure of your html, as that influences what sits on top. http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/ this article explains it far better than I can.
If you are able to link an example of the site you're working on, it might make it easier for us to give a more specific answer.
I'm running into an issue where the border of an outer div with rounded-corners is getting cut-off by an inner element with a CSS3 gradiet. Is this a bug with CSS3 - if so, I'll happily submit a bug-report.
If not, how do I fix this?
Source & Demo here:
http://jsfiddle.net/joshuamcginnis/2aJ8X/
Screenshot:
The problem isn't the gradient - give your <h2> element a solid background to see. Instead, you need to round the corners of the <h2> as well as of the wrapping <div>.
Add border-radius: 10px 10px 0 0; and the appropriate vendor-specific versions to the <h2> styling and it all works.
overflow:hidden; does not work
but this does:
h2
{
position:relative;
z-index:-1;
....
}
It's not specific to background gradients. It's just the background of the h2 element overlapping sitting on top of the rounded corners. I'm not sure it's a bug in the strictest sense, but it is fairly well known. Easiest 'fix' is rounding the corners of the element with the background. Example: just setup for chrome