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
Related
Before flagging this as already asked, pls read the whole scenario. Thanks
SHORT VERSION :
Just to clearly state what i am trying to achieve, here's the page https://www.facebook.com/MercedesBenzPolska/ and I want to add border to the target element (on which i am hovering), whether it be <div> or <img> or <p>, without the shaking
DETAILED VERSION
Webpage in question: Any of Facebook's page.
Requirement: Moving a cursor over an element should add border to the target element [only on hover therefore temporary border not permanent]. Permanent border will be added ONLY if I click on that element. [Simply, if I hover over an element it will be highlighted with, say, pink border and only when i click on it, a green border would be added]
Initial problem: adding border on elements on hover would make the whole page's structure shaky, since I am constantly adding and removing the border. For that what I did was add a transparent 1 px border to all the elements of the page, and on hover just change the color of the border from transparent to pink; thus no shaky.
Present problem: The above solution was working for all the pages till I encountered Facebook's page. It turns out adding the initial 1 px border totally disrupts the structure i.e. the look and feel of the page. DIVs move from somewhere to somewhere else.
How do I now solve my original problem? Is there a way of, maybe like, applying a negative margin or border, so that adding the extra 1 px border does not dirupt the page's structure? I don't know I am just suggesting. Pls help
[SCREENSHOTS]
1. this is when the page loads [without applying the border]
2. Now when I hover over the div containing image ie adding 1 px border on hover, the divs move here and there
css I am using
* { border: 1px solid transparent !important;} //when page loads
.hover-selected{ border: 1px solid #e42a78 !important;} //on hover border
.option-selected:hover { border: 3px solid #529c56 !important;cursor: default;} //when option is selected
The images and the css both reflect towards the same problem, the default 1px transparent border disrupts the page's css and If I don't do that, the on hover border application becomes shaky and the page's css anyway gets disrupt
box-shadow: 0px 0px 0px 1px #000;
Use box shadow instead border. Box-shadow don't take up space.
div {
width:300px;
height:300px;
background: red;
}
div:hover {
box-shadow: 0px 0px 0px 1px #000 inset;
}
<div> Test </div>
outline is perfect for this. It works in a very similar way to border but does not effect layout at all.
div:hover {
outline: 1px solid orange;
}
<div>
Lorem ipsum sit amet.
</div>
<div>
<img src="https://placehold.it/200x100">
</div>
<div>
Lorem ipsum sit amet.
</div>
you can use box-sizing property in css. Try below code with and without box-sizing property
<div class="item">
</div>
.item {
box-sizing: border-box;
height: 50px;
width:50px;
background:red;
}
.item:hover{
border:1px solid black;
}
I would start from something like this and move from there:
*:hover:last-child:before {
display:block;
content:"";
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
border:2px solid red !important;
}
Using a pseudo-element instead of putting a border on the actual object might not create as many issues with the initial layout. Still not exactly what you asked for, but I believe it's at least a bit closer. :-)
EDIT
I believe that the only way to achieve this as good as possible would be to be less greedy when selecting elements in the CSS, and specify a list like so:
a:hover:before,
img:hover:before{
display:block !important;
content:"" !important;
position:absolute !important;
top:0 !important;
bottom:0 !important;
left:0 !important;
right:0 !important;
border:2px solid red !important;
}
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.
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;
}
Right now we have a web page with a bunch of link sections on one page. Each section has a header like so:
This header background is actually two images. The first is just a rectangle and the second has the slanted side on it. As I was looking at this solution, I was wondering if I could solve this with CSS instead of images. While I am not a CSS guru, I did look at a number of examples and was able to get something similar working. However, when I attempt to put text on top of the background, it ends up above the color instead of inside it. The CSS I have also has a fixed size, which is less than idea. I would rather specify a percentage of the available area and have it fill in the color.
Here is the code I've been working with:
<STYLE type="text/css">
.mini_banner
{
display:inline;
border-bottom:30px solid blue;
border-left:0px solid transparent;
border-right:30px solid transparent;
}
</STYLE>
I wanted to apply this to a cell in a table. I also don't want to break compatibility with modern browsers. My "customers" (mostly internal people) are going to be primarily on IE8 or later but I don't want to limit myself if I can help it.
So first, is this possible? Second, how would I accomplish this? And third, is there a way to make it relative in scale instead of fixed?
I would say that you'll have less headaches all the way around if you revert to using a single background image - in this case, a white image with the notch cut out (a PNG-24 with alpha transparency). Make it bigger than you think you need by about 200%, then do something like this:
.minibanner {
background: blue url(..images/notch.png) no-repeat middle right;
font-size: 1.5em;
}
The reason is that relying on border sizes may result in some whackiness across browsers, and it will definitely look weird if any element runs to two lines.
If you make the notch image 200-300% larger, but vertically align it in the middle of the background, and you do increase the font-size, the box will grow, but your white notch will grow right along with it.
UPDATE:
The only other way I can see pulling this off is to add a non-semantic element, such as a or something similar, after your text:
<div>
<p>Hello text</p>
<span></span>
</div>
Then in your CSS:
p {
background: blue;
color: white;
float: left;
padding: 0 20px;
height: 50px;
margin:0;
line-height: 50px;
}
span {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 0px solid transparent;
display: inline-block;
border-left: 50px solid blue;
}
See this JSFiddle.
The shape is based on this tutorial on CSS triangles. Now, I've only tried this on a webkit based browser, and it works. You will have to adjust the heights every time you want to change font size, so that is a drawback.
I made it work without an extra span: jsFiddle
.mini_banner
{
width:18em; height:1.5em;
color:white; font-weight:bold; padding-left:0.5em;
margin-bottom:.5em;
}
.mini_banner:before {
display:inline-block; content:''; overflow:hidden;
width:17em; height:0;
margin-bottom:-1.5em; margin-left:-.5em;
border-bottom:1.5em solid blue;
border-right:1.5em solid transparent;
}
Tested in FF, Safari, Opera and IE. (Works in IE8, but not in IE7)
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.