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

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

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

Os Heróis Mais Icônicos da Marvel: Poderes e Personalidades

Por
"O universo da Marvel Comics é uma paisagem rica e diversificada, repleta de super-heróis icônicos que têm cativado leitores e fãs ao redor do mundo por décadas. Esses personagens extraordinários, criados por talentosos escritores e artistas, transcendem as páginas das histórias em quadrinhos para se tornar figuras emblemáticas da cultura pop. Com poderes sobre-humanos, destrezas incríveis e personalidades cativantes, os heróis da Marvel representam uma ampla gama de superpoderes, origens e histórias de fundo. Neste artigo, exploraremos alguns dos heróis mais notáveis da Marvel, destacando suas habilidades e características distintivas que os tornaram favoritos dos fãs e parte integrante do rico legado da Marvel Comics." Aqui estão alguns dos heróis mais conhecidos da Marvel, juntamente com breves descrições de seus poderes e personalidades: 1. Homem-Aranha (Peter Parker): O amigável bairro herói de Nova York, Peter Parker, possui força aumentada, agilidade e a habilidade de ...
Postar um comentário
LER MAIS...