one of the funny scene from the latest Jumanji movie is when the players are
opening their stats we know it has the Nostalgia RPG game style that may be
useful if you are working on game website project so in this tutorial we
will try to recreate that window using pure CSS in just a few minutes let's
check it out
so first let's begin with finding suitable background and here's the image
I'm going to use for this tutorial then here is the blank example page there is
nothing except the initial CSS with flex layout for center alignment so let's add
a background image now let's look at a movie again you see that the window has
two columns with headers on each so I'm going to create divs for them and then
set up the layout first of all create a wrapper let's assign model class to it
then I will create two divs for each column then start adding header and
remaining text
next we will need a suitable font and press start 2P is the first one came up
in my mind so let's import it from Google font now
we will start adding CSS to customize the size and typography I will also add
a little bit text shadow to great depth
next I will use flex layout with Flex Direction row to align the two columns
set the transparent background color and padding as well starting to look good
now let's add border and box shadow to create depth effect now let's create a
trigger button to toggle this window on and off. To remain pure CSS and not using
JavaScript we'll use checkbox hack technique instead of button first we
will create checkbox input type but we will mark it as hidden to hide it from
the screen next create a label for this checkbox this one will be used as click
area now the CSS we will use absolute position to place it on the person in
the image also change the cursor pointer to let user know it's clickable then we
will add transform scale zero and transition this will hide the window and
we will scale them back when user click the check box
additionally we will add rotate X&Y to create 3d effect this will also need us
to set the prospective distance on a body and here's the final result that's
all for this tutorial if you want to see more development tips and tutorials
please subscribe to this channel to stay tuned for weekly update thanks watching
see you next time bye