CSS Tutorial: Outline and Outline Offset

Key Takeaways

hi there my name is Kevin and here at my channel we learned how to make the web and how to make it look good while we're at it with a new video every Wednesday today we're going to be looking at a little coding quickie we're going to be looking at the CSS property that I didn't know about for the longest time but which I really love now the name about it outline the outline is fantastic for a nice little extra touches from the design of our sites and it's a lot like the border property but it has a few big differences so I've set up this code pen as so I'm going to share the link to this in the description below you can come in here and play around with it if ever you want to so the first thing I wanna look at then one of the cool things with the outline is it goes after the border so we always have our border that goes as far out all the way on the edges so let's set one of those up on my box here so we'll just do a nice simple border let's say five pixels solid black and I get a border all the way around my box I'm assuming you guys know how that works so if I come in here and I give myself an outline and let's do five pixels solid and we'll do red just so we can really see it and there you go after my border I get that red outline that comes in there so that's nice that I can sort of give myself a double border like that so that's really neat one of the first big differences that you'll see is that with a border we can specify what side we want to be working on so instead of doing border like that I can say border bottom and have a border only on my bottom I can't do that with an outline outline won't work that way so if I do outline bottom it's just not going to work there's no outline bottom left right or top it has to go on all four sides so you might be sort of wondering what the point of it is now right now it just seems sort of like a not-so-good border or dumbed-down border but we have this really cool second property that comes along with outline and that's called outline offset and this is what it makes it just amazing as far as I'm concerned so let's change this let's leave it red for now and I'll come down and add an outline offset and I'm going to do of five pixels and you can see that's pushed it away from my object by five pixels and let's just make that a little bit bigger so you can see it a bit bigger of a space that's a bit more obvious so I can move away from my object and one of the cool things with this is it's not actually going to push anything else around so if I had something over here this would actually overlap it's a little bit like drop shadow or my box shadow and things like that where it's going to cover stuff it won't actually increase the size of my container with the box model the same way that padding margin and border can do and also with that I can do a negative offset so if I put that is negative 20 it's going to go inside instead of outside so I can add sort of a border the stroke inside of my box which can be nice as well for a bit of a design element so instead of red maybe I'd make that white and it would give me this double border like that or if that was a positive so let's just bring this back to five pixels and give this the same color aquamarine as my box and then I sort of get this cool little double box thing going on that looks really nice so I really love the offset it's a nice little thing it gives us a bit mm you know a new way of expanding you have a border that's always stuck to it so I can break away one nice little use case that you can use this for is buttons so let's just make a quick button a href is equal to nothing class is equal to button hello closing so that should give me my link there it is and let's just style that button a little bit so my button will have a few things um let's do a text decoration of none to start with and let's give it a display:inline-block and a background background of steel blue padding of one m3m that looks all right color whoops color will be white and then a nice thing we can do so as I mentioned I bring in my offset so it's might not my offset my outline will do a nice little outline of say three pixels solid steel blue and it's just adding to the overall width of my button there so I have that and obviously when I hover on top right away it is give me a little flicker it's a little bit of a weird thing with the outline actually if you don't specify it in the hover it just doesn't exist it's usually the hover will copy everything you have automatically but it gets rid of the outline when I hover and we'll see in a second how that can do some interesting things but button:hover oops here and this is where it can get a little weird if I give this an offset now outline offset of say five pixels I you'll see it doesn't actually work it's kind of weird that way but if I come in here and I give this an outline of three pixels solid steel blue now it's going to jump out and away so I'm not sure why it works that way but I do need to specify my outline here and my align over here and the main reason I want to do that is because I actually want this to transition transition all ease-in out 300 milliseconds and it gives me this cool little hover effect going on right there where that little thing you know the whole box expands outwards and I like that and again if I didn't have this outline on there I would get this weird sort of disappearing outline maybe like that I find it really awkward and confusing so just for whatever reason you need to specify the outline in both places for it to actually work properly and if I don't have the outline here it sort of works but it's not really starting from any so it sort of just fades in maybe you like that I like having the outline in both of them so it just grows out and grows back in I find that looks a little bit more natural and of course say I made this white instead of and then did this with a negative offset you could do the same thing going inwards when you hover over your box sort of goes that way one thing that's really important with the negative offset is because the outline is on the outside so let's just make this red it's like a border it's going on the outside of my box and we'll make this red too so it's coming five pixels inside but it looks really small because it's doing five pixels inside but this is three so I'm left with only two there so if you really want a five pixel space all the way around I'd want to do eight so I'm going five plus three and now it's going where I'd sort of expected to switch those back to white just so we can make it look a little nicer and seeing it this this type of effect going on there for a nice little hover and that's the outline property so it's really not anything too complicated but again I didn't know about it for the longest time I don't see it used very often so I don't know if it's because people don't know about it or they just don't know in what cases to actually use it so I encourage you to check it out try it out if you do use it anywhere let me know share it in the comments below if you have any questions about how it works or any ideas for other videos just leave those down in the bottom in the comments if you like the video make sure you hit the thumbs up let me know that you liked it and I'll see you next Wednesday