Guys I have been trying lots of different options from cutting up to building in html/css. nothing seems to really work :(
How would you guys go about doing this ?
Link:- http://www.flickr.com/photos/gavinwynne/6902590869/
The simplest way is to use a thick border and a inset box shadow. Browser support is somewhat limited, though. It basically comes down to IE9+ and modern browsers (ref).
demo
body {
min-height: 300px;
border: 24px solid #666;
box-shadow:inset 0px 0px 30px rgba(0,0,0,.5);
-webkit-box-shadow:inset 0px 0px 30px rgba(0,0,0,.5);
-moz-box-shadow:inset 0px 0px 30px rgba(0,0,0,.5);
padding: 35px;
}
One of the most common ways about doing it would be to cut the image in 3 pieces as shown in the below picture:
Where piece 1 would be shown first, then make piece 2 height equal to 1px and repeat it on the y axis through CSS and then put piece 3 at the bottom in order to "close" the container
Your html could be in the form of:
<div class="div_top"></div>
<div class="div_middle"> your content here </div>
<div class="div_bottom"></div>
Update
Css would be something similar to this :
.div_top {
background-image:url('top_bg.jpg');
background-repeat:no-repeat;
width:800px;
}
.div_middle {
background-image:url('middle_bg.jpg');
background-repeat:repeat-y;
width:800px;
}
.div_bottom {
background-image:url('bottom_bg.jpg');
background-repeat:no-repeat;
width:800px;
}
You'd probably want to set a fixed height for your top and bottom divs, since they have no content and wont actually expand to show the background image.
Related
Not quite sure how to get around this issue, have forms nicely marked up in a CSS sheet
#forms {
width:40%;
margin: 10px auto;
padding: 10px 30px;
background: rgba(144,144,143,0.6);
border: 1px solid #e1e1e1;
box-shadow: 0px 0px 8px #85857f;
}
My problem is the smaller forms, two input text box, are looking way too large for the content, anyone know of a method to give different widths to forms that don't involve hard coding inline CSS in the html?
Am quite baffled by this one.
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 6 years ago.
I am working on with 2 images styles and I'm having an annoying problem here, probably because I don't know much yet. What I'm trying to do is to get a second image on the first image to be like a sticker (if you see the jsFiddle on bottom you will understand more)
Problem is that from my default CSS I have on every image I upload on my blog to have a border:2px solid #fff (on the round). But I don't want this CSS to be applied on the second image i have in front of the first.
I am doing this by over-riding the default CSS with <style> tag on the post.
.post img {border: 0px solid #fff; //default : 2px solid;
-moz-box-shadow:none ; // default ....
-webkit-box-shadow:none ; // default ....
box-shadow:none } // default ....
body { background-color:black;
}
Also on the first image I add the style again like
style="clear: left; float: left; margin-bottom: 1em; border: 2px solid #fff!important;-moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);
-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);
box-shadow: 3px 3px 10px rgba(0, 0, 0, .8); margin-right: 1em;
This way the CSS is overwritten so no border or shadow is applied on any image, but the first image has the borders and shadows applied via its style. The second image gets nothing from CSS.
Problem is when I do this, there is a small gap from the image to bottom-border
and I cant figure out why.
Here is the link click
Just give the image
display:block;
see updated fiddle
it should now looks like
I see that you used the div tag to contain and control image properties and position. Remember that by default the div tag creates a small margin around itself so divisions floating or fixed on the same page and z-index will not collide. To fix this problem and allow div wrapped objects to snuggle up to each other use negative margins, usually for the top and left positions. Just a few pixels will do.
{
margin-left:-3px;
margin-top:-3px;
}
Try this on the extra image(s) you add, not the original, unless to need to trim its position as well. The -3px was just a guess. It could be as high as -10px or more. This code will move the images, so adjust the negative margin to taste.
You should remove your 1em margins from the bottom and right side of the first div before trying negative margins to make them extra close.
Ok, this is an interesting one.
I have a <h1> header that appears in a box (I mean an on-screen visible box, like border:solid 3px white). The box itself as well as the text inside needs to have a shadow. The box can't be a fixed width, as the text inside the box changes from page to page.
Here's the issue: I have it working perfectly except in IE9, where the shadow only appears on the box, not the text.
If I remove display:inline from the CSS, then it works right in IE9, but then the box is the width of the entire container, instead of wrapping just around the text. So I think the key to the solution is just finding a better way to center the text and the box inside of the container, so display:inline; can be dropped.
The markup is very simple:
<style>
.container {
width:500px;height:200px;padding:50px;background:#eee;
text-align:center;
}
h1 {
font-size:34px;
color:white;
padding:25px;
border:solid 3px white;
letter-spacing:7px;
display:inline;
box-shadow: 0 0 6px #666;
text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.8);
filter:glow(color=black, strength=1); /* IE9 stupid proprietary shadow */
}
</style>
<div class='container'>
<h1>Testing</h1>
</div>
And you can play with it here: http://jsfiddle.net/j434X/4/
Thank you.
I added a margin property in the h1. This makes it possible to get rid of display: inline; and still get the same result, but longer text skips to another line. Kind of like if you had a set width, which I know you didn't want. Here's the fiddle anyway, if it helps
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;
}
Using this css for shadows
-moz-box-shadow: 0 0 10px 5px #000;
-webkit-box-shadow: 0 0 10px 5px #000;
box-shadow: 0 0 10px 5px #000;
How do I remove shadow from top and bottom sides of the div and leave only horizontal shadow? Is that possible?
There are two ways to do this, but it depends on if you're looking for a hard edge or a soft edge.
Method One:
The trick here would be to wrap your box in a container and apply overflow:hidden to the container. If you give your box right and left margin that's the same as the shadow distance, the shadow will only be visible on the sides; it will be clipped on the top and bottom.
Here's an example:
http://jsfiddle.net/2Luef/1/
Method Two:
Alternatively, depending on the effect you're looking for, you could do something with multiple box-shadows like this:
http://jsfiddle.net/2Luef/3/
It doesn't have the clipping look like above, but it's arguably a nicer look. It also only uses one DOM element.
Yes and no.
The box shadow cannot be places on one side of an element unless you just offset it and/or change the spread, which I suspect isn't quite what you're after.
You can however place the element inside a container with the overflow set on it. The overflow property affects the box shadow. Here's an example.
You can use minus values for the spread value (last px value) to make the shadow not spread out to the other sides. However, that will only allow you to add the shadow to one side; so you can add multiple shadows, separated by a comma.
box-shadow: 10px 0 10px -10px #000, -10px 0 10px -10px #000;
For more information, checkout these two links:
How can I add a box-shadow on one side of an element?
http://starikovs.com/2011/11/09/css3-one-side-shadow/
Write like this:
CSS:
.parent{
height:200px;
margin:40px;
overflow:hidden;
}
.child{
width:200px;
height:200px;
background-color:#e0ffff;
-moz-box-shadow: 0 0 10px 5px #000;
-webkit-box-shadow: 0 0 10px 5px #000;
box-shadow: 0 0 10px 5px #000;
margin:0 20px;
}
HTML
<div class="parent">
<div class="child"></div>
</div>
check this http://jsfiddle.net/k9kVZ/2/