Welcome to this video. this is a video I also released on my YouTube channel, academind.
In this video, I will show you how to build this
burger we're building in the burger builder and with build the burger here, I mean not what we do in
the react app but I mean build the css code for the burger. We'll do this in codepen,
you can find the finished project attached to this video and I hope you'll like this,
I hope this was helpful and interesting to you
so have fun with the video.
So I want to build this burger here and it's written as I said entirely in css, we won't animate it,
we won't add javascript logic to build it up,
that is what we do with react in the react course but it is I guess interesting to see how you can use
css to create all these ingredients here.
So for that, let's create a new pen here on codepen which is the web editor I'm going to use, you
could build this locally
but here, this is a nice playing ground for exactly this kind of project so why don't we use it.
So in this new codepen here, I want to build the burger.
Now this burger as I said won't use javascript but it will use html and it will use css obviously
to well make the burger look like a burger. In html,
I will not have that many elements,
I will have a wrapping div which I will give to a class box and this will just be like a container for
the burger and then in there, I want to have a div for each ingredient
so the goal is to have something like bread-top maybe
and then also have something like salad and then bread-bottom it and we're going to add more ingredients
than just these three, this wouldn't be that delicious of a burger.
But that is the idea, having all these ingredients sit next to each other and styling them with css.
So this is our html code, how does the css code look like
that? Well I go, I'm going to create all these classes I'm using here and I'll start with the box which is
the most boring one because it's not an ingredient,
this box should just be the container for the burger and the burger then also should be built
in a way that it's really flexible and grows with the box.
So therefore to start off, I'll give this box a width of let's say 500px and the margin of auto to
just center it and a height of 450px and you can always adjust this later.
Now let's work on the bread-top
so this is the first element I got here on the left and now the bread-top should be a box with round
corners on the top left and right corner
so that we have a straight line at the bottom and clear edges on the sides, on the bottom edges but then on
the bottom corners
but then this rounded look at the top, like a burger bread you cut into pieces where you then, well take
the upper piece. In css,
we obviously always work with boxes and all these ingredients are nothing else than boxes with some
rounded edges, some round corners
from time to time.
So first of all, let's give this bread-top a height and let's say this should be 20%,
keep in mind, it's inside the box it will be 20% of that height here.
Let's also give it a width and let's say that should be 80% and we can always tweak this later,
now we want to have a background color for this bread-top so I'll assign background color and of course
you can make this red
so that we now see this box. Red
doesn't seem to be the most optimal color for bread though,
brown probably would be better but I actually want to use a linear gradient to give this also some three
dimensional look so that we don't have the same monotone color for the entire bread.
And if we want to use linear gradient, we can do this on background color because it's not treated as
a color,
we do it on the background property instead.
Now linear gradient takes all the different shapes you want to well, transition through and here I
only want to have two and I picked two brownish colors,
the first one the hash code for the, the hex code for the first one is #BC581E
and the second color I want to transition to is #E27B36, like this.
So this is the brown color I picked
and of course, you can always pick a different one.
Now here, we got the look
but of course we're missing the round corners and so on,
right
so we should probably add some border radius to this and now we could say 10px, this gives us
around corners everywhere.
We only want to have the top and the top two corners to be round though
so what we can do is we can say 10px 10px 0 0. The first two numbers or basically these numbers
go from top left to top right to bottom right to bottom left
so one time around the burger. If we do it like this, only the top corners around but 10px
isn't enough,
actually I'm going to use percentages here so we can use 50% here, 50% basically looks much
closer to a burger, a bread,
a cut up bread
look, as I want it.
Now in this, this bread almost already looks pretty good
but now I also want to give it some three dimensional look
so I'll add a box shadow but not one which goes outside of the bread but an inset shadow, so which falls
onto the bread so to say, then I'll use 15px
and 0 here as dimensions for this shadow and this black shadow actually doesn't look too bad
but I want to have some dark brown color here which I can get with #C15711 and this now looks
really good, for me at least
and as always, you can tweak this around.
Now with that we've got the bread-top finished for now,
now all these seeds on the bread are missing for now,
we'll add them later,
let's next work on the salad. Now how should the salad look like, how should the salad
be styled? For the salad,
let's first of all define its width and the bread-top had a width of 80%,
I think it would look nice if the salad is a little bit broader than the bread so maybe we take 90%
here,
we also have to assign a height and there, let's try 7%,
so much smaller than the bread because salad obviously isn't as big.
Now the next step is I want to give this a background color
and here again, I'm going to use a linear gradient to have this nicer look than just one single color
and there, I picked some green colors in advance #228C1D is the code of the first color,
the color where we're starting at and then I want to end at #91CE50.
This is now a green color,
it also is not positioned correctly.
For one we want to use margin auto to center it,
the same should of course then be done on the bread on the top, here we also should center this.
Now it's centered but it also doesn't have any space between the bread and the salad
so we probably want to add some spacing, maybe 2% of the total height of the box to the bread
and maybe add the same amount of spacing to the salad and as so often, you can also finetune this of course.
So this is now the style I want to use,
one thing's missing,
I don't like the edges here, the corners of the salad, so it makes sense to give that a border radius of let's
say 20px and you can just play around with this number until it looks good to you,
I like this look, you can of course choose a different one.
So now we got the salad finished,
let's now work on the bottom
bread, so I'll add
bread-bottom here to target this last div
and on this bread, I'll also assign a height, let's bake 13%
so that's smaller than the top bread
but we also won't have this round part on the top here
and let's bake a width which probably should be equal to the width of the top bread
so 80% was our width there, let's go with the same width on the bottom bread.
Now so that we can see something,
I'll also use a background here
and I also want to set the background to a linear gradient here and I will use the following color,
#F08E4A and then go to #E27B36 and I simply picked
all these colors in some color pickers, before I started recording this.
Now we got the background color for that,
let's also add our margin of 2%, so to 2% and auto here to center this and have some spacing
and let's also add this inset box shadow as we use on the top bread
so inset -15px 0 and then #C15711
so that we get the same look as we have on the top.
Some border radius can't hurt here too though, a little bit too edgy for my taste
so I'll add a border radius but I won't use as round of a corner as we did for the top bread
instead the top two corners shouldn't be rounded,
also I'll assign a value of 0 but I want to have round corners at the bottom so I'll use 30px
here
and I like this
look, of course you can have
well make it a little bit less round with 20 maybe, also looks good,
whatever you like, I'll go back to 30
but again, you can tweak this to your needs
and with that, we get our bottom bread style too.
This already really looks nice in my opinion but we haven't gotten that many ingredients so time to add
more,
one great thing we can already see though is if I simply duplicate the salad div here,
well we got two salads in there
so that really works great,
it's reusable.
Still let's add more ingredients, let's add bacon below the salad, let's add cheese,
let's maybe start with two slices of cheese and let's add meat here, maybe also two slices.
These are all the ingredients I want to support and well, build here,
now let's add them step by step,
let's start with the bacon,
now I'm going to add this class right below the salad.
So the bacon also of course has to have a width
and here I'll use 80% to have it as width as the bread, you can make it smaller, you can make
it bigger, whatever you want, the height should be really small because bacon isn't that fat, at least
not from the height perspective
and we also want to assign a background here
and as always, I'll use a linear gradient here too to have nicer colors. The linear gradient here should
go from #BF3813 to #C45E38, like that and let's also add our margin of 2% and auto,
to center it,
that's my bacon.
Now here, I don't actually have round corners, you could add them, you could add rounded corners here but
I like my bacon to have rough edges, rough corners like it has here, again as always change this if you
want a different look.
Let me move on to the cheese
and you probably already understood the pattern,
we can copy the code from the bacon here and just adjust these values. For example,
I want to have cheese which overlaps or which goes beyond the width of my bread,
so I'll pick let's say 91%
here, the height of the cheese could be 3% but let's make it slightly bigger, maybe 4.5
and the color of course is off,
it should be in a yellowish region,
so there I'll pick #F4D004 and then
#D6BB22 and obviously, I know all these hex codes by heart,
no you simply look them up and pick a color you like,
so that's our background.
Now for the cheese, I want to have round corners again
so I'll add a border radius here and I'll simply set 20px for all corners,
this looks nice to me
looks like nice cheese,
as always you can
tweak it
but I like the look of these cheese pieces here and that already is the cheese.
Now of course that's not all though, we also get the meat, so I'll
duplicate the cheese because meat also will need width and height and so on
so let me name this meat here.
Now let's think about the width, I'll go with maybe 78%, slightly smaller than the bread,
I'll give it a height of let's say 8% to have bigger slices of meat,
the background here again will be a linear gradient
and here I want to go from #7F3608 to #702E05 for this look of my bread.
The border radius may be a little bit less round, maybe 15px, looks nice to me and I think the width
should be a little big or maybe 82%,
yeah that looks better
and with that, I'm I'm happy with the look of my of my meat, it looks good to me,
I got my meat here,
looks fine.
So as you can see, we basically have a lot of similar properties in all these ingredients, we just assign
different values for them
but besides that, all ingredients work in the same way. What we can also already see is if I go up to
my box and I decrease this to 300px, it all adjusts, of course the burger can look a bit
skewed depending on how you set the aspect ratio here
but in general, it adjusts nicely so that is really good,
I'll go back to what I used before though.
Now this is the burger in general but the seeds on the top bread are missing and the seeds are actually
a bit more work to to have them look good. So the seeds will be wrapped
elements in this bread-top div, I'll add a seeds element and a seeds to elements, so two divs with these
two different classes.
Now the reason for this is that I of course want to have more than one seed and I will take advantage
of a css feature to actually convert each div here into up to three seeds if I want to but I can't
go above these three seeds easily.
So I'll use this approach and here,
how do we make this work?
I will add my seeds class here below bread-top to start working with that,
I want to position it inside the bread-top and I want to be able to use this like an absolute viewport.
So I want to use position absolute here to really display or position these seeds as I want, now for
absolute, referring to my outer div,
I need to give my bread-top class the position relative,
then the next absolute position will refer to this.
Now we can start working on the seeds, I'll give them a width of 10% and this will now refer to the width
of the bread-top not to the box width and I'll give my seed, let's say our height of 15%,
now I also need to give them some color and here I'll simply use white as a background color.
With that we don't see the seed yet because I also need to position it,
I do this with left and top.
Now I'll try left 30% and top 50%
and now we see the seeds appear here, 30% into the burger and 50% from the top.
Now of course my seed also should have round corners,
so I'll give it a border radius of 40% to not have an entire ellipse but some edges but overall,
very round corners.
Now the next thing is I want to rotate it a little bit,
so I'll use the transform property and then rotate the rotate function and let's say by -20 degrees
so that it's not sitting parallel and parallel on the burger.
And finally I'll also give it a box shadow, an inset shadow -2px -3px and then
let's say #C9C9C9 which is like a grayish shadow,
I like this look here and you can always tweak these values to reposition the shadow.
So that's my first seed but I want to have more than one
and now I'm going to use a little well trick, well not really a trick,
I'm using a pseudo selector and taking the seeds class I just worked on and I'll add the after pseudo selector,
this allows me to create a new element which is displayed after this seed element, the content should
be an empty string,
this is required to display something though and then I'll give it a width of 100% because this
will now refer to the seeds class,
so to this width, so not 100% of the bread-top but 100% of the width of this seed and it
should be equally sized, therefore 100%. Now height
will be 100% so I'll add it like this and now, let's also give this a position of
absolute,
let's give it a background color of white and let's give it a left position
and now this also refers to the other seed
so I'll use -170% to move it to the left,
100% of, 70% of the width of that previous seed
and let's move it to the top by -260%,
this will move up by 2.6 times the height of this seed.
Now all I need to do is give this the round corners we already used, so 40% and I want to rotate
this differently,
so now I'll transform this
and if I now do rotate 0 degrees, it won't change because now the default rotation is the rotation of the
element
I positioned it after,
so of these seeds.
So now if I wanted to make this, well convert this back to be in parallel to my bread-top, I would have
to rotate it by 20 degrees, so if I do that it's back to a straight element, a straight line.
I want to rotate it by 60 degrees though
so to have it rotate in the opposite direction essentially.
And then I'm going to add a box shadow here
also with inset 1px 2px and then #C9C9C9, like this,
so this is the second seed I wanted to add.
Now I'll add a third one
and for that, I'm going to copy the seeds after element here, paste it in and change after to the other
pseudo selector before.
Now I can also do the same and create another seed visually,
so all the set up here is the same,
the position changes though, I want to move this to the right
so let's use 180% and then I want to not push this up as high so I'll use
-50% to move it up.
Then all the rest however stays the same,
I'll just adjust the box shadow to come from an opposite direction with -3px,
now it's coming from the bottom, whoops from the bottom left
and with that, that seed also looks good to me.
Now we can work on the next seed, seedsTwo because I only have after and before, so I'll need my new element
seedsTwo and seedsTwo of course just is styled as the other seed, without a pseudo selector was.
So I'm going to copy the code from there and paste it into seedsTwo, like this
and now let's see what we have to adjust, position absolute, width and height,
that's all great,
the positioning here has to change,
I'm going to push this farther to the right with a distance to the left of 64% and I'll
leave top to 50%, set to 50% though. I'll leave the border radius but I want to rotate
it differently, let's say +10 degree to have a slight rotation to the right and adjust the box shadow
-3px then maybe zero
and the same color as before.
Now with that, we got this seed in place,
now I'll use seeds after again.
So let me copy seedsTwo here,
use the after pseudo selector with as you learned, as height should be 100%.
Now the position has to change though,
first of all, let me add some content however so that we can see something
and now let's move farther to the right,
maybe by pushing this 150% to, well to the right away from left and for top, let me use
-130% to move it up a little bit.
Border radius is fine but let me rotate it by 90 degree to really have it be rotated totally different
and I'll adjust the shadow to use 1px 3px here, to come from the right like this.
Now with that, I got this seed in place and I'd say this looks like a nice burger.
This is the burger we built in the react app in the burger builder in this react course and I hope
you enjoyed learning how you can build elements like this with just css,
this doesn't use svg, doesn't use any images,
nothing like that, it's just css and as you saw, not even that many css properties we're using.
So really, I hope you like this kind of video,
I hope this was helpful and hopefully see you in future videos too.
You can of course find this code attached to this video. Bye.