Ajuda html.

24/08/2018

4

Gente como faço isso tipo um poup com html e com vários nomes e horarios
https://i.imgur.com/f5NXCzg.png
Responder

Posts

24/08/2018

Fernando Duwe

Olá Fábio,

Você pode criar uma div, com css e definir o posicionamento dela:

.Alert { position: absolute; z-index: 1000; top: 85%; left: 35%; width: 30%; height: 10%; }
.gameAlert { background-color: azure; border: 1px solid #cccccc; border-radius: 30px; }

.gameAlertIcon { position: absolute; top: 0px; left: 20px; padding-top: 10px; }
.gameAlertText { position: absolute; top: 0px; left: 30%; width: 70%; padding-top: 10px; text-align: left; }


* A class Alert cuida do posicionamento (position, top, left) da mensagem (o z-index serve para definir que essa mensagem ficaré sobre qualquer outro item);
* A classe gameAlert cuida do estilo da mensagem;
* A classe gameAlertIcon cuida do posicionamento do ícone dentro da caixa da mensagem;
* A classe gameAlertText cuida do posicionamento do texto dentro da caixa de mensagem;

Depois, use da seguinte forma no código:

        <div class="Alert gameAlert">
            <div class="gameAlertIcon">
                <img src="assets/prize.png">
            </div>
            <div class="gameAlertText">
                <b>Conquista desbloqueada</b><br>
                Vamo Zuá!
            </div>            
        </div>


Claro, esse é somente um exemplo bem simples do que pode ser feito, servirá como um pontapé inicial para você. Caso queira pintar o ícone, como está no exemplo, você pode adicionar um background para a classe gameAlertIcon, além de usar novamente o border-radius. Essa é uma forma bem básica de fazer. Seria interessante trabalhar com Bootstrap também, e tentar fazer uma versão com essa ferramenta.
Responder

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários. Para saber mais sobre o uso de cookies,
consulte nossa política de privacidade. Ao continuar navegando em nosso site, você concorda com a nossa política.

Aceitar