Jump to content
Camilavip

Flip de rotação invade o rodapé

By Camilavip, in HTML e CSS

Recommended Posts

Camilavip    0

Camilavip
Posted

Oi, tenho um flip para virar a imagem, bem pequeno e funcional, mas ao colocar um rodapé, ele simplesmente invade esse rodapé

Creio que tem haver alguma coisa com o position: absolute, mas não entendo nada de css

  

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
   
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
  </head>
  <body>

    <!-- CSS DO FLIP -->
 <style> 
  .flip-container:hover .flipper{
    transform: rotateY(180deg);
    /* se quiser uma animação na vertical,
    troque por rotateX(180deg)
    */
}
.flipper{
    width: 100%;
    height: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}
.front, .back{
    position: absolute;
    width: 100%;
    height: 100%;
}
.back{
    transform: rotateY(180deg);
}

</style>
    
      
  <center> 
  <div class="flip-container">
  <div class="flipper">
    <div class="front">
      <img src="https://d3mwk3f7r8fv9u.cloudfront.net/images/zohO24tyN2WB8etR3nhZPvhf.png" />
    </div>
    <div class="back">
      <img src="https://d3mwk3f7r8fv9u.cloudfront.net/images/XkAkTVqVPbLB3cK5njqdun66.png" />
    </div>
  </div>
</div>



                                <!-- AQUI COMEÇA O RODAPÉ -->

<!-- CSS DO RODAPÉ -->
<style>
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  color: #d9d9d9;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
.content1{
  position: relative;
  margin: 130px auto;
  text-align: center;
  padding: 0 20px;
}
.content1 .text{
  font-size: 2.5rem;
  font-weight: 600;
  color: #202020;
}
.content1 .p{
  font-size: 2.1875rem;
  font-weight: 600;
  color: #202020;
}
footer{
  position: fixed;
  bottom: 0px;
  width: 100%;
  background: #111;
}
.main-content{
  display: flex;
}
.main-content .box{
  flex-basis: 50%;
  padding: 10px 20px;
}
.box h2{
  font-size: 1.125rem;
  font-weight: 600;
  text-transform: uppercase;
}
.box .content{
  margin: 20px 0 0 0;
  position: relative;
}
.box .content:before{
  position: absolute;
  content: '';
  top: -10px;
  height: 2px;
  width: 100%;
  background: #1a1a1a;
}
.box .content:after{
  position: absolute;
  content: '';
  height: 2px;
  width: 15%;
  background: #f12020;
  top: -10px;
}
.left .content p{
  text-align: justify;
}
.left .content .social{
  margin: 20px 0 0 0;
}
.left .content .social a{
  padding: 0 2px;
}
.left .content .social a span{
  height: 40px;
  width: 40px;
  background: #1a1a1a;
  line-height: 40px;
  text-align: center;
  font-size: 18px;
  border-radius: 5px;
  transition: 0.3s;
}
.left .content .social a span:hover{
  background: #f12020;
}
.center .content .fas{
  font-size: 1.4375rem;
  background: #1a1a1a;
  height: 45px;
  width: 45px;
  line-height: 45px;
  text-align: center;
  border-radius: 50%;
  transition: 0.3s;
  cursor: pointer;
}
.center .content .fas:hover{
  background: #f12020;
}
.center .content .text{
  font-size: 1.0625rem;
  font-weight: 500;
  padding-left: 10px;
}
.center .content .phone{
  margin: 15px 0;
}
.right form .text{
  font-size: 1.0625rem;
  margin-bottom: 2px;
  color: #656565;
}
.right form .msg{
  margin-top: 10px;
}
.right form input, .right form .msgForm{
  width: 100%;
  font-size: 1.0625rem;
  background: #151515;
  padding-left: 10px;
  border: 1px solid #222222;
}
.right form input:focus,
.right form .msgForm:focus{
  outline-color: #3498db;
}
.right form input{
  height: 35px;
}
.right form .btn{
  margin-top: 10px;
}
.right form .btn button{
  height: 40px;
  width: 100%;
  border: none;
  outline: none;
  background: #f12020;
  font-size: 1.0625rem;
  font-weight: 500;
  cursor: pointer;
  transition: .3s;
}
.right form .btn button:hover{
  background: #000;
}
.bottom center{
  padding: 5px;
  font-size: 0.9375rem;
  background: #151515;
}
.bottom center span{
  color: #656565;
}
.bottom center a{
  color: #f12020;
  text-decoration: none;
}
.bottom center a:hover{
  text-decoration: underline;
}
@media screen and (max-width: 900px) {
  footer{
    position: relative;
    bottom: 0px;
  }
  .main-content{
    flex-wrap: wrap;
    flex-direction: column;
  }
  .main-content .box{
    margin: 5px 0;
  }
}
</style> 



 <div class="content1">
      <div class="text">
