CSS | Burger Builder | Tutorial

00:00:00 welcome to this video I got a new react
00:00:03 course and this video is not about to
00:00:05 react course but if you saw some of the
00:00:07 announcements you probably saw that NSI
00:00:10 react course we build an application
00:00:12 where we can build up a burger
00:00:15 dynamically now that burger is actually
00:00:17 not using a bunch of images for the
00:00:20 different ingredients but it's written
00:00:22 entirely in CSS this is written entirely
00:00:25 in CSS in this video we'll build this
00:00:29 burger together so let's dive in
00:00:35 so when I built this burger here and
00:00:38 it's written as I said entirely in CSS
00:00:41 we won't animated we won't add
00:00:43 JavaScript logic to build it up that is
00:00:46 what we do with react and do react
00:00:47 course but it is
00:00:49 I guess interesting to see how you can
00:00:51 use CSS to create all these these
00:00:54 ingredients here so for that let's
00:00:56 create a new pan here on code pen with
00:00:59 just the web editor I'm going to use you
00:01:01 could bolt this locally but here this is
00:01:04 a nice playing ground for exactly this
00:01:06 kind of project so why don't we use it
00:01:08 so in this new code pan here I want to
00:01:12 build the burger now this burger as I
00:01:15 said won't use JavaScript but it will
00:01:18 use HTML and it will use CSS obviously
00:01:21 to well make the burger look like a
00:01:23 burger in HTML I will not have that many
00:01:28 elements I will have a wrapping div
00:01:31 which I will give to class box and this
00:01:33 will just be like the container for the
00:01:36 burger and then in there I want to have
00:01:38 a div for each ingredient so the goal is
00:01:41 to have something like red top maybe and
00:01:45 then also have something like sell it
00:01:49 and then Brad bottom and we're going to
00:01:53 add more ingredients than just ease free
00:01:55 this wouldn't be that delicious of a
00:01:58 burger but that is the idea having all
00:02:00 these ingredients set next to each other
00:02:02 and styling them with CSS so this our
00:02:07 HTML code how does these CSS code look
00:02:10 like then well I go I'm going to create
00:02:14 all these classes I'm using here I'll
00:02:16 start with the box which is the most
00:02:18 boring one because it's not an
00:02:20 ingredient this box should just be the
00:02:22 container for the burger and the burger
00:02:25 then all should be built in a way that
00:02:27 it's really flexible and grows with the
00:02:30 box
00:02:30 so therefore to start off I'll give this
00:02:32 box a width of let's say 500 pixels and
00:02:36 the margin of auto to just Center it and
00:02:39 a height of 450 pixels and you can
00:02:42 always adjust this later now let's work
00:02:46 on the bread
00:02:48 top so this is the first element I got
00:02:50 here on the left and now the bread top
00:02:54 should be well box with round corners on
00:03:00 the top left and right corner so that we
00:03:03 have a straight line at the bottom and
00:03:05 clear edges on the sides on the bottom
00:03:07 edges but then on the bottom corners but
00:03:10 then this rounded look at the top like a
00:03:13 burger bread you cut into pieces where
00:03:16 you then will take the upper piece in
00:03:19 CSS will obviously always work with
00:03:22 boxes and all these ingredients are
00:03:24 nothing else than boxes with some
00:03:27 rounded edges some round corners from
00:03:29 time to time so first of all let's give
00:03:33 this red top a height and let's say this
00:03:35 should be 20% keep in mind it's inside
00:03:38 the box it will be 20% of that height
00:03:41 here
00:03:42 let's also give it a width and let's say
00:03:44 that should be 80% and we can always
00:03:47 tweak this later now we want to have a
00:03:51 background color for this bread top so
00:03:55 I'll assign background color and of
00:03:57 course you can make this red so let me
00:03:59 now see this box red doesn't seem to be
00:04:03 the most optimal color for Brad though a
00:04:06 brown probably would be better but I
00:04:09 actually want to use a linear gradient
00:04:12 to give this also some three-dimensional
00:04:17 look so that we don't have the same
00:04:20 monotone color for the entire bread and
00:04:22 if we want to use linear gradient we
00:04:25 can't do this on background color
00:04:26 because it's not treated as a color we
00:04:28 do it on the background property instead
00:04:30 now a linear gradient takes all the
00:04:33 different shades you want to well

