Ir para conteúdo

Pesquisar na Comunidade

Mostrando resultados para as tags ''floating''.

  • Pesquisar por Tags

    Digite tags separadas por vírgulas
  • Pesquisar por Autor

Tipo de Conteúdo


Calendários

  • Comunidade iMasters

Todas as áreas do Fórum

  • Q&A Desenvolvimento
    • Perguntas e respostas rápidas
  • Desenvolvimento Web
    • Desenvolvimento frontend
    • Javascript
    • PHP
    • Ruby
    • Python
    • Java
    • .NET
    • Docker, Kubernets e outros ambientes
    • Desenvolvimento com Wordpress
    • Desenvolvimento de apps
    • Desenvolvimento ágil
    • Desenvolvimento de Games
    • Banco de Dados
    • Design e UX
    • Algoritmos & Outras Tecnologias
  • Entretenimento e uso pessoal
    • Segurança & Malwares
    • Geral
    • Boteco iMasters

Encontrar resultados em...

Encontrar resultados que...


Data de Criação

  • Início

    FIM


Data de Atualização

  • Início

    FIM


Filtrar pelo número de...

Data de Registro

  • Início

    FIM


Grupo


Google+


Hangouts


Skype


Twitter


deviantART


Github


Flickr


LinkedIn


Pinterest


Facebook


Site Pessoal


Localização


Interesses

Encontrado 2 registros

  1. Bom dia galera. Estou querendo colocar um botão flutuante em meu site que acompanhe quando rolar para baixo. Um botão que vou utilizar para suporte. Um exemplo de como gostaria abaixo: Fico grato.
  2. 4Unknow

    Botão fechar popup.

    Boa noite caros amigos. Seguinte, estou com um problema aqui, estou utilizando um popup info que achei bacana, mas estou querendo ativar o botão "entendi" para fechar ele. Sabem como devo fazer? Seguem meu HTML acompanhado de meu CSS: HTML: <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Botão Infomação</title> <link rel="stylesheet" href="./style.css"> </head> <body> <!-- partial:index.partial.html --> <!-- POPUP STARTS FROM HERE --> <div id="PopUpGeneral" class="popup-module popup-wrap warning show"> <div class="popup-body bounceInDown" aria-modal="true" role="alertdialog" aria-labelledby="dialog_label" aria-describedby="dialog_desc"> <div class="popup-icon"></div> <div id="dialog_label" class="title">Atenção usuário!</div> <div id="dialog_desc" class="text"> Nosso Robô Everest está passando por uma atualização. Utilizar apenas em versões de simulação até maiores informações. Agradecemos por sua comprensão. </div> <div class="btn-wrap noselect"> <button id="BtnOK" class="btn btn-ok">ENTENDI</button> </div> </div> </div> <!-- partial --> </body> </html> CSS: /* ************************* */ /* ***** POPUP MODULE ***** */ /* ************************* */ .popup-module { position: absolute; background: rgba(0, 0, 0, 0.6); z-index: 5; top: 0; left: 0; bottom: 0; right: 0; padding: 60px 20px 0 20px; } .popup-module.show { display: block; } .popup-module.hide { display: none; } .popup-module .popup-body { position: relative; background: #fff; max-width: 400px; margin: auto; border-radius: 5px 5px 5px 5px; z-index: 0; } .popup-module .popup-body:after { content: ''; display: block; position: absolute; background: rgba(0, 0, 0, 0.8); transform: rotate(-3deg); height: 130px; width: 100%; max-width: 300px; top: 0px; border-radius: 5px; z-index: -2; left: -5px; } .popup-module p { margin: 0 0 10px 0; } .popup-module p:last-child { margin: 0; } .popup-module .title { padding: 36px 10px 10px 10px; background: #fff; border-radius: 5px 5px 0 0; font-size: 1.3em; color: #4caf50; z-index: 0; text-align: center; } .popup-module .text { padding: 0px 40px 10px 40px; text-align: center; background: #fff; z-index: 0; line-height: 1.6em; color: #666; } .popup-module .btn-wrap { position: relative; display: block; text-align: center; padding: 0 10px 10px 10px; background: #fff; z-index: 0; border-radius: 0 0 5px 5px; } .popup-module .close { top: 10px; position: absolute; right: 10px; background: transparent; border: 0; font-size: 1em; color: #ccc; } .popup-module .btn { position: relative; display: inline-block; border-radius: 5px; margin-bottom: 5px; background: #f1f1f1; color: #4caf50; font-size: 1.2em; padding: 10px 20px; width: 100%; border: 0; } .popup-module .btn-ok {background: #4caf50; color: #fff;} .popup-module .btn:last-child { margin-bottom: 0; } .popup-module .popup-icon { width: 60px; height: 60px; background: #ccc; left: 0; right: 0; display: block; position: absolute; margin: 0 auto; border-radius: 50%; top: -30px; border: 4px solid #fff; } /* Popup warning settings */ .popup-module.warning .popup-icon { background: #ff27ec; } .popup-module.warning .popup-icon:before { content: '!'; text-align: center; position: absolute; left: 20px; top: -30px; transform: rotate(20deg); color: #fff; font-size: 5em; top: -27px; } .popup-module.warning .title { color: #ff27ec; } .popup-module.warning .btn-ok { background: #ff27ec; } /* Popup info settings */ .popup-module.info .popup-icon { background: #ffc107; } /* ANIMATION */ @-webkit-keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; -webkit-animation-duration: 0.8s; animation-duration: 0.8s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } Desde já agradeço pelo apoio.
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.