Como fazer uma Pokebola em HTML e Css

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

Comentários

Postar um comentário

Vídeos

Postagens mais visitadas deste blog

Top 10: Confira as séries de anime altamente assistidas no mundo

Por -
Imagem
Confira a lista de 10 séries de anime mais populares que ganharam atenção mundial nos últimos tempos. No entanto, observe que as classificações e a popularidade do anime podem variar com o tempo. Aqui está uma lista de 10 séries de anime altamente assistidas. 1. Attack on Titan (Shingeki no Kyojin): Esta intensa série de fantasia sombria segue a luta da humanidade contra criaturas humanóides gigantes conhecidas como Titãs. É conhecido por seu enredo envolvente, personagens complexos e batalhas épicas. O show oferece ação intensa, mistério e explora temas de sobrevivência e moralidade. 2. Naruto Shippuden: Naruto é uma longa série shonen que segue a jornada de Naruto Uzumaki, um jovem ninja que aspira se tornar o mais forte de sua vila. Com uma mistura de ação, humor e momentos emocionantes, este anime aborda temas como amizade, determinação e a busca pelos próprios sonhos. 3. One Piece: One Piece é uma popular série de aventuras que narra a história de Monkey D. Luffy e sua tripulação
LER MAIS...

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

Por -
Imagem
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,
LER MAIS...

Resident Evil 4 Remake: O Mod Insano que Transforma Tudo em Infinito

Por -
Imagem
No cenário dos jogos, a criatividade dos jogadores muitas vezes se une à tecnologia para criar experiências únicas e fora do comum. Entre as muitas façanhas da comunidade de modders, existe um tipo especial de modificação que desafia as convenções, transformando jogos em algo totalmente novo e surpreendente. Um exemplo notável disso é o "Mod Infinito" criado para o Resident Evil 4 Remake. Neste texto, mergulharemos nas profundezas desse mod insano que coloca tudo no universo do Resident Evil 4 em um estado infinito de caos e diversão. Prepare-se para uma jornada emocionante e inusitada pelo mundo dos jogos modificados. O universo dos mods em jogos é um terreno fértil para a criatividade dos jogadores, permitindo que eles explorem e alterem aspectos dos jogos de maneiras inimagináveis. Quando se trata de clássicos atemporais como Resident Evil 4, a comunidade de modders não poderia ficar de fora. Entre os muitos mods criados para esse jogo, um dos mais notáveis e intrigantes é
LER MAIS...