00:04:35 transition fruit and here only one I
00:04:37 have two and I picked two brownish
00:04:39 colors the first one the hashcode for a
00:04:42 TD hex code for the first one is BC 581e
00:04:48 and the second color I want to
00:04:51 transition to is e2 7 b-36
00:04:56 like this so lose the brown color I
00:04:59 picked and of course you can always pick
00:05:01 a different
00:05:02 one now here we got the D look but of
00:05:06 course we're missing the D round corners
00:05:09 and so on right so we should probably
00:05:11 add some border radius to this and now
00:05:14 we could say ten pixels this gives us
00:05:17 round corners everywhere we only want to
00:05:20 have two top and the top two corners to
00:05:23 be round though so what we can do is we
00:05:25 can say 10 pixels 10 pixels zero zero
00:05:29 the first two numbers or basically these
00:05:31 numbers go from top left to top right to
00:05:34 bottom right to bottom left so one time
00:05:37 around the burger if we do it like this
00:05:40 only the top corner corners around but
00:05:43 10 pixels isn't enough actually I'm
00:05:46 going to use percentages here so we can
00:05:48 use 50% here 50% basically looks much
00:05:54 closer to a burger a bread a cut-up read
00:05:58 look as I want it now in this this bread
00:06:03 almost already looks pretty good but now
00:06:06 I also want to give it some
00:06:07 three-dimensional look so add a box
00:06:09 shadow but not one which goes outside of
00:06:13 the bread but an inset shadow so which
00:06:16 falls onto the bread so to say then I'll
00:06:20 use 15 pixels and 0 here as dimensions
00:06:25 for the shadow and this black shadow
00:06:28 actually doesn't look too bad but I want
00:06:31 to have some dark brown color here which
00:06:34 I can get with c1 5 7 1 1 and this now
00:06:38 looks really good for me at least and as
00:06:40 always you can tweak this around now
00:06:43 with that we got the bread top finished
00:06:46 for now all these seeds on the bread are
00:06:49 missing for now we'll add them later
00:06:51 let's next work on the salad now how it
00:06:56 should the sell it look like how should
00:06:58 the sell it be stalled for the salad
00:07:00 let's first of all define a width and
00:07:02 the bread top had a width of 80% I think
00:07:07 it would look nice if the seller is a
00:07:09 little bit broader than the bread so
00:07:12 maybe we take 90% here we also have to
00:07:16 say assign a height and there let's try
00:07:19 7% so much smaller than the bread
00:07:21 because salad obviously is isn't as big
00:07:24 now the next step is I want to give this
00:07:27 a background color and here again I'm
00:07:29 going to use a linear gradient you have
00:07:31 this nicer look than just one single
00:07:34 color and there I picked some green
00:07:36 colors in advance two to eight C one D
00:07:40 is the code of the first car a color to
00:07:42 color or where we are starting at and
00:07:44 then I want to end at hashtag nine 1c
00:07:48 e50 this is now a green color it also is
00:07:53 not positioned correctly for one we want
00:07:57 to use margin Auto to Center it the same
00:08:01 should of course then be done on the
00:08:03 bread on the top here we all just shut
00:08:06 Center this now it's centered but it
00:08:09 also doesn't have any space between the
00:08:12 bread and the salad so we probably want
00:08:15 to add some spacing maybe two percent of
00:08:18 the total height of the box to the bread
00:08:20 and maybe add the same amount of spacing
00:08:24 to the cell it and s so often you can
00:08:28 also find you this of course so this is
00:08:31 now the style I wanna use one of things
00:08:35 missing I don't like the edges here the
00:08:38 corners of the salad so it makes sense
00:08:41 to also give dad a border radius of
00:08:44 let's say 20 pixels and you can just
00:08:47 play around with this number until it
00:08:49 looks good to you I like this look you
00:08:52 can of course choose a different one so
00:08:54 now we got the salad finished let's now
00:08:58 work on the bottom bread so I'll add
00:09:01 bread bottom here to target this last
00:09:05 death and on this bread I'll also sign a
00:09:09 height let's pick 13% so that's smaller
00:09:13 than the top bread but we also won't
00:09:16 have this round part on the top here and
00:09:20 let's pick a width which probably should
00:09:23 be equal to the width of the top bread
00:09:25 so 80% was our width there let's go with
00:09:28 the same width all
00:09:30 the bottom breath now so that we can see
00:09:32 something I'll also use a background
00:09:34 here and I also want to set the
00:09:36 background to a linear gradient here and

