- 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