Fully Responsive Footer Section</div>
<div class="p">
HTML and CSS (Flexbox)</div>
</div>
<footer>
      <div class="main-content">
        <div class="left box">
          <h2>
About us</h2>
<div class="content">
            <p>
CodinNepal is a YouTube channel where you can learn web designing, web development, ui/ux designing, html css tutorial, hover animation and effects, javascript and jquery tutorial and related so on.</p>
<div class="social">
              <a href="https://facebook.com/coding.np"><span class="fab fa-facebook-f"></span></a>
              <a href="#"><span class="fab fa-twitter"></span></a>
              <a href="https://instagram.com/coding.np"><span class="fab fa-instagram"></span></a>
              <a href="https://youtube.com/c/codingnepal"><span class="fab fa-youtube"></span></a>
            </div>
</div>
</div>
<div class="center box">
          <h2>
Address</h2>
<div class="content">
            <div class="place">
              <span class="fas fa-map-marker-alt"></span>
              <span class="text">Birendranagar, Surkhet</span>
            </div>
<div class="phone">
              <span class="fas fa-phone-alt"></span>
              <span class="text">+089-765432100</span>
            </div>
<div class="email">
              <span class="fas fa-envelope"></span>
              <span class="text">abc@example.com</span>
            </div>
</div>
</div>
<div class="right box">
          <h2>
Contact us</h2>
<div class="content">
            <form action="#">
              <div class="email">
                <div class="text">
Email *</div>
<input type="email" required>
              </div>
<div class="msg">
                <div class="text">
Message *</div>
<!-- NOTE: Due to more textarea tag I got an error. So I changed the textarea name to changeit. Please change that changeit name to textarea -->
<changeit id=".msgForm" rows="2" cols="25" required></changeit> <!-- replace this changeit name to textarea -->
              
              <br />
<div class="btn">
<button type="submit">Send</button>
              </div>
<div class="bottom">
<center>
          <span class="credit">Created By <a href="https://youtube.com/c/codingnepal">CodingNepal</a> | </span>
          <span class="far fa-copyright"></span> 2020 All rights reserved.
        </center>
</div>

 </body>
</html>

 

Share this post

Link to post
Share on other sites

Sherlock02    0

Sherlock02
Posted

Olá,

Basta acrescentar uma div "container" com o tamanho que deseja e o position relative.

  

<div class="container">
  <center> 
  <div class="flip-container">
  <div class="flipper">
    <div class="front">
      <img src="https://d3mwk3f7r8fv9u.cloudfront.net/images/zohO24tyN2WB8etR3nhZPvhf.png" />
    </div>
    <div class="back">
      <img src="https://d3mwk3f7r8fv9u.cloudfront.net/images/XkAkTVqVPbLB3cK5njqdun66.png" />
    </div>
  </div>

</div>
      </center> 
</div><!-- container relative -->
    
.container{
  width: 500px;
  max-width: 100%;
  height: 450px;
  margin: 0 auto;
  display: block;
  position: relative;
  background: gray;
  }

O position absolute tem que ficar dentro do relative. Isso acontece porque o "absoluto" precisa de um ponto de referência.

Aqui tem a explicação: https://tableless.com.br/propriedade-position-do-css.

 

Abraços!

 

 

Share this post

Link to post
Share on other sites

Camilavip    0

Camilavip
Posted
5 horas atrás, Sherlock02 disse:

Olá,

Basta acrescentar uma div "container" com o tamanho que deseja e o position relative.

  