00:09:38 I will use the following color f08 efore
00:09:43 a and then go to e27
00:09:46 be free 6 and I simply picked all these
00:09:49 colors aids and color Pickers before I
00:09:52 started recording this now we got the
00:09:55 background color for that let's also add
00:09:58 a margin of 2 percent to 2 percent an
00:10:02 auto here to Center this and have some
00:10:04 spacing and that's also at this inset
00:10:08 box-shadow as we use it on the top bread
00:10:11 so inset – 15 pixels 0 and then c1 5 7 1
00:10:17 1 so we get the same look as we have on
00:10:20 the top some border-radius can't hurt
00:10:23 your tooth though a little bit too edgy
00:10:27 for my taste so add a border radius but
00:10:31 I won't use as round of a corner as we
00:10:34 did further the top Brett
00:10:35 instead the top two corners shouldn't be
00:10:39 rounded also I'll assign a value of zero
00:10:41 but I want to have round corners at the
00:10:44 bottom so I'll use 30 pixels here and I
00:10:47 like this look of course you can have
00:10:50 we're making a little bit less round
00:10:51 with 20 maybe also looks good whatever
00:10:56 you like I'll go back to Ferdie but
00:10:58 again you can tweak this to your needs
00:11:00 and with that we got our bottom rat
00:11:03 style to you this already looks nice in
00:11:05 my opinion but we haven't gotten that
00:11:08 many ingredients so time to add more one
00:11:11 great thing we can already see though is
00:11:13 if I simply duplicate the salad Dampier
00:11:16 well we got two salads in there so that
00:11:19 really works great it's reusable still
00:11:22 let's add more ingredients let's add
00:11:25 bacon below the salad let's add cheese
00:11:29 but maybe start with 2 slices of cheese
00:11:32 and let's add meat here maybe also two
00:11:36 slices these are all the ingredients I
00:11:39 want to support and well build here now
00:11:42 let's add them step
00:11:43 my step let's start with the bacon I'm
00:11:45 going to add this class right below the
00:11:48 sell it so the bacon also of course has
00:11:52 to have a width and here I'll use 80% to
00:11:56 have it as width as the bread you can
00:11:59 make it smaller you can make it bigger
00:12:01 whatever you want the height should be
00:12:04 really small because bacon isn't that
00:12:07 fat at least not from a height
00:12:10 perspective and we also want to assign a
00:12:13 background here and as always I'll use a
00:12:15 linear gradient here tube to have nicer
00:12:18 colors the linear gradient here should
00:12:20 go from bf3 8 1 3 qc4 5e 3/8 like that
00:12:30 and let's also add our margin of two
00:12:33 percentages and audio to Center it
00:12:36 that's my bacon now here I don't
00:12:39 actually have round corners you could
00:12:42 add them you could add rounded corners
00:12:44 here but I like my bacon do you have
00:12:47 rough edges rough corners like it has
00:12:49 here again as always changed as if you
00:12:52 want a different look let me move on to
00:12:54 the cheese and you probably already
00:12:57 understood the pattern we can copy the
00:13:01 code from the bacon here and just adjust
00:13:03 these values for example I want you have
00:13:07 cheese which overlaps or which goes
00:13:10 beyond width of my bread so I'll pick
00:13:12 let's say 91% here the height of the
00:13:18 cheese could be 3% but let's make it
00:13:21 slightly bigger maybe 4.5 and the color
00:13:26 of course is off it should be in the
00:13:29 yellowish reaching so there I'll pick F
00:13:31 4 D 0 0 4 and then d 6b B 2 2 and
00:13:38 obviously I know all these hex codes by
00:13:41 heart
00:13:42 no you simply lock them up and pick a
00:13:45 color you like so that's our background
00:13:48 now for the cheese I want to have round
00:13:50 corners again so I'll add a border
00:13:53 radius here and I'll simply set 20
00:13:55 pixels for all
00:13:57 corners this looks nice to me looks like
00:14:00 nice cheese as always you can tweak it
00:14:02 but I like the look of these cheese
00:14:04 pieces here and that already is the
00:14:08 cheese now of course that's not although
00:14:10 we all to get the meat so I'll duplicate
00:14:13 the cheese because meat also will need
00:14:16 width and height and so on so let me
00:14:18 name this meat here now let's think
00:14:22 about the width I'll go with maybe 78
00:14:26 percent slightly smaller than the bread
00:14:28 I'll give it a height of let's say a
00:14:31 percent you have red but bigger slices
00:14:35 of of meat the background here again
00:14:39 will be a linear gradient and here I
00:14:41 want to go from 7 F 3 6:08 to 702 eo5

