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...

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

Por
A DC Comics é o lar de uma vasta gama de vilões formidáveis ​​e cruéis. Embora as opiniões possam variar, aqui está uma lista de dez vilões notórios e cruéis da DC: 1° O Coringa: O Príncipe Palhaço do Crime, o Coringa, é talvez o vilão mais icônico e sádico da DC. Conhecido por sua natureza caótica, ações imprevisíveis e crimes horríveis, o Coringa é o arqui-inimigo do Batman. 2° Darkseid: Como governante de Apokolips, Darkseid é um vilão cósmico imensamente poderoso e impiedoso. Ele busca conquistar o universo e submeter toda a vida à sua vontade, muitas vezes entrando em conflito com a Liga da Justiça e o Super-Homem. 3° Lex Luthor: O maior inimigo do Superman, Lex Luthor, é um bilionário genial com uma vingança contra o Homem de Aço. Com seus vastos recursos e intelecto, Luthor usa seu brilhantismo para o mal, tentando minar e destruir o Superman a cada passo. 4° Deathstroke: Slade Wilson, também conhecido como Deathstroke the Terminator, é um assassino mortal e mercenário. Possuind
Postar um comentário
LER MAIS...