Add Boarder Image with airSlate SignNow

Add boarder image

next I want to talk about using boarder images so in CSS we can define what images we want to use to create the borders instead of defining a solid style a dotted or a dashed style with a certain color we can actually use images so I've borrowed from the Mozilla developer Network site one of the images that they're using in their demonstrations because it's just a really good image for this purpose we have a 90 by 90 pixel image here each one of these diamonds is 90 PS 30 pixels across and 30 pixels tall and we're gonna be using this and cutting it up and then using it for the borders and also for the background fill on a bunch of paragraphs so you can see here I've got a bunch of different versions of it and we're gonna go through all of these so what are the properties that we have with border image there is of course the border image property which is the shorthand for all of these other properties so in order this would be the order that you would write all the values if you were using the shorthand the first one is border image source so as you would expect you have an option for URL will you say this is the image that I want to load so I'm gonna be using this one for my URL but we can also use linear gradient for a single gradient or repeating linear gradient if you wanted a pattern within that border space the next property border image slice with this one word slicing pieces off of this image we can provide one value and then it's used for all four sides or we can use for different values or two values or three values just like you would for padding margin and border now slice we're saying if I said 30 would mean that I'm going to take the top 30 pixels here and this is what I'm going to use in my border is the top 30 pixels and then I can do same thing for the right same thing for the bottom same thing from the left so it's measuring in 30 pixels from that side that's how much of this image I want to use next is the image width and that is okay I've taken a piece of this that I'm gonna use here how big do I want to display it so maybe I take 30 pixels so I get a full diamond but I want to display it as 40 pixels large so let's come into that first one right here and see if we change that so I have my boarder image source pointing to this image my slice is 30 so I've got the top 30 the right 30 at the bottom 30 the left 30 the repeat I'll come back to in a minute I would said I'll come back to in a minute but I want to add in here the border image width that's the one property we didn't have here so for this I'm gonna say 60 pixels there you can see I took the 30 pixels off the top and I expanded it to fill this amount of space now this property is different than border width border width basically you're creating a space and on top of that space you're going to be putting this image so I had 30 pixels here where I could display the image but I created an image that was 60 pixels tall so I've taken that 30 plus I've cut into my padding we have the image out set this is if you imagine a single line that goes all the way around the paragraph here and that's where a 1 pixel border would go the outset means how far outside of that area do I want to make this thing fit so if I said 60 pixels there we go I'm taking where that border image is and I'm pushing it out by 60 pixels from where that 1 pixel line would be if I do 30 pixels it's gonna be half that distance 10 bring it in even closer and then 0 I'm back into here and I had one pixel or sorry one REM 30 pixels worth of padding on the top bottom left and right and you can see that I'm cutting into that 30 pixels right here my 60 cuts into that alright so that's out set moving this around with is how big I want to make this how thick I want to make this image border slice is how much I take from this image source the image that we're loading and then one of the thing with slice is that we can come in here and we can say fill we can add the fill property so that it takes the inner part of the image beyond whatever the slices and it tiles that in behind here as well now image repeat we have a bunch of different values the default stretch if I spell it correctly there we go stretch we'll take that top 30 the right the bottom all those 30 and then it stretches the in-between spaces so in this middle in this middle in this middle in this middle and then underneath all the content it's going to stretch as little of that as it can across the rest of that space repeat will keep whatever size I've defined which is my 60 pixels and it will tile at that size but I do end up with things like this if I don't have something that's measured exactly I will end up cutting into my pattern so to solve that problem there's two possible values round and space round will scale these little pieces that are being tiled so that they fit perfectly and space will create spaces or little gaps between them so let's take a look at that if we change this to round there now it's perfectly fitting in there because it's been scaled and spaced there we go it kept it at its original size and just scaled it as closely as possible to its original size so that it would fit inside of there now the other ones that I've got here just some other variations this second one I'm doing the same sort of thing I did for the first but I'm using the shorthand property border image we've got the image first then the slice and I have said fill the fill goes with the slice now I've got two slashes here two forward slashes since these three values in the middle slice with an outset those are all numeric values the browser's not going to know what you meant like if I didn't put all five properties if I put the source at the beginning I put the repeat at the end and then I had one number which of these numbers is it going to be so in order to know that it assumes that if you only put one it's going to be slice beyond that we have to start putting these forward slashes between them this is my slice this is my width and this is my outset so that's the order that these will be interpreted as okay so the next one here just same sort of thing I'm doing the repeats so you can see that it doesn't quite tile properly the next one here that's with the stretch and showing you different numbers of values for the slice property 30 is going to be my top value so I took 30 pixels of my original image I took the top 30 pixels that's this pit at the top those three diamonds and with 30 I'm scaling it to whatever size I want I can make this 60 I can make it 80 I can make it whatever but of the original image I'm taking 30 pixels then on the right hand side I'm taking 10 pixels measured in from the right hand side I'm taking 10 of the 30 same thing on this side 10 of the 30 so that's my two tens here and then on the bottom I'm taking 20 so this is you can see it's about 2/3 of that diamond at the bottom and that's how those four numbers work top right bottom left how far you're measuring in from each of the sides of the image to get this effect we can still do things like change what we're doing here but you can get some very strange effects if you mess around with this a little bit there's repeat so when you start changing the numbers and playing with the other properties you can get some sometimes very interesting effects sometimes very ugly effects I encourage you to play around with this I'm gonna take all this code and leave it as a code just in the description for the video so you can download that you can play with all these properties and experiment with them that's really the best way to become familiar with this and understand how it works all right number six that's this one with the tiny little diamonds so I border width I've got 10 pixels that's how much space that I provided here for the border and my image slice 30 so I took the thirty all the way around and then use space so there's little gaps in between here border image width I could add that there we go so border width 10 if I don't specify border image width it will match this so it's going to be the same value as this this is how much space was left for the image to be displayed but I'm exceeding that by setting border image width to 60 I'm going outside of that little 10 pixel space that I had now the last one here here's an example using linear gradient I'm going to stretch it I'm going from gold to black that's my full thing from here to here that's all I'm doing alternatively if you want to play around with this here's a repeating gradient at a 45 degree angle I'm going from gold at the beginning 10 pixels in it's block and then from black to gold it's gonna take the next 10 60 pixels so it's just this repeating pattern right here alright so I hope that helps you out that gives you enough to get started with these and as I said experiment experiment experiment that's the best way to get really get comfortable with all this if you have any questions feel free to leave them in the comments down below and as always thanks for watching you