Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

juliosena

Banner flutuante

Recommended Posts

Boa tarde pessoal,

 

Eu gostaria de fazer um banner que aparece na frente de várias páginas, mas não sei o nome para encontrar como faz. Se alguém souber o nome ou como é feito.

 

O exemplo do banner é esse de cadastro que abre na hora que você abre esse site: https://englishlive.ef.com/pt-br/

 

Está em anexo a imagem para vocês verem.

 

Desde já agradeço

banner.jpg

Compartilhar este post


Link para o post
Compartilhar em outros sites

isso pode ser feito dentro de uma div de altura e largura 100% e inicialmente com display:none pra ela ficar oculta e bota o display:block ou display:inline-block quando precisar dela. e pra ficar semitransparente basta usar background-color:rgba(0,0,0,0.7) por exemplo

Compartilhar este post


Link para o post
Compartilhar em outros sites

o problema do popup é que eles costumam ser bloqueados e muitas vezes acaba dependendo do usuário permitir e em alguns casos eles nem vê o navegador informar que o site tá tentando abrir um pop up pra ir lá permitir e acaba achando que a coisa não tá funcionando.

Compartilhar este post


Link para o post
Compartilhar em outros sites

essa página de exemplo passada no link mesmo usa uma div e to até dando uma olhada no código fonte da página aqui e pesquisando os termos que aparecem dentro dela achei o nome da classe da div e depois pesquisando os css incorporados na página achei o que tem a classe dela lá onde a mesma tem o atributo display:none como falei hehehe se tu der uma estudada no código fonte e abrir os csss incorporados talvez ajude a entender. esse é o link do arquivo css que tá a classe dessa div e o nome da classe é lgtbx-text procura ela lá com um Alt+F que vai achar os atributos dela.

Compartilhar este post


Link para o post
Compartilhar em outros sites

isso pode ser feito com session tipo

 

if(!isset($_SESSION['primeira_vez'])){
    // mostra a janelinha da div aqui
    $_SESSION['primeira_vez'] = '';
}

 

o script está dizendo que se a session primeira_vez ainda não existir, mostra a janelinha e cria a session. na próxima abertura a session já vai existir e aí não exibe mais. nesse caso display deve ser block ou inline-block ou talvez nem precisa dele só não deve ser none

Compartilhar este post


Link para o post
Compartilhar em outros sites

Só para concluir a pergunta, fiz aqui e deu certinho, fiz igual o Marsolim recomendou:

 

HTML:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Menu Lateral com CSS</title>
	<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="_css/style.css">
	<script src="_js/CodigoMenu.js"></script>
</head>
<body>
	
<input type="checkbox" id="check">
<label id="botaoAbrir" for="check"></label>


</body>
</html>

CSS:

body {
	margin: 0px;
	padding: 0px; 
}

#check{
	display: none;
}

#check:checked ~ #botaoAbrir {
	
	-webkit-transform: translate(0px, -2080px);
	   -moz-transform: translate(0px, -2080px);
	    -ms-transform: translate(0px, -2080px);
	     -o-transform: translate(0px, -2080px);
	        transform: translate(0px, -2080px);
}


#botaoAbrir{
	
	background-repeat: no-repeat;
	background-position: 50%;
	background-size: contain;
	background-image: url("../_imagens/4fiboTalks.jpg");
	curso: pointer;
	width: 100%;
	height: 100%;
	position: fixed;
	background-color: rgba(0, 0, 0, 0.8);
	-webkit-transition: 1.0s;
	   -moz-transition: 1.0s;
	    -ms-transition: 1.0s;
	     -o-transition: 1.0s;
	        transition: 1.0s;
}

