Chào mừng bạn đến với TUTUAPP

Among Us Character with only HTML and CSS

what is going on i know you’re asking yourself who is this guy is depth tips back again what is going on my name is jay i’m a full-time web designer and developer i currently work for an nba team but i’ve been part of the depth tips community for years and years and years i loved it so much that i created my own youtube channel there’s a link in the description if you want to take a look at it let me know if you like it it’s a mix of everything like a wordpress html css javascript is everything mixed mpj and david gave me the opportunity to be a guest host and record a whole video tutorial for you but we really want to know what do you want to learn what do you want from dev tips do you want more design you want more code you want designing code design html css javascript you want more backend you want more javascript

Xem them nen chon san go hay san nhua tai day;

frameworks what do you want let’s have a discussion comment below i’m going to reply every single comment but you can actually join our discord we have a discord server we have a chat everyone is there we can chat let’s have a discussion about it what do you want from dev tips maybe you want more the life of a developer mixed with tutorials what do you think about that let’s discuss it comment below go to the discord let’s have a discussion and now let’s go to the tutorial the other day i was playing this mobile game called among us right now it exploded everyone is playing it um it’s about this a crew of cute little astronauts with different colors and they are imposters among the crew trying to kill them without getting noticed and that’s that’s about it that’s that’s the game so i saw one of these astronauts and i’m like how can i create this character with only html and css and i did it my name is jay welcome to dev tips before we start coding i’m using vs code that’s my code editor this is what you see right now there is a link in the description of the video if you want to download that and use the same exact code editor that i’m using so right now i just have my html and you can see the body is empty i just have title all this very basic html code that we need and we have here a photo of one of the characters i’m just gonna double click and then i’m to split the screen i’m going to close it here put it a little bit small that we have it there for reference and this is what i want to do this is what i want to do in html and css first thing i’m going to do i’m going to create a style.css file so i’m going to go here and click a new file style.css press enter and then here in my html i’m going to add the css so length rel equals stylesheet a href is going to be style.css all right i’m going to save that and now we are good to start coding right let me close the css here i want to keep the little guy here all right cool let’s start with the body so what i want to do is this part right here without the legs without this little backpack and without this kind of glass helmet thing that the character has so only this body all right so let’s go ahead and create like a wrapper for everything i’m going to call it imposter yep my character is going to be the bad guy the imposter and then the first thing is the body so let’s go ahead and do that body so i’m doing is creating a div with a class of whatever i want and if you see me doing this and creating like whatever class i’m pressing tab and it’s creating the div for me this is emmet okay i’m using emmett another link in the description if you want to do this so let’s go ahead and remove that all right i think we can get started with the body only and now we’re going to need to open the css let me save the html first let’s go ahead um first thing i’m gonna do something with the body of the actual browser of the viewport so body this is not the body of the character don’t get confused um i wanna center my character so i’m gonna use flexbox for that so display flex i’m going to align items to the center justify content to the center and the height of the viewport 100 so let’s do that 100 viewport height and this is going to center left to right top to bottom okay so i’m going to save that and to make sure it works i’m just gonna put like one letter here inside the body of the character just an a and here you go we have an a is centered okay so it’s working um remember the height is very important because if i comment this out for example save it um the height of the body right now is whatever space is taking that letter a but here i’m i’m just like telling no the body is going to be a hundred percent the the viewport height so let’s save that and we got it on the center with the power of flex box okay so that’s working perfect our character is going to be centered save all right so inside the body we have this shadow so all we can do is create like a shadow a diff with a cleft shadow and that’s it for now so let’s code some css so let’s do imposter imposter this is the whole wrapper so inside imposter we’re gonna have the body we’re gonna have the legs we’re gonna have the backpack this little thing so the only thing i’m gonna do here is position relative because we’re gonna have some position absolute a lot of position absolute inside here and inside other elements so that’s it for that and now the bodies i’m gonna do imposter and the class of body all right so this one’s going to be position relative to um the width let’s do um let’s do 300 pixels and the high i don’t know 400 maybe don’t worry we can modify this now here’s a cool thing border radius this is how we create all those shapes all these weird shapes we are going to do it with border radius okay so let’s go ahead let’s do i don’t know um i’m gonna use percentages so thirty percent uh let’s do a forty percent and then this this ones are going to be flat here remember we’re starting from left corner 35 percent then um top right corner 40 percent it’s going to be kind of curved and then flat here so it can be 0 and 0. and now we’re going to do a border it’s going to be that black border um 30 pixels needs to be kind of big solid and black so we can do just black save that and here we go we have already some shape all right um it’s not i don’t like it a lot i think we can maybe a little bit taller let’s see 420 a little bit i think it looks good um we can keep modifying the percentage let’s see if 45 because this is not it looks kind of perfect that’s this is not perfect right save there you go now it’s not perfect a little bit um yeah i think that looks that looks good all right now when i fill it with this red so i’m gonna go back to the html and inside the body i think i’m going to put a fill let’s see fill let’s call it fill and that’s going to be our red so we’re going to have red and another red so we have two reds let’s go ahead and posture fill or you can call it red or whatever now this one’s going to be position absolute we’re going to do with 100 because i wanted to take the whole thing from left to right that color red and the height same thing let’s put red for now i’m going to change that color but i want to make sure it works there you go so it’s filling but now we have all this weird you know this thing happening here um all we have to do is put an overflow to the body and hide that so overflow hidden and now whatever is um getting out of this body here is gonna be hidden let’s save it that’s it all right we are looking good so i’m gonna change this red to this one it’s like a wine color let’s go ahead and do that i have the color somewhere here let me just copy and paste it there we go so it’s like a wine color so now we need to create another shape that is going to be this red and then this wine color is the shadow but it’s easy for is going to be easier for you to create um this round shape then this weird shadow shape okay so let’s go ahead and creating the shadow one in poster dot shadow all right let me scroll here a little bit position absolute with um 100 yeah we’re gonna we want to take all of it the height is not let’s do 80 90 because it’s not a hundred i wanted to be kind of here somewhere so you can see it’s not 100 and we need to leave a little bit of space there on the background let’s let’s do the same thing let’s just keep it red make sure it works and now we’re gonna do the magic with the border radius so border radius so now i’m gonna show you a really cool tool that you can use to create all these weird shapes using border radius um let me just drag the website here let me put it somewhere here all right all right so if you go to nine elements dot github dot io you will see this it says eight point full control and you can see you can like drag and drop and play with your border radius and you will see this percentages here and you will see this force latch this is something that a lot of people don’t even know that exist right so right now if you click on here you can see full control or simple version so this is a simple version let’s click on full control and you can see if you move this one and you move this one so the first percentage moving to the left for right the left corner left top corner moving left to right is the first percentage and the same thing but on top to bottom it will move this second percentage so you can start creating weird kind of shapes see and you can see here how the percentages are changing and if you like it just copy it and put it here let’s save it let’s see if that doing something and there you go we have this same shape we created here but it’s kind of here and that’s how we’re doing this whole thing all right so let’s go ahead i’m going to fix it this is not the shape that i want so the first thing in the corner i want zero i don’t want to do anything the second is going to be 10 um 25 let me see 40 and then we’re gonna do the the force latch then 20 you’re going to see i don’t want you to worry about understanding all this but if you use the tool you are going to understand what is happening it’s just you have full control of of eight points of your border radius okay all right let me save this and see how it looks there you go it’s very easy when you use the tool to create your shape just like i did so what i did was i created this shape which is very similar to this and then i just copy and pasted all the percentages you can do it manually all you have to do is understanding what is happening each each percentage on where is each point and that’s it it’s not super super difficult all right so i feel really good about that i like it so now let’s go ahead and coat this little glass bowl or maybe it’s a helmet i’m gonna call it glass bowl okay so in poster we’re let’s create the yeah class glass hyphen bowl and we need to go back to html and do the same thing so we’re done with the actual body we have the shadow and everything now we need to create that glass bowl all right and inside the glass we have reflections and stuff right so we’re going gonna have the main color it’s gonna be this one the reflection one this little light blue and then we have a white so i’m gonna do first reflection blue and reflection white all right let’s get in i’m going to close this to have a little bit more space all right that looks better so reflection blue and reflection white so blue and white i think that’s all we need so i’m going to save that i’m going to go back to the css and start coding this so let’s go ahead position absolute uh with i don’t know let’s say 100 pixels height 1 30 pixels um this is not gonna work let’s do 200 pixels width uh the background let’s go with blue for now i don’t want to like complicate things actually we need to change the red now that i’m thinking let me just copy and paste the hex code making sure that it’s the same exact red all right here we go and our glass bowl is somewhere here don’t worry let’s fix that all right um so right let’s do zero top this is zero for now we wanna we’re gonna fix it and the border is going to be same things 30 pixels this is like this black border solid black okay there we go so now we are starting to look yep something don’t worry we’re gonna fix it now and now our magic border radius so what i’m gonna do i’m just going to copy and paste the percentages instead of just doing it manually save that there you go so you can see it’s very similar and we’re going to do the same thing overflow hidden because we’re going to have all this other circles shapes inside this glass bowl so let’s save that and now we’re going to keep creating i’m going to just copy this imposter glass bowl dot m reflection blue i’m gonna scroll this all right position absolute again uh right zero with um like ninety percent it’s kind of yeah and 90 that blue let’s do height 70 pixels because this one is height 130. um actually let’s put 20 more pixels width let’s save this yeah that’s that’s better a little bit more wider okay background let’s do light blue um this is not the color i’m gonna change it but don’t worry and again border radius let me copy and paste save this and look at that looking very very good so let me just copy and paste the hex code for this color and for this blue which is not blue it’s kind of like a dark green gray color there we go so now we have the same exact colors but now the top needs to change and the right and all that so let’s let’s change that so top let’s do uh 90 pixels and right needs to be negative because it’s going to go like out of the character so let’s do negative 20 pixels here we go that’s looking good that’s looking very good i like it and i don’t know if you can see but it’s kind of a little bit like rotated so let’s go ahead and rotate a little bit the glass bowl uh transform rotate uh six degrees maybe now that’s too much for all right i think that’s good uh yeah yep that’s good for negative four degrees perfect it’s just a little bit it doesn’t have to be a lot this is a little detail you know all right and now the the little white reflection here so i’m going to just copy and paste this one i’m going to change it to white instead of blue and it’s going to be same thing kind of the same thing position absolute um actually let’s copy all this paste it and all we need to do is changing the width height and position and all that stuff so it’s gonna be top 10 pixels the width can we do like 50 50 let’s see i don’t know i don’t know if is going to look good the height 40 pixels so width height yeah that’s fine and it’s this is going to be white and the border radius i’m just going to copy and paste it again it’s a little bit different so let’s go ahead and copy and paste it but you will notice that all these shapes are kind of circles and we’re just kind of modifying that border radius and that’s it that’s all we are doing let’s save it there we go but to the right we need more yeah 40 pixels instead and the top we need something for the top 10 there we go i think that looks yeah that looks good i like it so now this is taking some kind of form um we have the body with the shadows and all that we have this kind of glass bowl helmet thing with all the reflections and it’s looking very nice i like it all right so we are done with the glass bowl and now we’re gonna go back and do the legs so let’s go here legs and inside the legs we’re gonna have the left and the right so let’s do leg right or you can do right leg um whatever and leg leg left here we go so we have the legs the right and the left all right i’m going to save that and go back to css in poster legs and we’re gonna do first the leg left all right so with oh let’s see 90 pixels height um 100 i’ll fix the height and with maybe it’s not going to look perfect but we’ll fix it uh background is gonna be red um this is gonna be the wine color where is it let’s scroll up a little bit is this wine color yeah just paste it right there all right so we’re going to have some border to the left bottom and right but i don’t want to add border to the top okay because we’re gonna kind of connect it to the body we don’t need that border so we’re gonna do border right oops not radius right or actually let’s start by left yeah 30 pixels um same thing is going to be black i’m just going to copy this and paste it three times and we change it to right and up bottom all right let me save that there you go so we we actually have a leg it’s a leg it’s a perfect square um i think it needs to be a little bit kind of taller like the height needs to change just a little bit so let’s do 130 the width maybe 10 um 20 pixels all right let’s do 110 pixels because remember i’m gonna connect this so we’re gonna lose a little bit of the leg but that looks good so now border radius let’s go ahead that way we have that little curve right there i’m gonna do the same thing just gonna copy and paste the percentages save that and that was it that was not bad so as you can see zero top zero top right forty percent bottom right forty percent bottom left that’s simple all right next let me just copy and paste it’s gonna be the next leg so this one’s gonna be the right um same thing let’s just copy and paste the left here i’m gonna save it uh all right so what we’re gonna do here because they’re stack something we can do is use flexbox that way we can divide the likes and they’re gonna be like in a row so i’m gonna up here legs display flex oops legs oh my god can i write there we go display flex um let’s save it there you go so now we have a row instead of like stack um let’s use justify content and we’re gonna do space between so we’ll ask a space between let’s save it there you go so what i’m going to do is i’m going to put it a little bit like up move them up that way they connect to the body so i’m going to do transform translate y and let’s do negative 40 pixels no that’s too much too much 30. that’s perfect of course it’s it’s 30 because the that border is 30 pixels of course the right leg um is um the height is a little bit less than the other one and maybe the width too so let’s go ahead and change it to maybe the width 90 percent instead let me see oh what wait what’s going on like this let’s go back ah all right let me change it i want the left to be here yep there you go that’s what i want there we go sorry about that i didn’t want the left to be the last doesn’t make sense fine we’re good now all right so the right one the width yes and the height um i don’t know 100 not too much 105. yeah i think that i think that that looks good yeah i think we’re fine all right legs are looking good and now i need to create this little thing right here how we can do that actually it’s not that complicated so let’s go ahead and do left let’s just copy this the left right and i’m gonna do uh before pseudo class okay and now here we’re gonna do position absolute content you need to add the content but it’s right now it’s going to be just empty and let’s do top zero left uh let’s do zero for now with 100 i mean 100 pixels high not a lot 30 oh yeah it needs to be 30 because of the border is 30 30 pixels so make sure that 30 pixels background is going to be black and let’s see what happens all right so it’s going ahead and going this way so we need to make sure that the the leg right has position of relative save that there you go so now we have that line of course is that’s too long so let’s go ahead and the left let’s do negative negative 60 pixels or 50 pixels there you go so now we have kind of that thing of course it’s a square or it’s a rectangle right now but what do we gonna use border radius let’s do it so same thing i’m just gonna do a very simple border radius i’m gonna copy the percentage for the radius this is a simple very very simple one because it’s zero zero hundred percent zero let’s save it there you go so you can see um a zero 0 100 so it’s like very curved and then 0 back here and that’s what we have and i think like that looks very good honestly we can i mean i can keep tweaking it making sure it looks perfect but i think it looks good all right what do we have left the little backpack thingy let’s go ahead and do that um we have a little shadow here we can create that too so let’s go ahead backpack let’s create a css first so imposter we can be in posture backpack all right so let’s go back here and we need to add the backpack and it needs to be up here because remember on priority if if we add the backpack to in the bottom um it’s going to be um above all these elements so i want to do it here right before the body okay so backpack and the backpack has a shadow so same thing let’s do shadow all right whoa so we have the backpack as you can see here but it’s not a backpack yet let’s change the shape and all that so same thing position absolute again the height um let’s do i don’t know like 300 pixels the width um in just like a hundred remember we can change it back background red well it’s not that red but we’ll change it border same thing we can just copy it from somewhere here um let’s save that let’s see how this looks all right we cannot see it so let’s go ahead and put a um left maybe negative 100 pixels um yeah i think that works oh we have something we have a problem now so because we are using shadow here in html and we’re using shadow here uh we need to fix this css this is this is something that a lot of people has problem with their coding so you can see it’s imposter shadow so i’m telling every single class or every single element with the classes shadow will have this css okay so by adding here a body now we are more specific so save it and now you can see it’s only for the shadow inside the body that element with the clasp of body so make sure you’re doing something like that because if not it’s going to cause a lot of trouble and headaches okay all right backpack i think it’s looking good says size maybe the width can be a little bit less let’s save the height a little bit less to let’s say 280 or something all right and left okay and now um the top how much for the top it needs to be kind of down here so i don’t know 200 pixels no that’s too much 180 um i don’t know 100 [Music] and so this line is kind of in with this line yeah i think that’s good yeah i think that’s good so now again border radius let’s go ahead i’m going to copy the percentages awesome i think it’s too big so maybe height 250. i’m sorry the width or we can do not instead this left it needs to be yeah there you go yeah i think that looks good all right and now we need to do the same thing we have this little wine color and the red so let’s go ahead and change this to the wine our main color here there we go and now we need to add actually this is this needs to be actually the opposite of this one so let’s do red let’s keep it red where is it red copy paste it and we create another one with this wine color so the shadow is going to be the wine color so let’s go ahead copy paste backpack shadow same thing position absolute uh with 100 i want to take the hundred percent of the whole backpack the height um is almost there so like maybe 70 maybe we’ll fix it now um now background this background is going to be red right bottom is going to be zero here you go all right so looking good um same thing we need to add that overflow overflow hidden safe there we go um we need a little bit more height so 90 oops put zero 90 maybe we need to add that little curve so let’s go to head border radius i’m just going to copy this percentages and stuff there we go i think it can be a little bit more uh so let’s do 80 85 percent yeah i think 85 85 it is well wait what what am i thinking um this red needs to be the wine and then this needs to be red um i don’t know what i was thinking but don’t worry let’s change it very very quick all right and now we’re talking looking good looking good now the shadow and we’re done i mean after this you can just go ahead and play with the with the border radius and making sure it’s perfect but i think it’s it looks awesome so let’s go ahead and go to the html and then right here before backpack i’m gonna add um the floor shadow let’s got it floor shadow let’s save that and now here we’re going to do imposter floor shadow all right same thing position absolute all right bottom let’s do 0 for now we’ll change it later left zero for now same thing we’ll change it uh with um i don’t know 400 pixels something like that the height is not a lot maybe 100 a background is going to be like a dark gray let’s use um black for now we’ll change it let’s save it all right so there you go we have the shadow here we just need to make sure is is more um round and it’s dark gray and it’s centered we need to make sure it’s centered so let’s go ahead and change the color first so we can see it there we go now is a color um border radius is this one is simple because it’s just a circle so i’m going to do 50 every single corner oops border radius sorry there we go all right that’s looking good i think it needs to be more than 400 450. there we go and now we need to center this thing so left 50 remember if you do left 50 that’s not going to center so the trick is let’s add a transform translate x negative fifty percent now is centered bottom is bottom zero good i think it’s good let’s do a little bit more yeah more here because you can see the space not a lot of space just a little bit so maybe 10 10 pixels it helps maybe a little bit more than four 470 yeah i think that’s perfect all right and we have the among us red imposter coded 100 html and css only looking good border radius power so make sure you go to the nine so you can learn about and you can play with the border radius this is the best way to learn and to understand what the percentages are doing while you move dip you move one of these corners and that’s about it so i hope you like this video remember my name is jay this is death tips you

Leave a Reply

Your email address will not be published.