<div class="container">
  <center> 
  <div class="flip-container">
  <div class="flipper">
    <div class="front">
      <img src="https://d3mwk3f7r8fv9u.cloudfront.net/images/zohO24tyN2WB8etR3nhZPvhf.png" />
    </div>
    <div class="back">
      <img src="https://d3mwk3f7r8fv9u.cloudfront.net/images/XkAkTVqVPbLB3cK5njqdun66.png" />
    </div>
  </div>

</div>
      </center> 
</div><!-- container relative -->
    

.container{
  width: 500px;
  max-width: 100%;
  height: 450px;
  margin: 0 auto;
  display: block;
  position: relative;
  background: gray;
  }

O position absolute tem que ficar dentro do relative. Isso acontece porque o "absoluto" precisa de um ponto de referência.

Aqui tem a explicação: https://tableless.com.br/propriedade-position-do-css.

 

Abraços!

 

 

Mas dessa forma ele me obriga com o container não tomar todo o espaço da tela, e fico limitada a definir tamanhos em pixels, quando  troco os pixels por porcentagens, ele volta ao mesmo problema

Share this post

Link to post
Share on other sites

Sherlock02    0

Sherlock02
Posted

Olá,

Eu não entendi exatamente o que você quis dizer, porque basta trocar o código por width: 100%. 

  .container{
  width: 100%;
  height: 450px;
  margin: 0 auto;
  display: block;
  position: relative;
  background: gray;
  }

 

Aqui está o exemplo do código trocando somente o width de pixels para porcentagem ocupando a largura total, e ainda acrescentei um header, só para você ver como ficaria:

Redimensione a tela para ver a versão mobile e desktop.

https://jsfiddle.net/7s40zkja

 

O único "problema" do seu código é ter colocado um footer fixo (na verdade não é um problema, só é estranho). Eu pensei que fosse sua preferência, mas agora acho que entendi que é a isso que você estava se referindo.

Substitua esse código: 

footer{
  position: fixed;
  bottom: 0px;
  width: 100%;
  background: #111;
}

Por esse: 

footer{
  position: relative;
  bottom: 0px;
  width: 100%;
  background: #111;
}

 E o resultado será esse: https://jsfiddle.net/x4tfv98m

 

Seria isso o que você precisava?

Share this post

Link to post
Share on other sites

Camilavip    0

Camilavip
Posted
Em 05/07/2020 at 10:07, Sherlock02 disse:

Olá,

Eu não entendi exatamente o que você quis dizer, porque basta trocar o código por width: 100%. 


  .container{
  width: 100%;
  height: 450px;
  margin: 0 auto;
  display: block;
  position: relative;
  background: gray;
  }

 

Aqui está o exemplo do código trocando somente o width de pixels para porcentagem ocupando a largura total, e ainda acrescentei um header, só para você ver como ficaria:

Redimensione a tela para ver a versão mobile e desktop.

https://jsfiddle.net/7s40zkja

 

O único "problema" do seu código é ter colocado um footer fixo (na verdade não é um problema, só é estranho). Eu pensei que fosse sua preferência, mas agora acho que entendi que é a isso que você estava se referindo.

Substitua esse código: 


footer{
  position: fixed;
  bottom: 0px;
  width: 100%;
  background: #111;
}

Por esse: 


footer{
  position: relative;
  bottom: 0px;
  width: 100%;
  background: #111;
}

 E o resultado será esse: https://jsfiddle.net/x4tfv98m

 

Seria isso o que você precisava?

Tento e não da, o flip continua invadindo o rodapé

Share this post

Link to post
Share on other sites

Sherlock02    0

Sherlock02
Posted

Olá,

Teria como você tirar um print de como está no seu site de testes e outra imagem representando o que você gostaria de fazer?

Porque se você realmente tentar deixar o footer fixed, é impossível ele não invadir, porque é como colocar um menu fixo no topo. A função dele é ficar sobre qualquer outro elemento da página.

 

Agora você diz que o flip invade o rodapé, e não o rodapé que invade o flip, e no exemplo que te enviei isso não acontece. Cada um está em seu próprio bloco.

Share this post

Link to post
Share on other sites

Camilavip    0

Camilavip
Posted
2 horas atrás, Sherlock02 disse:

Olá,

Teria como você tirar um print de como está no seu site de testes e outra imagem representando o que você gostaria de fazer?

