Can I clone this weird border design?

a really long time ago now one of my viewers asked me how we can do this type of effect that is right here on the today.com website so it's like the shop today that weird line thing that's going around like that i think it's a really cool effect and i've been wanting to do it for a long time i've had it my to-do list and i saw it as a good opportunity to start a new series that i'm going to be doing here on youtube every now and then which is trying to clone little things like this on websites but showing you my entire sort of work flow throughout the entire thing and how i troubleshoot and all of that so it is one where it's not just a clean tutorial that just bangs it out i want to show you the things that get right the things that get wrong how i figure it out and really try and talk my way through the thought process as i try and create it so if that sounds like something that's interesting to you let's dive in all right so i've already styled some stuff up here to get this working and looking the way it looks right now i am using a sas starter kit that i have so i already have some utility classes and other stuff but i've sort of self-decorated and done some stuff in here already and now i want to focus on this shop today thing because the rest of this i don't think is anything too complicated you'll notice my fonts aren't exactly the same nothing's there i didn't bother with the button because it's nothing complicated i really would just want to focus on like this thing right here and so if we want to go to my index here and just take a look at it really fast i do have a sidebar and like this whole component thing that entire thing would be my sidebar then in there i have a title with border uh which is the shop today text and then i have a ul so each one of these is a list item that is my content snippets that they're inside of and i wanted they all need to sort of be in the same place so yeah that's that's what i've done for that and i'm again we're not matching the whole site i'm not turning this into a design system so but i do think having something like this with that guy on there would be useful to have and i'm just trying to think so what i'm let's just do so it's title with border and my first thing to do is a border top of one pixels one pixel solid and then i have um hsl and i have a variable set up for this which is color primary 400 i believe that's wrong color though that's blue primary accent um if you want to know why i'm doing the hsl and then the variable inside of it i do have a video you can check that out there's just some you know opens up an extra door on stuff you can do with it my color's a little off but i'm not too stressed about that and we'll add some padding we need padding on all the sides i think so for now i'm just gonna do one m on the top let's just do one m like that and i was thinking okay so we're gonna do another thing here so border padding uh i am gonna throw a width here of max content which is gonna help um make sure so see how like it was going the full length here let's just turn that off it was going the full length because it's a block level element but a nice thing you can do is this max content which will limit the width to the content itself so if i come here and like this is a shorter title that's a certain word wrap on but if i did show shop today now instead you'll see that um like it's growing or shrinking with the tech so that's always nice when it's not like a locked in units or anything like that so the text can change and other things can change along with it um so that's good now i'm going to be using pseudoelements for this i guess i have two choices one of them is this h2 which was i i want my h2 to be something like this title with border i want it to be able to go anywhere whatsoever um let's just i have uh let's just do two things here um text primary 400 maybe 300 actually closer to the the color i keep doing primary instead of accent um it's a little faded out we'll just do the 400 it'll be a bit darker i'm worried more about getting the look than i am that um so padding i'm gonna go with maybe top should be like a 0.5 m and then a left and a right of maybe 2m and i might change that to them into a custom property um but we'll see that i'm just looking like this i need to line it up with there but that's why i might do this like this um left offset of 2m and then here i could do a var left offset and the reason i might do that is because then what i could actually do is come in with a transform translate x and then do a negative uh and then translate x and i could do my var left offset uh except it asked me negative can i just do this negative var offset no um calc of one uh negative one star that and then just make sure i close with enough parentheses ha there we go okay so that's why now like the nice thing here is i can actually change this and it's going to update the offset and the padding all at the same time so that just makes it a bit more maintainable in the long run so that's a border but then i need pseudoelement pseudoelement pseudoelement pseudoelement which is too many pseudo elements so there are two choices here ideally all of this would be with him so i'm going to set it up so we can do that um and the other option though i would just say is maybe you do it with like two suit elements on this guy um i do think it's easier to keep them all on that pseudo-element pseudo-element yeah so my idea now is like this is actually all a border and that's the bot this has a border all the way we just won't see it it's gonna be hiding behind that um which does actually oh you know what there is a way to yes yes i just thought of something we'll talk about it when i get there um because again i'm thinking about maintainability as if this was in something bigger and not just here um because playing with said indexes you wouldn't want to have to say like every anyway we'll talk about it when we get there what we're going to do now is so i have that so let's do my um title with border might as well just copy that and uh before and my title with border after so for these we need content properties on them content and if you don't know about before and after i have a playlist there that you can check out uh which dives deep it's also linked in the description below uh and i'll do a position of absolute now if i'm doing a position of absolute on here that means i also want to have a position of relative on here so we'll come here position of relative um so that just makes it so the the title itself is the containing block and then let's just do it border i'm gonna do oh no okay that's good that's for both of them and then we can just take the before and custom properties are inherited so we might be able to do something good with that i'm not sure if it's going to work so we're going to try um some let's actually no it won't help us let's just do a write of zero and a border of one pixel solid i can't even do current color here um okay so we can see it's in the right spot there right and then what if i did top is zero and then the height the height is going to be 1.5 and this is again so it's too high it looks thicker too eh weird because it's at one pixel i mean that's sort of what i wanted um i'm just trying to think if ever i changed this so that's my left offset and then what if i did a padding i can just do um top padding of 0.5 m and again this is just to make it so it become it's longer to set up var top padding uh so that should still work but then the advantage is so the height here would be var uh calc calc top uh calc of two times var top padding does that work okay it does so the advantage with doing it this way again is now if i change this the padding shrinks but then so does this or you know what maybe we don't need to do that let's i'll leave that there for now but it also didn't seem to work the way i thought instead of a height what if i just said bottom is 50 that probably makes more sense right because then if i change this it's always gonna match okay that makes more sense so let's switch this i i like custom properties uh as much as possible but i also think for putting them in for one thing doesn't really serve a purpose so it doesn't really make it more maintainable so we'll stick with this so it's going down that way then i want my after so luckily my bottom is 50 so now i i'm going to say top is 50 uh 50 50 haha um so the top is going to be at the same spot and then we're going to say the width is 1.5 m and it has the same border so you know what we could just take this border cut it off of here and put it here oh i know why the border is so thick i'm getting it on all four sides uh border does it change if i just do border left it's gonna break for the other one right okay so instead of that we're gonna do this as a background color background is current color and then this so this one is my vertical one so this will have a width of one pixel and then i hope we go it looks better and then this one will have a height of one pixel except the width is way too much 0.5 top and then right of zero cool a 30 second little intermission here just to ask you a question uh do you like this style of video where i'm making mistakes i'm trying to figure out as i go or do you prefer it when i have a polished solution and i'm not sort of fiddling around with things a little bit so yeah i'd love to know in the comments down below and yeah let's keep on going with this and finish it up that looks pretty good i'm happy with that nice um and then we want to bring this side down so this is where things get more interesting with what i was saying before and i'm gonna potentially okay we're gonna try um so padding is there then we have my offsets which are good now i need like a bunch of padding on the bottom let's just do five m which is okay then so we have a border top and like i like short hands but for something like i know we could do we can say border on all sides and then we can say border right is uh zero and it just turns it off um so yeah that that's sort of what i wanted and so here we have the shorthand this just uses the cascade to overwrite that shorthand only for the right side you could also do like the three sides explicitly it's up to you um so that's good but now obviously this needs to move up over that and i think the best way to do something like that oh man okay this is when people don't i'm going to get comments about this but i'm going to explain why i'm doing it this way width border padding um i'm going to put my margin here no margin goes afterward so i'm going to come in with a margin top of um how much is my padding here five m negative five m and again a custom property could potentially be used there uh not top bottom silly kevin um oh that i just realized though by giving my padding okay that's caused other problems i didn't realize it when that happened so we've run into another issue but that's okay um so the issue that happens here so yeah i'll explain why i like the negative margin option i'm just not sure [Music] okay we'll deal with the right side in a second what i'm now going to do is title with border plus star um we'll get a position of relative and a z index of two now this could break stuff though too but it it solves that problem um one reason i like something like this i don't think that would break anything this is where a parent selector would be really useful just because i could make a parent selector that would force the parent of this to always create its own stacking context just to make sure this wouldn't break anything but what i like about this is whatever comes after would always be positioned in the right spot so that's why i sort of like that instead of applying it directly to this because then any time you had it you'd anyway you'd have to muck around a bit too much from my own tastes so i sort of like that solution um but obviously it breaks my whole thing with these because of my 50 i did like that 50 one solution [Music] i'm wondering if okay we're gonna say that the title here actually this might help border title with border um i'm going to do a line height of one and then i'm going to bring in the same is this gonna work i don't know i just try the same idea that i had before bottom is 0.5 m top bottom no i can't use bottom then i have to do this as a height height 0.5 m which is the padding itself like i don't like magic numbers because i'd like this if i could get it to work because then the same with my top here would top wouldn't be there 0.5 m like that would line up with that so this number this number and this number have to be the same it's just how do i figure out what that number should be i could so title with border if i explicitly put a font size on here maybe it would help so let's try that font size of i have custom properties for my font sizes so font size it's pretty small actually oh no it's there uh we'll try 500 and see what happens close enough um it should also be italic okay font style italic there we go um so my font size 500 now because i have a line height of one let's just see what happens here i have no idea if this is gonna work height if i come in with my font size it should really i didn't i thought i'd have to do more calculations than that what how did your name did i just get lucky with my padding oh i must have just got lucky with my padding though because what if this becomes one yeah i just got really lucky that the padding there worked with the font size i had okay so i just want to make this so it can actually work a little bit better so i am going to throw a calc on here and remember when kevin it's working why are you doing this but again i i the idea here of what i want to do is i want to make it as reusable as possible so we need a calc of okay so let's just throw offset top for now i'm going to do my 0.5 m because that's the padding and again we could use that um offset top is 0.5 so 0.5 would be lining up at the top of the text so i want to do my calc is this divided by 2 plus var offset top does that make sense nothing changed so let's it looks exactly the same as where i was so let's put that here as well and hit save it still looks exactly the same but if i change this to 1m ha see it is working so offset top is actually going to come out of here and it's going to come all the way up to here so then i can use the offset top here where we're going back to what we used to have offset top a little bit so the advantage now is if i change this font size to say 600 see it adjusted it got bigger it's not matching right in the middle but it's not bad um so that would work and i might have got a little lucky but then my offset top here i should call this offset left too just for naming but if i change this it will increase the space here and match the spacing there too maybe i'm missing something in this but i'm pretty happy with that um i think it's looking pretty good and maybe actually like yeah i'm actually pretty happy with that it could also be with how the font size is being calculated and my ascenders and descenders which i actually think is what it's not really an issue but what that is so there might be a few little things here that we could use to sort of improve things a little bit and get them to be a closer match than what we had but i think overall we accomplished this in a bit of a clever way if you want to know a little bit about how i decided on organizing my css while i was writing this i have a video right here where i talk about how i organize my css properties because i do have a bit of a specific way of how i organize that and with that a really big thank you to zach randy and stuart who are my supporters of awesome over on patreon as well as all my other patrons for their monthly support and of course until next time don't forget to make your corn on the internet just a little bit more awesome

Channel: Kevin Powell

Views: 48,282

Rating: 4.9672003 out of 5

Keywords: Kevin Powell, css, front-end, frontend, html, tutorial, css clone, website clone, cloning a site, css tutorial, border design, css borders, css border design, ::before, ::after, pseudo-elements, pseudo style css, css pseudo

Id: UDNY6NiNEB4

Length: 20min 29sec (1229 seconds)

Published: Thu Sep 09 2021