#botaoAbrir:HOVER{
	background-color: rgba(0, 0, 0, 0.9);
}

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por guialacerda
      Alguem me recomenda um plugin para colocar popups no wordpress? Vou usar imagens, tipo vou por uns 4 banners popup aleatórios.
    • Por thiago wendel
      boa tarde, sou novo na área e estou com um problema no site que preciso colocar o banner da home em modo carrossel automático para mudar sozinho
      o site e www.edicoescnbb.com.br , segue em anexo também a imagem

    • Por Fernando Mello
      Olá boa tarde !
       
      Tenho um código em HTML que eu consegui colocar 2 imagens rotativas mas precisava de no mínimo 5... não estou conseguindo aumentar!
      Alguém poderia me ajudar?
       
      Segue o código.
      <section id="elemento-slider" class="intro-block full-slider no-sep cover-bg" data-selector="section" style="background: none 0% 0% repeat scroll rgb(221, 221, 221);"> <div id="carousel-full-header" class="carousel slide carousel-full" data-ride="carousel"> <div role="listbox" class="carousel-inner"> <div class="item"> <div class="container section-padding"> <div class="row"> <div class="col-md-12 editContent" data-selector=".col-md-12"> <img class="img-responsive center-block" src="https://blob.llimages.com/machine-user-images/Banner_Verdade-Letal-img-1588091-20190701125809.jpg" style="padding-bottom: 5%; width: auto; height: auto; border-radius: 0px; border-style: none; border-width: 1px;" alt="" data-selector="img" width="640" height="323"> </div> </div> </div> </div> <div class="item active"> <div class="container section-padding"> <div class="row"> <div class="col-md-12 editContent" data-selector=".col-md-12"> <img class="img-responsive center-block" src="https://blob.llimages.com/machine-user-images/Banner-Contagem-Regressiva-img-1588091-20190701125802.jpg" style="padding-bottom: 5%; width: auto; height: auto; border-radius: 0px; border-style: none; border-width: 1px;" alt="" data-selector="img" width="640" height="323"></div> </div></div></div></div></div></section> <a role="button" class="left carousel-control" href="#carousel-full-header" data-slide="prev"> <span class="arrow" data-selector=".carousel-control .arrow"></span> </a> <a role="button" class="right carousel-control" href="#carousel-full-header" data-slide="next"> <span class="arrow" data-selector=".carousel-control .arrow"></span> </a>  
    • Por wcordeiroo
      fala galera, sou aqui no forum e novo em html e css também, estou com um problema, espero que alguem consiga me ajudar
      ontem fiz meu primeiro código html/css para um banner de um site, ao visualizar o banner no navegador ele esta correto, mas quando eu publíco o código fonte na minha plataforma que gerenciar o site no espaço que ele deve aparecer, acaba se desconfigurando todo o arquivo, vou colar o codigo aqui e o print dele publicado para verem
       
      <div id=centro align="center"> <div class="container"> <div class="Banner Menu clearfix"> <a href="https://www.armazemk.com.br/tamanco-verniz-nude-0256" target="_blank" title="meu 35"><img src="https://www.armazemk.com.br/img/2019/05/banner/19360/tamanco.jpg" alt="tamanco"/> </a> <h1>meu 35.</h1> <h2>Frete Grátis Sul e Sudeste</h2> <h3>Tamanco Nude</h3> </div> </div> </div> <style><!-- @charset "utf-8"; /* CSS Document */ body { margin-top: 0; margin-left: 0; margin-right: 0; margin-bottom: 0; } .container { width: 1180px; height: 277px; background-color: #F2F2F2; overflow: hidden; } h1 { position: absolute; font-family: times new Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif"; font-weight: lighter; font-size: 70px; text-align: center; margin-top: -250px; margin-left: 220px; color: #7F5428; } h2 { position: absolute; font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; font-weight: lighter; font-size: 18px; text-align: center; margin-top: -50px; margin-left: 200px; color: #7F5428; } h3 { position: absolute; font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; font-weight: lighter; font-size: 18px; text-align: center; margin-top: -50px; margin-left: 900px; color: #7F5428; } img { mix-blend-mode: multiply; width: 350px; height: 350px; margin-left: 400px; margin-top: -55px; } --></style>  
      PRINT dele publicado:

       
       
      Exemplo de como deve ficar:

       
       
      espero que consigam me ajudar, ontem pesquisei muito sobre isso, e nao encontrei nada.
       
      valeu
    • Por brunojs
      Boa tarde !! estou tentando colocar um banner nesse espaço branco que eu marquei 
      mais não estou conseguindo pois tem que colocar pelo codigo css eu não estou conseguindo alguém 
      pode me ajudar ? segue o codigo css logo abaixo da imagem 

       
      Codigo é esse 
       
      body

      background:url(images/bg.gif) repeat-y center #FFFFFF;
      margin:auto;
      font-family: Arial, Verdana, Helvetica, sans-serif;
      font-size:11px;
      color:#333333;
      }
      h1{
      font-size:15px;
      color:#6C0008;
      padding:5px;
      margin:3px;
      font-weight:normal;
      }
      h2{
      font-size:13px;
      color:#666666;
      margin:0px;
      padding:3px;
      }
      h3{
      font-size:14px;
      color:#666666;
      margin:0px;
      padding:3px;
      }
      h4{
      font-size:12px;
      color: #CE6700;
      margin:0px;
      padding:3px;
      font-weight:normal;
      }
      .clear {
      clear:both;
      overflow:hidden;
      height:4px;
      }
      #main_content{
      width:930px;
      height:auto;
      margin:auto;
      background-color:#FFFFFF;
      }
      #top_banner{
      width:930px;
      height:150px;
      background:url(images/banner.jpg) no-repeat center;
      }
      #center_banner{
      width:930px;
      height:200px;
      background:url(images/bannerinox.gif) no-repeat center;
      }
      #center_banner_content{
      width:400px;
      height:auto;
      float:left;
      padding:55px 0 0 20px;
      }
      #learn_more{
      width:400px;
      height:50px;
      clear:both;
      float:left;
      padding-top:10px;
      }
      #learn_more a{
      padding:6px;
      margin:0 0 0 80px;
      text-decoration:none;
      color:#000000;
      font-size:12px;
      border:1px  #CCCCCC solid;
      }
      #learn_more a:hover{
      padding:6px;
      margin:0 0 0 80px;
      color: #666666;
      border:1px  #999999 solid;
      }
      #page_content{
      width:930px;
      height:auto;
      background-color:#FFFFFF;
      }
      /*------top menu---------*/
      ul.menu {
      list-style-type:none; float:right; display:block; width:500px; height:18px; 
      clear:both; margin-top:100px; padding:0;}
      ul.menu li {
      display:inline;}
      a.nav:link, a.nav:visited {
      display:block; float:left; padding:4px 11px 0 11px; margin:0;width: auto; height:18px; text-align:center; line-height:20px; font-weight:bold; font-size:12px;
      text-decoration:none; color:#562231;}
      a.nav:hover {
      display:block; float:left; padding:4px 11px 0 11px; margin:0;width: auto; height:18px; text-align:center; line-height:20px;
      text-decoration:none;  color:#562231; border-bottom:1px #562231 dashed;}
      /*------left section-----*/
      #left_section{
      width:300px;
      float:left;
      padding:0 0 10px 30px;
      }
      .left_box_border{
      width:250px;
      height:auto;
      border:1px #CCCCCC solid;
      padding:2px;
      margin-top:15px;
      }
      .left_box{
      width:250px;
      height:auto;
      background:url(images/box.jpg) no-repeat top;
      padding-top:10px;
      }
      #login{
      padding:10px;
      }
      .input{
      width:140px;
      height:12px;
      font-size:10px;
      }
      .submit{
      float:right;
      margin-right:30px;
      margin-top:5px;
      }
      img.pic{
      float:left;
      padding:10px;
      }
      .title{
      font-size:14px;
      font-weight:bold;
      color:#7B0E10;
      }
      .title a{
      text-decoration:none;
      font-weight:bold;
      color:#7B0E10;
      }
      .content{
      padding:5px;
      text-align:justify;
      }
      /*------right section-----*/
      #right_section{
      width:600px;
      height:auto;
      float:left;
      }
      .right_box{
      margin:20px 10px 10px 0;
      }
      img.pic_border{
      float:left;
      padding:2px;
      margin-right:15px;
      border:1px solid #CCCCCC;
      }
      .title_small{
      font-size:12px;
      font-weight:bold;
      color: #000000;
      }
      #right_box_1{
      width:250px;
      height:280px;
      float:left;
      margin:10px 1px 10px 10px;
      border-right:3px #B3B5B8 solid;
      }
      #right_box_2{
      width:280px;
      height:280px;
      float:left;
      margin:10px 5px 10px 1px;
      padding-left:12px;
      border-left:1px  #CCCCCC solid;
      }
      .news_box{
      padding:10px 0 0 0;
      clear:both;
      }
      img.pic_news{
      float:left;
      padding:0px 10px 10px 10px;
      }
      .news_submenu{
      clear:both;
      float:left;
      padding-top:5px;
      margin-left:10px;
      border-bottom:1px #CCCCCC solid;
      }
      .news_link{
      float:left;
      padding-right:30px;
      }
      .news_link a{
      text-decoration:none;
      color:#999999;
      }
      .news_link a:hover{
      text-decoration:none;
      color:#000;
      }
      /*---------services---------*/
      ul.services {
      list-style-type:none; float:left; display:block; width:auto; height:20px; 
      margin:0px; padding:10px 0 0 2px;}
      ul.services li {
      display:inline;}
      a.nav_services:link, a.nav_services:visited {
      display:block; padding:1px 0 0 14px; margin:2px;width: auto; height: auto; text-align:left; line-height:17px;
      text-decoration:none; background:url(images/bullet.png) no-repeat left; color:#000;}
      a.nav_services:hover {
      display:block; padding:1px 0 0 14px; margin:2px;width:auto; height:auto; text-align:left; line-height:17px;
      text-decoration:none; background:url(images/bullet_a.png) no-repeat left; color:#000000;}
      /*-------footer-----*/
      #footer{
      width:930px;
      height:70px;
      clear:both;
      background-color:#D7D8D2;
      }
      #copyrights{
      width:350px;
      color: #666666; 
      font-size:10px;
      float:left;
      padding:10px;
      }
      #madeby{
      width:200px;
      height:60px;
      float:right;
      text-align:center;
      padding-top:10px;
      }
      #madeby a{
      text-decoration:none;
      color:#666666;
      }
      /*---------footer menu---------*/
      ul.footer_menu {
      list-style-type:none; float:left; display:block; width:auto; height: auto;  margin:0px; padding:3px 0 0 10px;}
      ul.footer_menu li {
      display:inline;}
      a.nav2:link, a.nav2:visited {
      display:block; float:left; padding:4px 0 0 5px; margin:2px;width: auto; height:20px; text-align:center; line-height:16px;
      text-decoration:none; color: #999999;}
      a.nav2:hover {
      display:block; float:left; padding:4px 0 0 5px; margin:2px;width:auto; height:20px; text-align:center; line-height:16px;
      text-decoration:none;color:#000000;}#main_content #page_content #right_section .right_box .content h2 {
          color: #F00;
      }
       
×

Informação importante

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