Porque se você realmente tentar deixar o footer fixed, é impossível ele não invadir, porque é como colocar um menu fixo no topo. A função dele é ficar sobre qualquer outro elemento da página.

 

Agora você diz que o flip invade o rodapé, e não o rodapé que invade o flip, e no exemplo que te enviei isso não acontece. Cada um está em seu próprio bloco.

Resolvi o problema, alterei o css original do flip 

 <!-- CSS DO FLIP -->
 <style> 
  .flip-container:hover .flipper{
    transform: rotateY(180deg);
    /* se quiser uma animação na vertical,
    troque por rotateX(180deg)
    */
}
.flipper{
    width: 100%;
    height: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}
.front, .back{
    position: absolute;
    width: 100%;
    height: 100%;
}
.back{
    transform: rotateY(180deg);
}

</style>

Por esse abaixo, agora tudo está resolvido. 

<style>
.flip-container {
  perspective: 1000;
}
.flipper {
  transform-style: preserve-3d;
  display: flex;
  align-items: stretch;
  width: 100%;
  transition: transform 0.6s;
  will-change: transform;
}
.flip-container:hover .flipper {
  transform: rotateY(180deg);
}
.front, .back {
  width: 100%;
  flex: 0 0 auto;
  backface-visibility: hidden;
}
.back {
  transform: rotateY(180deg);
  margin-left: -100%;
}

</style>

Realmente o problema estava no position: absolute

Share this post

Link to post
Share on other sites

Sherlock02    0

Sherlock02
Posted
4 horas atrás, Camilavip disse:

Resolvi o problema, alterei o css original do flip 


 <!-- CSS DO FLIP -->
 <style> 
  .flip-container:hover .flipper{
    transform: rotateY(180deg);
    /* se quiser uma animação na vertical,
    troque por rotateX(180deg)
    */
}
.flipper{
    width: 100%;
    height: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}
.front, .back{
    position: absolute;
    width: 100%;
    height: 100%;
}
.back{
    transform: rotateY(180deg);
}

</style>

Por esse abaixo, agora tudo está resolvido. 


<style>
.flip-container {
  perspective: 1000;
}
.flipper {
  transform-style: preserve-3d;
  display: flex;
  align-items: stretch;
  width: 100%;
  transition: transform 0.6s;
  will-change: transform;
}
.flip-container:hover .flipper {
  transform: rotateY(180deg);
}
.front, .back {
  width: 100%;
  flex: 0 0 auto;
  backface-visibility: hidden;
}
.back {
  transform: rotateY(180deg);
  margin-left: -100%;
}

</style>

Realmente o problema estava no position: absolute

 

Que bom que conseguiu!

