Can I produce something like this with a single image using css and html:
This is the single image
I have tried using border-image but it did not work out as expected. This is what I got with border-image:
My Code:
border: 40px solid transparent;
border-image-source: url(../images/mlt-border.png);
border-image-repeat: round;
border-image-slice: 10;
But I need the image to be repeated as in the first picture.
Yes, you can do it with one image, but that image needs to be divided into 9 sections, where the corners of the image correspond to the corners of the border, and similarly the edges of the image correspond to the edges of the border. In this case, you just need a 3x3 grid of the same image, like so:
Then you need to use the border-slice property to specify which parts of the image should be used for which parts of the border. The 47's and 40's correspond to the fact that each of the 9 cells of the image is 40px wide by 47px high.
.border {
width: 200px;
height: 235px;
border-style: solid;
border-top-width: 47px;
border-right-width: 40px;
border-bottom-width: 47px;
border-left-width: 40px;
border-image: url("https://i.stack.imgur.com/EGyqa.png") round;
border-image-width: 47px 40px;
border-image-slice: 47 40 47 40; /* measuring in px from top, right, bottom and left edges of the image respectively */
}
<div class="border"></div>
A full explanation of the border-image syntax can be found here.
Here there are two samples, round and stretch:
#borderimg-round {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(https://res.cloudinary.com/deltreetech/image/upload/v1565010696/mlt-border_ekrg5s.png) 20% round; /* Safari 3.1-5 */
-o-border-image: url(https://res.cloudinary.com/deltreetech/image/upload/v1565010696/mlt-border_ekrg5s.png) 20% round; /* Opera 11-12.1 */
border-image: url(https://res.cloudinary.com/deltreetech/image/upload/v1565010696/mlt-border_ekrg5s.png) 20% round;
}
#borderimg-stretch {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(https://res.cloudinary.com/deltreetech/image/upload/v1565010696/mlt-border_ekrg5s.png) 20% stretch;
-o-border-image: url(https://res.cloudinary.com/deltreetech/image/upload/v1565010696/mlt-border_ekrg5s.png) 20% stretch;
border-image: url(https://res.cloudinary.com/deltreetech/image/upload/v1565010696/mlt-border_ekrg5s.png) 20% stretch;
}
<!DOCTYPE html>
<html>
<body>
<p id="borderimg-round">border-image: url(image.png) 20% round;</p>
<p id="borderimg-stretch">border-image: url(image.png) 20% stretch;</p>
</body>
</html>
If you have problems, post here more details!
Related
I want to have this kind of output below. I seem cannot find any sources on how to do it. I only found this kind of code below but is not extending its color to other divs
.border-gradient {
border: 10px solid;
border-image-slice: 1;
border-width: 5px;
border-image-source: linear-gradient(to left, #743ad5, #d53a9d);
}
I have the following image which I am trying to set as an image border (I've added the red just so that you can see it properly — the real version is trimmed with transparent bg)
Dimensions: 363 x 10
I am trying to set it as a border image just for the top border (for the time being):
.panel {
background: #fff;
background: none;
border-radius: 0;
border-width: 10px;
border-style: solid;
border-image: url('../image/marker-white-01-reversed.png');
border-image-slice: 15%;
}
If I set border-image-slice: 15%; the general shape of the top border looks correct (I think), but it looks really blurry:
Can anyone see why this is? Originally I left border-image-slice out but the image was only showing in the corners... and played about with different values but none seemed to give me the correct result
.panel {
background: #fff;
background: none;
border-radius: 0;
border-width: 10px;
border-style: solid;
border-image: url('../image/marker-white-01-reversed.png');
border-image-slice: 15%;
}
Look at your code..
Radius 0 and image slice 15% and solid border..
That is you have to have such an image.
I'd like to simulate a drop shadow effect using border-image and linear-gradient (for scroll performance reasons, I am not using the native box-shadow effect).
As can be seen in the example below and in the fiddle, my attempted approach involves using border-image for the gradient, border-image-outset to move the shadow outside the content box, and border-width to show only the bottom edge.
Admittedly, I don't understand border-image so well, particularly when it comes to using it with linear-gradients. Through trial and error, I achieved what seemed to be a satisfactory result. But as it turns out, when the width of the div is short enough, the "shadow" disappears entirely.
What can I do to achieve a drop shadow like in the top box, but one that works regardless of the box size? Your help with this is really appreciated!
.box
{
/* the "shadow" */
border-image: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 10%, rgba(0,0,0,0) 100%) 100 repeat;
border-image-outset: 0px 0px 6px 0px;
border-width: 0px 0px 6px 0px;
border-style: solid;
/* other stuff */
font-family: sans-serif;
font-size: 20px;
color: #FEFEFE;
background: #007277;
margin: 10px 0px;
float: left;
clear: left;
padding: 50px;
}
<div class="box">
Here's longer text, where the "shadow" appears how I want it to.
</div>
<div class="box">
Short
</div>
For the short border to work you need to change the
100 repeat;
to
0 0 100 0 repeat;
.box
{
/* the "shadow" */
border-image: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 10%, rgba(0,0,0,0) 100%) 0 0 100 0 repeat;
border-image-outset: 0px 0px 6px 0px;
border-width: 0px 0px 6px 0px;
border-style: solid;
/* other stuff */
font-family: sans-serif;
font-size: 20px;
color: #FEFEFE;
background: #007277;
margin: 10px 0px;
float: left;
clear: left;
padding: 50px;
}
<div class="box">
Here's longer text, where the "shadow" appears how I want it to.
</div>
<div class="box">
Short
</div>
This link may help you a little on your border imaging https://css-tricks.com/understanding-border-image/
I would like to style the border image the same as in w3school example: http://www.w3schools.com/css/tryit.asp?filename=trycss3_border-image.
But when I tried it in my desktop, https://jsfiddle.net/tangjeen/6yLtmb98/ the result of the border image is not the same.
Would appreciate if you could help me. Thank you.
<div class="row" id="round">
<p>sdfsfsdf</p>
</div>
#round{
-webkit-border-image: url(http://www.w3.org/TR/css3-background/border.png) 30 30 round; /* Safari 3.1-5 */
-o-border-image: url(http://www.w3.org/TR/css3-background/border.png) 30 30 round; /* Opera 11-12.1 */
border-image: url(http://www.w3.org/TR/css3-background/border.png) 30 30 round;
background-color: lightyellow;
}
Make sure the border-width: 15px;/*your value*/ and border-style: solid; /*needed for Firefox*/ are set.
Or the shorthand way border: 15px solid transparent;. ALSO need to make sure it's set BEFORE border-image rule.
#round {
border-width: 15px;
border-style: solid;
border-image: url("https://i.imgur.com/BzbWBYA.png") 30 30 round;
background-color: lightyellow;
}
<div id="round">
<p>hello world!</p>
</div>
To resolve this problem you can also adjust the border-image-width and add a padding to your block:
#round{
-webkit-border-image: url(http://www.w3.org/TR/css3-background/border.png) 30 30 round; /* Safari 3.1-5 */
-o-border-image: url(http://www.w3.org/TR/css3-background/border.png) 30 30 round; /* Opera 11-12.1 */
border-image: url(http://www.w3.org/TR/css3-background/border.png) 30 30 round;
border-image-width: 15px;
padding: 5px 0px 5px 15px;
background-color: lightyellow;
}
I'd use this :
#round img{
border: imgpath;
}
EDIT
By the way, your code works... look : http://jsfiddle.net/5Lyw6qek/
I have an image that I want to use for border-bottom for .box class:
<div class="box">Hello World</div>
And the CSS:
.box {
background: #16a085;
width: 100px;
color: white;
padding: 100px;
text-align: center;
font-family: "monospace";
font-weight: bold;
font-size: 30px;
}
The result is:
How can I set an image as border, being repeated horizontally, on the bottom side? A margin between the green background and border line would be required also.
I tried:
/* border stuff */
border-image: url(http://i.imgur.com/CRWpl2d.png);
border-image-repeat: repeat;
An alternative without using images would be:
border-bottom: 3px dotted #367dd2;
padding-bottom: 4px;
...but I want to use an image for border instead.
JSFDIDLE
You can set border using background property from the bottom side like this:
background: #16a085 url('http://i.imgur.com/CRWpl2d.png') bottom center repeat-x;
But if you want to use margin between background and border maybe this fiddle is useful for you: http://jsfiddle.net/nikoloza/CfT2c/
Maybe your vendor prefixes could be the issue, as well as specifying your border styles as you would normally. Let me know if this helps!
border: 15px solid transparent;
-webkit-border-image: url(http://placehold.it/350x150) 30 30 round; /* Safari */
-o-border-image: url(http://placehold.it/350x150) 30 30 round; /* Opera */
border-image: url(http://placehold.it/350x150) 30 30 round;
You can below css3 border-image property
-webkit-border-image:url(imageURL) 30 30 round; /* for Safari browsers*/
-o-border-image:url(imageURL) 30 30 round; /* for opera browsers*/
border-image:url(imageURL) 30 30 round;
IE 8,9 might not support border-image property, by you can achieve it by css3pie. Please refer http://css3pie.com/documentation/supported-css3-features/