I want to make top and bottom borders with repeated image of a triangle. But can't achieve this result. I get just one triangle.
How can I get the repeated triangle as in the pic?
my CSS:
border-style: solid;
border-width: 5px 5px 18px 20px;
border-image: url('../../img/triangle.png') 0 0 18 20 fill stretch;
You are using the shortcut "border-image" property. The stretch here corresponds to the border-image-repeat property. Set it to "repeat" instead of stretch.
Moreover, you are using the property "border-image-slice" in a wrong way. There is a good explanation here.
You can find more about the border-image property in general here.
I advise you to use the verbose version when using a property for the first time:
.banner{
width:600px;
height: 200px;
border-style: solid;
border-width: 20px 0px 20px 0px;
border-image-source: url('https://whatsarahread.com/wp-content/uploads/sites/113/2015/02/triangle-border.png');
border-image-slice: 100% 0%;
border-image-repeat: repeat;
}
<div class="banner"></div>
Use "repeat" instead of stretch as defined by Driblou.
border-image: url('../../img/triangle.png') 0 0 18 20 fill repeat;
Related
With respect to the following code, without the image, solid green border is OK, but with the image specs, all I see are the images in the 4 corners.
My code:
.content {
padding: 1em;
border: solid darkgreen;
border-width: 20px 20px; /* v, h */
border-image: url("White_House_pics/garland.gif");
webkit-border-image: url("White_House_pics/garland.gif");
border-image-repeat: repeat;
}
Again, without the image, solid green border is OK, but with the image specs, all I see are the images in the 4 corners.
?????
I really have looked around, but something obvious is escaping me.
I would like to have a dotted line below to a text :
The web designer have designed a custom dotted so i can’t use :
h2 {
border-bottom: 4px dashed #fff;
display:table;
}
because it is not conform.
What i’ve done : I’ve made an image with a dot and position it with css :
h2 {
padding-bottom: 20px;
display:table;
background-image: url('../images/tiret.png');
background-repeat: repeat-x;
background-position: center bottom;
}
It works very well but depending on the width of the text, the last dot could appear cut like you can see on this picture :
Do you have a suggestion on how to avoid this ?
You could try background-repeat:space
The image is repeated as much as possible without clipping. The first
and last images are pinned to either side of the element, and
whitespace is distributed evenly between the images. The
background-position property is ignored unless only one image can be
displayed without clipping. The only case where clipping happens using
space is when there isn't enough room to display one image.
You can use border-image:
h1 {
display: inline-block;
border-style: solid;
border-width: 0px 0px 12px;
-moz-border-image: url(http://yurigor.com/wp-content/images/goldstar.png) 0 0 286 round;
-webkit-border-image: url(http://yurigor.com/wp-content/images/goldstar.png) 0 0 286 round;
-o-border-image: url(http://yurigor.com/wp-content/images/goldstar.png) 0 0 286 round;
border-image: url(http://yurigor.com/wp-content/images/goldstar.png) 0 0 286 round;
}
<h1>Hello world</h1>
Codepen here
Also there is usefull online generator
How can I define background-image repeat with cap insets? I want the image to be repeated without border. Is it possible to repeat (tile) or stretch the middle in CSS?
The first (smaller) rounded rectangle is my PNG image. Red lines show cap insets I want to define. The latter (bigger) should be shown as result.
Check out the CSS3 border-image property. It's designed for this sort of thing.
.box {
border-image: url(my-image.gif) 20 20 20 20 repeat;
}
Interactive demo here.
It's supported on most non-IE browsers.
This looks like you could just solve this by using pure css3
.box {
background: white;
-moz-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
}
I'm styling a lightbox div with the following properties:
#lightbox {
border: 0.3em solid #acaeb0;
-webkit-border-radius: 1em;
background: #eee -webkit-gradient(linear, 0% 60%, 0% 100%, from(#eee), to(#ccc));
-webkit-box-shadow: 0 0 0.6em 0.3em #888;
}
Problem is that the resulting rounded corners looks very ugly (using safari5):
Problem is the white space at the rounded corner.
Do you know how I can avoid this behavior?
EDIT:
After adding the -webkit-background-clip: padding-box; property it looks better but not perfect:
I reduced the width of the border but it looks the same with thick borders. Do I have to set another property to make it perfect looking?
EDIT2:
Seems to be a Bug of webkit:
https://bugs.webkit.org/show_bug.cgi?id=21819
This is called "background bleeding".
For a possible fix, take a look at this site: http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed.
As it says, you should try setting:
-webkit-background-clip: padding-box;
The only hack which gave me satisfaction on a similar case was to wrap a box within another : one with the background, the second with the border, both with the same border-radius but the first one with a transparent border. And the code comes like this :
.fist-block {background: black; border-radius: 20px; border: 0px solid transparent;}
.second-block {border-radius:20px; border: 1px solid red;}
I get this problem in Chrome when using a 1px border however using 2px and above looks fine.
Chrome: 13.0.782.218 m
Hi I'm not too sure how to create the attached image effect where the right hand side is my main content and it shades onto my left sidebar which has a gradient effect downwards.
Check this out: CSS3 gradient Generator, pick the colors and generate the code, then add it to the body in your CSS (Or whatever element you want it on).
.body /*or element of your choice*/
-webkit-gradient(
{
linear,
left bottom,
left top,
color-stop(0.02, rgb(91,204,245)),
color-stop(0.76, rgb(5,37,70))
)
-moz-linear-gradient(
center bottom,
rgb(91,204,245) 2%,
rgb(5,37,70) 76%
)
}
For the shadow from your main content use:
.MyElement
{
box-shadow: 10px 10px 5px #888;
}
And also check out CSS3 Box-shadow.
Also, because not every browser supports the box-shadow yet (IE), you can use border images. But IE doesn't suppport that either so, what I did on a site was to just make a 1px high PNG image of the shadow and set it as the background to my wrapper div, repeated it down/up (can't remember if that's X or Y) and it worked fine :)
Hope some of that helps.
img.shady
{
display: inline-block;
webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
padding: 10px;
margin-bottom: 5px !important;
min-height: 240px;
width: 630px;
border: 1px solid #D7D7D7
}
Your sidebar should use a png image that has an opacity/transparency, then the shaded sidebar will work with gradient background. (Note, IE6 wont like this solution, so you have to find an IE6PNG hack solution which can be found almost everywhere nowadays)
For gradient background, either create a background image or use the css3 gradient