00:14:50 for this look off my bread the border
00:14:54 radius may be a little a little bit less
00:14:57 round maybe 15 pixels looks nice to me
00:15:00 and I think the width should be a little
00:15:03 bit bigger maybe 82% yeah that looks
00:15:05 better and with that I'm happy with the
00:15:09 look of my of my meat it looks good to
00:15:11 me I got my meat here looks fine so as
00:15:15 you can see we basically have a lot of
00:15:18 similar properties in all these
00:15:20 ingredients I would just assign
00:15:22 different values for them but besides
00:15:24 that all ingredients work in the same
00:15:26 way what we can also already see us if I
00:15:29 go up to my box and I decrease this to
00:15:32 300 pixels it all adjusts of course the
00:15:35 burger can look a bit skewed depending
00:15:37 on how you set the aspect ratio here but
00:15:40 in general it adjusts nicely so that is
00:15:44 really good I'll go back to what I used
00:15:46 before though now this is the burger in
00:15:49 general but the seeds on the top bread
00:15:52 are missing and the seeds are actually a
00:15:55 bit more work to do we have to look good
00:15:58 so the seat will be wrapped elements in
00:16:02 this bread top death I'll add a seeds
00:16:05 element and a seeds two elements so two
00:16:08 devs with these two different classes
00:16:11 now the reason for this is that I of
00:16:15 course want to have more than one seat
00:16:16 and I will take advantage of a CSS
00:16:19 feature to actually convert each dev
00:16:21 here
00:16:22 into you up to free seats if I want you
00:16:25 but I can't go above these free seats
00:16:29 easily so I'll use this approach and
00:16:32 here how do we make this work I will add
00:16:37 my seats class here below brad's top to
00:16:42 start working with that I want to
00:16:44 position it inside the bread top and I
00:16:48 want to be able to use this like
00:16:51 absolute viewport so I want to use
00:16:55 position:absolute here to really display
00:16:59 or precision these seats as I want now
00:17:03 for absolute referring to my outer div I
00:17:08 need to give my bread top class the
00:17:11 position relative then the next absolute
00:17:14 position will refer to this now we can
00:17:18 start working on the seats
00:17:19 I'll give them a width of 10% and this
00:17:22 will now refer to the width off the
00:17:24 bread top not to the box with and I'll
00:17:28 give my seed let's say a height of 15
00:17:32 percent now I also need to give them
00:17:35 some color and here I will simply use
00:17:37 white as a background color with that we
00:17:41 don't see the seed yet because I also
00:17:44 need to position it I do this with left
00:17:46 and top now I'll try left 30% and top
00:17:51 50% and now we see the seat appear here
00:17:55 30% into the burger and 50% from the top
00:18:00 now of course my seat all you should
00:18:03 have round corners so I'll give it a
00:18:05 border radius of 40% to not have an
00:18:08 entire ellipse but some edges but
00:18:11 overall very round corners now the next
00:18:15 thing is I want to rotate it a little
00:18:17 bit so I'll use the transform property
00:18:20 and then rotate the rotate function and
00:18:23 let's say by minus 20
00:18:25 Griese so that it's not sitting parallel
00:18:28 in parallel on the burger
00:18:30 and finally I'll also give it a box
00:18:33 shadow and inset shadow – 2 pixels – 3
00:18:38 pixels and then let's say C 9 c 9 c 9
00:18:40 which is like a greyish shadow I like
00:18:43 this look here and you can always tweak
00:18:46 these values to reposition the shadow so
00:18:49 that's my first seed but I want to have
00:18:51 more than one and now I'm going to use a
00:18:53 little well trick but not really a trick
00:18:56 I'm using a pseudo selector I'm taking
00:18:58 the seeds class I just worked on and
00:19:00 I'll add the after pseudo selector this
00:19:03 allows me to create a new element which
00:19:06 is displayed after this seed element the
00:19:11 content should be an empty string this
00:19:13 is required to display something though
00:19:15 and then I'll give it a width of 100%
00:19:18 because this will now refer to the seeds
00:19:21 class so to dis with so not 100% of the
00:19:25 bread top but 100% of the width of their
00:19:28 seed and it should be equally sized
00:19:30 therefore 100 percent now height also
00:19:34 will be 100 percent and so leaded like
00:19:37 this and now let's also give this a
00:19:41 position of absolute let's give it a
00:19:45 background color off-white and let's
00:19:49 give it a left position and now this
00:19:51 also refers to the average seat so I'll