Abraços!

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

    • Jack Oliveira
      [RESOLVIDO] Deixando apenas o bg-img opacity
      By Jack Oliveira
      Ola boa noite
       
      Galera preciso de uma ajuda de vocês aqui..
       
      Estou tentando deixa a imagem de fundo do header com uma mascara negra transparente porem fica até a logo do site transparente e com mascara branca
      que não é o meu objetivo..
       
      e deixa apenas a imagem de fundo transparente e negra
       
      Fiz no css da seguinte forma.
       
      <style> .bg-img{ background-image: url('assets/bg/banner-fundo.png'); background-size: cover; position:relative; background-color: rgba(242,17,125,0.91); filter:opacity(alpha=60); -moz-opacity:0.9; opacity:0.6; box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.42), 0 0px 20px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2); transition: 0.3s; } </style> A parte do html esta assim
       
      <header class="bg-img"> <div class="container"> <div class="row"> <div class="col-lg-2 col-md-4"> <a href="./" class="logo" style="border: 5px solid #ffffff; background-color: rgba(242,17,125,0.91)"> <img src="assets/logo/minha-logo.png" alt="" title=""> </a> </div> <div class="col-lg-9 col-md-8 dados"> <h1 id="wa7_font">Minha Empresa</h1> <h2 id="wa7_font">Minha Categoria</h2> <br> <div class="telefones"> <a href="tel:556699999999" class="fixo"> <i class="fas fa-phone-volume"></i> <span>(66) 9999-9999</span> </a> <a href="tel:5566999999999" class="celular"> <i class="fas fa-mobile-alt"></i> <span>(66) 9.9999-9999</span> </a> </div> <div class="endereco" id="wa7_font_letra"> <p> <i class="fas fa-map-marker-alt"></i> Rua: Palmas, 2345, Centro - Sorriso/MT </p> </div> </div> </div> </div> </header> Fico no guardo da ajuda ai
    • Jack Oliveira
      Pegar Informações em Json de outro Dominio
      By Jack Oliveira
      Ola pessoal boa noite me veio uma duvida sobre Informações em JSON
      bom tenho um dominio principal que contem todas as informações 
      deste dominio quero uma forma que outras site receba as notificações de novos post etc...
      Ex: meudominiomaster.com
      dominiocliente.com
       
      meu html e o json esta assim
       
      <?php //ESTE FICARAR NO PAINEL DO CLIENTE $json = file_get_contents("https://meusitemaster.com/sites-novos.php"); $json_output = json_decode($json, true); foreach($json_output as $InfoJson){ $UrlJson=''.ConfigPainel(url_base_json.'; } ?> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6" style="background-color:transparent; margin-bottom:25px;"> <div class="card"> <div class="card-header white"><strong> <?= $InfoJson['titulo']; ?> <span class="btn btn-primary float-right">Novo na Loja</span></strong></div> <div class="card-body p-0"> <img class="img-fluid" src="<?= $UrlJson; ?>assets/imagens/<?= $InfoJson['banner']; ?>" /> <ul class="list-group list-group-flush no-b"> <li class="list-group-item"> <i class="icon icon-calendar text-blue"></i>Data: <?= $InfoJson['data']; ?> </li> </ul> </div> <div class="card-footer white text-center"> <a class="btn btn-sm btn-primary tooltips" target="_blank" href="_blank" data-tooltip="Comprar <?= $InfoJson['titulo']; ?>"><i class="icon-shopping_cart"></i></a> </div> </div> </div> <?php }} ?> Minha duvida é teria outra forma de fazer isso em json?? ou seja mais profissional?
    • marceloDiegues
      Custo e Tecnologia.
      By marceloDiegues
      Olá, amigos.
      Por favor,  me ajude com a seguintes perguntas.
       
      Qual a complexidade de um projeto desse?
      Qual o preçp de um projeto desse tipo?
       
      Quero contratar algum profissional para criar um site que tenha as seguintes funcionabilidades:
       
      1- Cadastro de usuário;
      2- Login e senha;
      3- O site seria muito parecido com o www.qconcursos.com, o usuário resolveria questões online.
      Contudo, haveria a possibilidade de criar salas tipo aqueles bate-papo da &nbsp;UOL.
      Então, o usuário criaria salas de estudos, em que , resolveria questões e conseguiria se comunicar por chat com usuários que estejam na mesma sala.
       
      Exemplo em anexo:
       
       
       
       

    • JohnDann
      [DÚVIDA] Ads desaparece ao carregar o blog
      By JohnDann
      Galera, estou com um problema chato em um código HTML aqui.
      Toda vez que a página abre, o ADS só fica visível por poucos segundos,
      e logo desaparece.
      É um template free que eu peguei da internet.
      Podem me ajudar?
      Não consegui anexar o arquivo XML, então vou deixar o link aqui para vocês.
      https://testandoblog03a.blogspot.com
    • lezão
      Transformar table em div
      By lezão
      Ola pessoal!
      Td bem com vcs?
       
      Estou tentando fazer esse item ficar em css e naun estou conseguindo alguem pode me ajudar?
      <table width="75%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="15%" height="35"><b>Moda da Casa</b></td> <td width="55%" style="border-bottom: dotted; border-width: 1px 3px 3px 1px; border-color: black black #000000 #000000"></td> <td width="7%"><b>R$ 25,00</b></td> <td width="3%" rowspan="2" align="left"><img src="https://clipartart.com/images/delete-button-clipart.jpg" width="75px" heigth="50px"/></td> </tr> <tr> <td colspan="3" height="35"> <div class="label-float"> <input type="text" value="Molho de tomate, mussarela, calabresa ralada, catupiry, alho tostado, cebola, azeitonas e oregano." size="100%" placeholder="" required=""> </div> </td> </tr> </table> obrigado!
       
       
       
×

Important Information

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

  I accept