I am trying to use the attached image as border of the div but failed.
My code is
<div class="menu-box-wrapper">
</div>
CSS
.menu-box-wrapper{
border-image:url(../images/about-text-bg-box.png) 30 repeat stretch;
height:100px;
width:100px;
}
Demo : http://jsfiddle.net/squidraj/gunj1nxj/1/
I got it to work:
.menu-box-wrapper{
border: 20px solid transparent;
border-image: url(http://s30.postimg.org/w2z6ws0h9/about_text_bg_box.png?noCache=1431183351) 7 repeat stretch;
padding: 15px;
height:200px;
width:400px;
background:#000;
}
h1{
color:#fff;
}
https://jsfiddle.net/Danthejsman/gunj1nxj/4/
Apparently It will only stretch if you do 7 or under, which is half of the image. Of course, I don't know for sure. Change the border width for a bigger image
Instead of using 'repeat' in your css, alter your border-image-slice value in you css code. Not sure what your desired outcome is, but if you alter your code as shown below and play with the values, you should be able to achieve what you are after. Your current code only places the border images at each corner.
.menu-box-wrapper{
border: 5px solid transparent;
border-image:url(../images/about-text-bg-box.png) 30% stretch;
background:#ccc;
}
Related
I saw some time ago how to set up a border around a block using :: before. Please help me set up a similar frame as in the example picture
Border example
Border example
Actually, you don't need to use ::before. You can just use the border property. It works like this:
You can change the style of the border with this property: border-style:
You can change the width with this property: border-width:
You can change the width with this property: border-color:
To make the border in the example, use the following code:
CSS:
#example-element {
padding: 40px;
border-width: 5px;
border-style: solid;
border-color: green;
}
HTML Body:
<p id = "example-element">Lalala<br>Booom!!<br>I love to code!
Hello world! HTML and CSS are the best!</p>
Hope this helps :D
These properties are most useful given the circumstance. I would set border on el and background-image on :before.
el,el:before{
// subtractive size
box-sizing:border-box;
}
el{
// contain child
position:relative;
}
el:before{
// fill space
position:absolute;
display:block;
top:0;left:0;width:100%;height:100%;
// ignore clicks
pointer-events:none
// styles
z-index:2;
border:0.05em solid red;
box-shadow: inset 0 0 .05em red;
}
I am pretty new to CSS borders, and i have run into some issues i don't seem to be able to fix. As im new to this, and there is propably many other wondering the same thing (of css newbies). I have this border that should work fine, according to my thinking (might be full of wrong-ish logic). The code i use for the hover and default state is:
.profile-box .opener {
float:left;
background: url(http://seek4fitness.net/Design/Gfx/DropDowns/white.on.red/icn_small_black_arrow_down.gif) no-repeat;
background-position: center center;
background-color: #fff;
width:32px;
height:38px;
overflow:hidden;
text-indent:-9999px;
border-left:1px solid #dde2e8;
}
.profile-box .opener:hover {
float:left;
background: url(http://seek4fitness.net/Design/Gfx/DropDowns/white.on.red/icn_small_black_arrow_down.gif) no-repeat;
background-position: center center;
background-color: #F0F0F0;
width:32px;
height:38px;
overflow:hidden;
text-indent:-9999px;
border-left:1px solid #dde2e8;
}
The issue do not appear to me in any way, and im as said twice, new to css. Please help me with this. It will mean a lot to me. Thanks.
FIDDLE: http://jsfiddle.net/dCe3u/
If you want to apply border to all the four sides you should change
border-left:1px solid #dde2e8;
to
border:1px solid #dde2e8;
FIDDLE HERE
border-left will apply border only to the left side, You can refer more on border here CSS BORDER >>
I just checked your code. I literally copy and paste your code and the border does appear, I think the problem is the color of the border is too light (if you use white background). See the demo http://codepen.io/ImBobby/pen/yicCz. In that demo I intentionally change the border color to red.
I also notice that you declared same style on hover state of .opener element except for the background-color. You might want to change your code into this:
.opener {
float: left;
background: url(http://seek4fitness.net/Design/Gfx/DropDowns/white.on.red/icn_small_black_arrow_down.gif) no-repeat;
background-position: center center;
background-color: #fff;
...
}
.opener:hover {
background-color: #F0F0F0;
}
short explanation, .opener:hover will inherit styles from opener.
Please excuse if this is a fairly basic question. I've trawled through Google and elsewhere, and haven't found a solution that works for me.
I am generating an image gallery with the following markup.
<div class="gallery">
<a class="galleryimg">
<img>
</a>
....
</div>
The .galleryimg is repeated, based on the number of images in the gallery. It is alse floated left.
I want to create a :hover effect that outlines the selected image. I've tried using border (messes up the layout), outline (which sounds perfect in principle), and inset box shadow (which is rendered below the image).
Outline is very close to what I want to achieve. But the right and bottom outline is obscured by adjacent images floating above it.
So my question: how can I create an on hover border/outline effect on a gallery of linked images?
I'd really appreciate any ideas as to how others have tackled this. Thanks!!
EDIT
The images are abutting, with no white space between.
HI you can used simply used css Tricks as like this
css
#example-one a img, #example-one a { border: none; overflow: hidden; float: left; }
#example-one a:hover { border: 3px solid black; }
#example-one a img{width:100px;height:50px;}
#example-one a:hover img { margin: -3px;}
Live demo http://jsfiddle.net/rohitazad/QkT7d/3/
more about this click here http://css-tricks.com/examples/InnerBorderImages/#
Check this out:
http://jsfiddle.net/hMNZE/
Might be the desired effect. You will experience slight changes to the image as it makes itself smaller to allow for the border. but do let me know. This is only a quick fix.
---EDIT---
http://jsfiddle.net/hMNZE/2/
is a second version using negative margin, this looks okay but the images overlap a little.
Check out link: http://css-tricks.com/examples/InnerBorderImages/
---EDIT2---
http://jsfiddle.net/hMNZE/3/ is the best
---EDIT3---
.gallery {
width:100%;
height:100%;
padding:10px;
}
.galleryimg {
float:left
}
.galleryimg img {
z-index:-10;
}
.galleryimg img:hover {
margin:-2px;
border:2px solid blue;
z-index:9999;
}
if you use box-sizing property (supported since IE8) you could add the border on :hover without messing up the layout
.galleryimg {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width : 100px;
float : left;
}
.galleryimg:hover {
border : 3px gray solid;
}
see http://paulirish.com/2012/box-sizing-border-box-ftw/ for more info on this property
http://jsfiddle.net/Vvr7C/
The trick is to add the padding on .gallery so you'll see the outline also on the images that are on the edge od the gallery:
.gallery {padding:2px}
.galleryimg:hover img {outline: red solid 2px}
If you are using box-shadow & it's come below the other image then write like this:
.gallery img:hover{
padding:0;
box-shaow:0 0 0 2px red;
z-index:1;
}
.gallery img{position:relative;}
If your question was answered above, great. If not, it sounds like you might need some margin between the images and other objects around. You said it was obscured. It might just need 2px or so worth of margin to unobscure it.
hi you can do this thing easily via CSS3 *box-shadow* property:-
box-shadow: inset 0px 0px 0px 3px rgba(000,000,000,0.9);
see the demo for better understanding :- http://jsbin.com/upedel/5/edit
UPDATED ANWSER
Please see the updated demo:- http://jsbin.com/upedel/10/edit
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)
I'm maintaining the Perl Beginners' Site and used a modified template from Open Source Web Designs. Now, the problem is that I still have an undesired artifact: a gray line on the left side of the main frame, to the left of the navigation menu. Here's an image highlighting the undesired effect.
How can I fix the CSS to remedy this problem?
It's the background-image on the body showing through. Quick fix (edit style.css or add elsewhere):
#page-container
{
background-color: white;
}
That is an image. (see it here: http://perl-begin.org/images/background.gif) It's set in the BODY class of your stylesheet.
The grey line is supposed to be there. The reason why it looks odd is because the very top is hidden by the buffer element. Remove the background-color rule from this ruleset:
.buffer {
float: left; width: 160px; height: 20px; margin: 0px; padding: 0px; background-color: rgb(255,255,255);
}
I think it's this:
#page-container {
border-left: solid 1px rgb(150,150,150); border-right: solid 1px rgb(150,150,150);
}
However, I'm not seeing why the right border isn't showing up....
I found the problem.
The problem is that you need to set a white background on #page-container. As things stand, it has a transparent background, so the 5pt left margin on navbar-sidebanner is revealing the bg of the page_container ... so change that bg and you're cool.
I would do a quick fix on this to add the style:
border-left:2px solid #BDBDBD;
to the .buffer class
.buffer {style.css (line 328)
background-color:#FFFFFF;
border-left:2px solid #BDBDBD; /* Grey border */
float:left;
height:20px;
margin:0px;
padding:0px;
width:160px;
}
Thanks to all the people who answered. The problem was indeed the transparency of the #page-container and the background image of the body. I fixed them both in the stylesheet.