00:19:54 use minus 170 70 percent to move it to
00:19:57 the left
00:19:58 170 percent of the width of that
00:20:01 previous seat and let's move it to the
00:20:04 top by minus 260 percent this will move
00:20:08 it up by 2.6 times the height of this
00:20:12 seat now all I need to do is gift is the
00:20:17 the round corners we already used so for
00:20:20 the percent and I want to rotate this
00:20:23 differently so now form this and if I
00:20:26 now to rotate 0 degrees it won't change
00:20:30 because now the default rotation is the
00:20:33 rotation of the element I position it
00:20:36 after so of DC
00:20:38 so now if I wanted to make this well
00:20:42 convert this back to be in parallel to
00:20:44 my bread top I would have to rotate it
00:20:47 by 20 degrees so if I do that its back
00:20:50 to a straight element a straight line I
00:20:53 want to rotate it by 60 degrees though
00:20:56 swear to have it rotate in the opposite
00:20:59 direction essentially and then I'm going
00:21:02 to add a box shadow here also within
00:21:07 said one pixel two pixels and then C 9 c
00:21:12 9 c 9 like this so this is the second
00:21:17 seed I wanted to add now I'll add a
00:21:20 third one and for that I'm going to copy
00:21:22 these seeds after element here paste it
00:21:27 in and change after to the average
00:21:29 pseudo selector before now I can also do
00:21:33 the same and create another seed
00:21:36 visually so all the setup up here is the
00:21:39 same the position changes though I want
00:21:42 to move this to the right so let's use
00:21:44 180 percent and then I want you not push
00:21:49 this up as high so I'll use minus 50%
00:21:52 you move it up then all the rest however
00:21:55 stays the same I'll just adjust the box
00:22:00 shadow to come from an opposite
00:22:02 direction with minus 3 pixels now it's
00:22:04 coming from the bottom what's from the
00:22:06 bottom left and with that that seed also
00:22:11 looks good to me now we can work on the
00:22:15 next seat seeds too because I only have
00:22:18 after and before so I'll need my new
00:22:21 element seeds 2 and seeds 2 of course
00:22:26 just as style as the other seed without
00:22:30 a pseudo selector loss so I'm going to
00:22:32 copy the code from there and paste it
00:22:35 into seeds 2 like this and now let's see
00:22:39 what we have to adjust position absolute
00:22:41 with and height that's all great the
00:22:43 positioning here has to change I'm going
00:22:46 to push this forward to the right with a
00:22:49 distance to the left of 64
00:22:52 and I'll leave top to 50% set to 50%
00:22:56 though
00:22:57 I'll leave the border-radius but I want
00:23:00 to rotate it differently let's say plus
00:23:02 10 degree to have a slight rotation to
00:23:04 the right and adjust the box-shadow –
00:23:08 free pixels then maybe zero and the same
00:23:11 color as before now with that we got
00:23:14 this seat in place now I'll use seeds
00:23:18 after again so let me copy seeds to here
00:23:25 use tea after pseudo selector with as
00:23:30 you learned as height should be 100% now
00:23:33 the position has to change though first
00:23:35 of all let me add some content however
00:23:37 so that we can see something and now
00:23:40 let's move it forward to the right maybe
00:23:43 by pushing this 150 percent to well to
00:23:46 the right away from left and for chop
00:23:50 let me use minus 130 percent you move it
00:23:53 up a little bit
00:23:54 border radius is fine but let me rotate
00:23:57 it by 90 degrees really have it be
00:24:00 rotated totally different and I'll
00:24:02 adjust the shadow to use one pixel three
00:24:06 pixels here to come from the right like
00:24:09 this now with that I got this seat in
00:24:13 place and I'd say this looks like a nice
00:24:16 burger this is the burger we built in
00:24:19 the react app and the burger Boulder in
00:24:22 this react course and I hope you enjoyed
00:24:25 learning how you can't build elements
00:24:27 like this with just CSS this doesn't use
00:24:31 SVG doesn't use any images nothing like
00:24:34 that it's just CSS and as you saw not
00:24:37 even that many CSS properties we're
00:24:40 using so really I hope you liked this
00:24:43 kind of video I hope this was helpful
00:24:46 and hopefully see you in future videos –
00:24:49 you can of course find this code
00:24:51 attached to this video bye

You may also like