Jump to content
juliosena

Banner flutuante

By juliosena, in HTML e CSS

Recommended Posts

juliosena    2

juliosena
Posted

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

Share this post

Link to post
Share on other sites

marsolim    110

marsolim
Posted

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

Share this post

Link to post
Share on other sites

marsolim    110

marsolim
Posted

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.

  • +1 1

Share this post

Link to post
Share on other sites

marsolim    110

marsolim
Posted

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.

  • +1 1

Share this post

Link to post
Share on other sites

marsolim    110

marsolim
Posted

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

Share this post

Link to post
Share on other sites

juliosena    2

juliosena
Posted

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);
}

 

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Go To Topic Listing HTML e CSS

  • Similar Content

    • guialacerda
      Banner em POPUP
      By guialacerda
      Alguem me recomenda um plugin para colocar popups no wordpress? Vou usar imagens, tipo vou por uns 4 banners popup aleatórios.
    • thiago wendel
      banner tipo carrossel automatico
      By 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

    • Fernando Mello
      Banner Rotativo
      By 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>  
    • ianluis
      Como colocar propagandas no player de videos
      By ianluis
      Procurei por toda a internet e não tem nada que ensine a como colocar propaganda dentro de um player de vídeo não e vídeo do youtube e sim player de vídeo no meu caso e de filme, estou construindo um site de filmes e animes e preciso colocar anúncios para poder pagar a hospedagem e melhorar a qualidade do site para ter mais acessos me ajudem por favor já procurei em toda internet e não tem niguem ensinando só videos de como colocar no youtube e não tem como já que eu não tenho nenhum vídeo armazenando no computador apenas links.
    • wcordeiroo
      erro ao publicar banner html em site
      By 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
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.

  I accept