Pular para o conteúdo principal

Como fazer uma Pokebola em HTML e Css

Imagem
Por

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.
Marcadores:
Local: São Paulo, Brasil

Comentários

Postar um comentário

Postagens mais visitadas deste blog

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

Por
One Piece é uma popular série de mangá e anime criada por Eiichiro Oda. A história segue Monkey D. Luffy e sua tripulação pirata, os Piratas do Chapéu de Palha, enquanto viajam pela Grand Line em busca do tesouro supremo conhecido como One Piece. Ao longo de sua aventura, eles encontram vários personagens que se tornam parte de sua tripulação ou aliados em sua busca. Aqui estão os personagens principais de One Piece, suas histórias e suas habilidades: Confira este conteúdo em vídeo! 1. Monkey D. Luffy: Luffy é o capitão dos Piratas do Chapéu de Palha e o principal protagonista da série. Ele comeu a fruta Gomu Gomu, uma akuma no Mi que lhe concedeu a habilidade de esticar seu corpo como borracha. O sonho de Luffy é se tornar o Rei dos Piratas e encontrar o One Piece. Ele possui imensa força física, resistência notável e uma atitude de nunca desistir. 2. Roronoa Zoro: Zoro é o espadachim dos Piratas do Chapéu de Palha e o primeiro membro da tripulação de Luffy. Ele empunha três espadas, ...
Postar um comentário
LER MAIS...

One Piece: Top vilões mais fortes da saga

Por
Aqui estão os vilões mais fortes da série One Piece. Observe que as classificações podem ter mudado no mangá desde então, esta lista pode não incluir novos personagens ou power-ups introduzidos recentes Kaido:  Conhecido como "Kaido das Bestas", ele é um dos Quatro Imperadores do Mar. Kaido possui imensa força física e é considerado praticamente indestrutível, com a capacidade de se transformar em um enorme dragão. Big Mom:  Também um dos Quatro Imperadores, Big Mom ou Charlotte Linlin, tem uma quantidade enorme de poder devido à sua habilidade de Akuma no Mi, Soru Soru no Mi. Ela pode manipular almas e criar manos poderosos para ajudá-la na ba...
Postar um comentário
LER MAIS...

Guerra Civil da Marvel: tudo que precisa saber e onde ler o arco completo

Por
Guerra Civil da Marvel guia completo para leitura A Guerra Civil da Marvel é um grande enredo cruzado que ocorreu no universo da Marvel Comics. Foi escrito por Mark Millar e ilustrado por Steve McNiven e foi publicado de 2006 a 2007. A história explora os dilemas morais e políticos enfrentados pela comunidade de super-heróis quando o governo dos Estados Unidos introduz a Lei de Registro de Super-Humanos. O Superhuman Registration Act é uma lei que exige que todos os indivíduos com habilidades sobre-humanas, incluindo super-heróis,  para revelar suas identidades secretas e trabalhar sob o controle do governo. Isso gera uma divisão entre os super-heróis, com o Homem de Ferro (Tony Stark) apoiando o ato e o Capitão América (Steve Rogers) se opondo. O conflito entre os dois heróis icônicos leva a uma guerra civil de super-heróis,  com cada lado recrutando aliados para apoiar sua causa. O arco da história da Guerra Civil é expansivo, abrangendo várias histórias em quadrinhos e q...
Postar um comentário
LER MAIS...