Como fazer uma Pokebola em HTML e Css

Como fazer uma Pokebola em HTML e Css

 
Fala galerinha, resolvi iniciar um projeto de desenhar com html e css.

Neste conteúdo piloto foi desenvolvido uma Pokebola totalmente em html e css.

Sei que é doideira desenhar com html e css, mas porque não fazer.
Vou deixar abaixo todo o passo a passo incluindo os códigos.


O software que utilizei para edição do código é Visual Studio Code.



Primeiro passo após a instalação do Visual Studio Code, “Caso não tenha instalado”!

Vamos criar o <body> e as <div> de acordo a imagem abaixo:


<body>  

   <div id="pokebola">

        <div class="esfera">

        </div>

        <div class="meia-lua1">

        </div>

        <div class="meia-lua2">

        </div>

        <div class="tarja">

        </div>

        <div class="esfera-centro">

        </div>

        <div class="contorno">

        </div>

        <div class="botao">

        </div>

        <div class="logo">

            <img    src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/98/International_Pok%C3%A9mon_logo.svg/1200px-International_Pok%C3%A9mon_logo.svg.png">

        </div>

    </div>

</body>

Se preferir pode copiar e colar!


Agora vamos criar o código Css para customizar estes elementos, de acordo com a imagem abaixo:

este código Css deve ficar antes da última tag do código </body>

 <style>

        #pokebola {

            margin-top: 0;

        }

 

        .tarja {

            width: 500px;

            height: 70px;

            border-style: solid;

            border-width: 0;

            margin-top: 210px;

            margin-left: 650px;

            position: absolute;

            background-color: #313131;

            border-radius: 5px;

            box-shadow: 0 5px 9px 0px #0000009c;

        }

 

        .esfera {

            width: 500px;

            height: 500px;

            border-style: solid;

            border-width: 0;

            margin-top: 0;

            margin-left: 650px;

            border-radius: 250px;

            position: absolute;

            box-shadow: 20px 18px 20px 0px #000000;

        }

 

        .meia-lua1 {

            width: 500px;

            height: 250px;

            background-color: #ff0000;

            margin-top: 0;

            margin-left: 650px;

            border-radius: 250px 250px 0 0;

            position: absolute;

            box-shadow: inset 10px 10px 20px 0 #dadada;

        }

 

        .meia-lua2 {

            width: 500px;

            height: 250px;

            border-style: solid;

            border-width: 0;

            margin-top: 250px;

            margin-left: 650px;

            border-radius: 0 0 250px 255px;

            position: absolute;

            box-shadow: inset -5px -5px 20px 10px #777777;

        }

 

        .esfera-centro {

            background-color: #313131;

            width: 200px;

            height: 200px;

            border-style: solid;

            border-width: 0;

            margin-top: 150px;

            margin-left: 800px;

            border-radius: 250px;

            position: absolute;

            box-shadow: inset 5px 5px 15px 0 #ffffff;

        }

 

        .botao {

            background-color: #bfbfbf;

            width: 100px;

            height: 100px;

            border-style: solid;

            border-width: 0;

            margin-top: 200px;

            margin-left: 848px;

            border-radius: 250px;

            position: absolute;

            box-shadow: 5px 5px 15px 5px #000000;

        }

 

        .contorno {

            background-color: #ffffff;

            width: 125px;

            height: 125px;

            border-style: solid;

            border-width: 1px;

            margin-top: 187px;

            margin-left: 836px;

            border-radius: 250px;

            position: absolute;

        }

 

        .logo {

            display: flex;

            margin-top: 347px;

            margin-left: 600px;

            position: absolute;

        }

 

        .logo img {

            width: 50%;

        }

    </style>


Se preferir pode copiar e colar antes da última tag </body>.


Aqui pode conferir o vídeo da construção do código html e Css






Deixe seu comentário ou dúvida, e compartilhe este conteúdo.





Comentários

Vídeos

Postagens mais visitadas deste blog

One Piece: principais Personagens e suas histórias e habilidades

One Piece: Top vilões mais fortes da saga

DC Comics: Os 10 vilões mais cruéis dos quadrinhos