Save Boarder Image with airSlate SignNow

Save boarder image

in this exercise we're going to demonstrate how to work with the border image property introduced in css3 since it is css3 authors should view it as an experimental feature for now now I made just a very simple border frame for this experiment but yours can be as fancy as you like and let's take a look at the finished product before we get into the code so you can see as I resize my window or no matter what the users screen sizes the border can be any width or height and still maintain its nice appearance because what actually happens is the image gets sliced up into nine parts and that's what allows it to be any size or scale and just so you can see it before we begin this is my frame dot PNG image sitting on my desktop and here's a preview of it this is the actual size okay our example HTML file just has two ordinarily styled divs and I gave them an a red outline it's a red dashed outline that way we can see the outline of the divs as we're working so let's see what that renders now each one I just put a style inline attribute to give them a height but in a real-world situation the content within them would determine their height so this really doesn't even have to be there and before we apply the boarder image I want to take you into my graphics editing software and show you something real quick so I'm going to zoom in on the image that is my frame and let me just pull out a shape and I'm going to draw the shape in at the corner and I want to grab the whole corner of my design of my frame so you can see I have a width of 28 and the height of 28 so if I bring the opacity down you can see that the number that I'm going to have to target for the width of my frame is 28 pixels or 28 all right so what's going to happen when we apply the code is this image is going to get sliced up into nine sections now this is one section this is going to be another section each corner is a section so you have one two three four and then five six seven eight nine so this image is sliced up into nine sections when we apply the code that we're about to apply so let me remove these and get back to the normal image now to make the magic happen for our containers let's just go into our style rule and we're going to set a border of twenty eight pixels remember that number 28 we're going to set that as the border width and under that let's apply the border image property now the border image property is shorthand that authors can use to specify all of these properties all at once in a single line so in one single declaration you can assign the values for all of these properties and we'll take a look at those properties in just a moment alright let's get rid of this and let's see what we have now okay so now you can see exactly what's going on all right now let's take this border down to maybe five pixels refresh you see what's happening it's scaling the border 15 pixels and it won't be its actual size until I get up to 28 because that is the actual width of that the border frame or the frame border so when I go to 28 it's the actual size of my graphics now what if I reduce this number down to 15 down to 7 so you see what's happening so if I go up instead of 28 let's go 36 it should all be smaller all right let's get that back on 28 now we can remove our outline but you might want to keep the outline in place while you're experimenting now we'll quickly show you how to change this back to the longhand version of the properties that way if you ever want to fine tune anything in specific by itself first we have the border image source property and that's just the URL so we can get rid of these two parameters because this only accepts the one parameter or the one value now I add the border image slice and border image repeat there's also a border image width property and a border image outset property I'll show you all the properties at the end of the video and I'll lead you to pages where the they're all referenced so let's see what we get we should get the same exact rendering and we do so this is the you can call it the longhand approach to the shorthand version that you saw just a moment ago but shorthand is so much easier now let's go under the border image repeat and let's put in the border image with property I'm going to set that to 28 and then remove the border property that I had up top let's see what we get so you can see we get a similar rendering but our content will have to add more padding and stuff like that in order for our content to be within the little frame so that's why I just chose to have the border property as well let's see what we get we have the border and border image width now let's change this to something like 10 and see how that alters the appearance of everything alright let's leave it back on 28 now we're going to take a look at border and this is the last border image property order image outset so you can specify a number here or a pixel length so I'm just going to put the 28 pixels now it's going to move the whole thing outside of the element it's going to set the frame outside of the element so let's refresh so you see how the frame has moved outside its outset now let's change that number just to maybe 5 and you'll see that the outline is now inside of that frame and it'll keep being pushed outside the amount that you set it here and this can also be a number like if I put that on 5 and render you'll see it's a totally different effect it's huge because this number is relative if you don't put the pixel on it it's relative but I don't want any outside so I'll just leave this on 0 pixels now the last thing we have to talk about is repeat because the rest of these are just no that you can alter this is the only one that really takes key words that you might want to understand okay here we are at the dock for border image repeat property now let's take a look at the values we can stretch repeat round or space the repeat effect so these are the key words that we can use in place where I have repeat we can change that for stretch round or space and don't worry I'm going to lead you to all of these docks for all these properties and the links under the video all of the properties we were working with will be linked so you can get to them now I'll actually have to change the graphics for you guys to see the effect of the repeat alteration so I'll just put a little dot and I'll make it Orange and I'll put it right dere and I'll also put one on the other side right there I'll bring them down a little bit actually I'll just put them in the center as best I can now I'm going to save this then go back to my code and render this and now you can see I have little dots repeating to there now let's change this to stretch render it now the little dot gets stretched according to how tall this slice becomes so repeat might be an effect that you want instead of stretch but sometimes you might want to use stretch now all we have left is round keyword so let's see what that renders it's going to repeat them evenly then space okay so that's really all of the options now remember your lengths like the pixel lengths these can be different units like e/m you're gonna have a.m. or you don't even have to have a unit it could just be a number or percentages these slices could be percentages alright so now that we're done we can remove the outline and enjoy our finished effects now mine isn't very attractive and I made it I designed mine in such a way so you guys could really see what was going on but you can really make some remarkable looking boxes nice custom boxes that nobody else is going to have with your own custom graphics