Ajuda html.
24/08/2018
0
Gente como faço isso tipo um poup com html e com vários nomes e horarios
https://i.imgur.com/f5NXCzg.png
https://i.imgur.com/f5NXCzg.png
Fábio Martins
Curtir tópico
+ 0
Responder
Posts
24/08/2018
Fernando Duwe
Olá Fábio,
Você pode criar uma div, com css e definir o posicionamento dela:
* 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:
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.
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
Clique aqui para fazer login e interagir na Comunidade :)