-2

Possuo os seguintes trechos de código:

HTML:

<h1>CSS 3D FLIP BOX</h1>
<h3>Flipping content to a div (Transitions and 3D Transforms)</h3>

<div class="wrapper">
      <div class="col_third">
        <div class="hover panel">
          <div class="front">
            <div class="box1">
              <p>Front Side</p>
            </div>
          </div>
          <div class="back">
            <div class="box2">
              <p>Back Side</p>
            </div>
          </div>
        </div>
        </div>

        <div class="col_third">
        <div class="hover panel">
          <div class="front">
            <div class="box1">
              <p>Front Side</p>
            </div>
          </div>
          <div class="back">
            <div class="box2">
              <p>Back Side</p>
            </div>
          </div>
        </div>
        </div>

        <div class="col_third end">
        <div class="hover panel">
          <div class="front">
            <div class="box1">
              <p>Front Side</p>
            </div>
          </div>
          <div class="back">
            <div class="box2">
              <p>Back Side</p>
            </div>
          </div>
        </div>
      </div>
     </div>

CSS:

body {
    background-color: #ecf0f1;
    margin: 20px;
    font-family: Arial, Tahoma; 
    font-size: 20px; 
    color: #666666; 
    text-align: center; 
}
p { color: #ffffff;  }

/*-=-=-=-=-=-=-=-=-=-*/
/* Column Grids */
/*-=-=-=-=-=-=-=-=-= */

.col_half { width: 49%; }
.col_third { width: 32%; }
.col_fourth { width: 23.5%; }
.col_fifth { width: 18.4%; }
.col_sixth { width: 15%; }
.col_three_fourth { width: 74.5%;}
.col_twothird{ width: 66%;}
.col_half,
.col_third,
.col_twothird,
.col_fourth,
.col_three_fourth,
.col_fifth{
    position: relative;
    display:inline;
    display: inline-block;
    float: left;
    margin-right: 2%;
    margin-bottom: 20px;
}
.end { margin-right: 0 !important; }

/*-=-=-=-=-=-=-=-=-=-=- */
/* Flip Panel */
/*-=-=-=-=-=-=-=-=-=-=- */

.wrapper{ width: 980px; margin: 0 auto;  background-color: #bdd3de; hoverflow: hidden;}

.panel {
    margin: 0 auto;
    height: 130px;  
    position: relative;
    -webkit-perspective: 600px;
    -moz-perspective: 600px;
}

.panel .front,
.panel .back {
    text-align: center;
}

.panel .front {
    height: inherit;
    position: absolute;
    top: 0;
    z-index: 900;
    text-align: center;
    -webkit-transform: rotateX(0deg) rotateY(0deg);
       -moz-transform: rotateX(0deg) rotateY(0deg);
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
    -webkit-transition: all .4s ease-in-out;
       -moz-transition: all .4s ease-in-out;
        -ms-transition: all .4s ease-in-out;
         -o-transition: all .4s ease-in-out;
            transition: all .4s ease-in-out;
}

.panel .back {
    height: inherit;
    position: absolute;
    top: 0;
    z-index: 1000;
    -webkit-transform: rotateY(-180deg);
       -moz-transform: rotateY(-180deg);
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
    -webkit-transition: all .4s ease-in-out;
       -moz-transition: all .4s ease-in-out;
        -ms-transition: all .4s ease-in-out;
         -o-transition: all .4s ease-in-out;
            transition: all .4s ease-in-out;
}
.panel.flip .front {
    z-index: 900;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
}
.panel.flip .back {
    z-index: 1000;
    -webkit-transform: rotateX(0deg) rotateY(0deg);
    -moz-transform: rotateX(0deg) rotateY(0deg);
}
.box1{
    background-color: #14bcc8;
    width: 250px;
    height: 150px;
    margin: 0 auto;
    padding: 20px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}
.box2{
    background-color: #ff7e70;
    width: 250px;
    height: 150px;
    margin: 0 auto;
    padding: 20px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

JS:

$(document).ready(function(){
        // set up hover panels
        // although this can be done without JavaScript, we've attached these events
        // because it causes the hover to be triggered when the element is tapped on a touch device
        $('.hover').hover(function(){
            $(this).addClass('flip');
        },function(){
            $(this).removeClass('flip');
        });
    });

Estou com dificuldade e gostaria de saber como juntar e salvar estes trechos em um arquivo html, para ser utilizado em um navegador.

2 Respostas 2

2

É quase só copiar/colar, e colocar nos sitios certos. Neste caso acrescentei desde <!DOCTYPE html> até </head>, e dentro da <head> coloquei os css (dentro também da tag <style>), acrescentei também a dependencia para que o JS (javascript) consiga ser executado: <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>. Dentro da tag abaixo, também <script>, coloca-se o JS que desenvolveu. E por fim fechamos a tag <body> (</body>) e a do </html>.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>YO PEDRO</title>
    <style>
      body {
        background-color: #ecf0f1;
        margin: 20px;
        font-family: Arial, Tahoma; 
        font-size: 20px; 
        color: #666666; 
        text-align: center; 
      }
      p { color: #ffffff;  }

      /*-=-=-=-=-=-=-=-=-=-*/
      /* Column Grids */
      /*-=-=-=-=-=-=-=-=-= */

      .col_half { width: 49%; }
      .col_third { width: 32%; }
      .col_fourth { width: 23.5%; }
      .col_fifth { width: 18.4%; }
      .col_sixth { width: 15%; }
      .col_three_fourth { width: 74.5%;}
      .col_twothird{ width: 66%;}
      .col_half,
      .col_third,
      .col_twothird,
      .col_fourth,
      .col_three_fourth,
      .col_fifth{
        position: relative;
        display:inline;
        display: inline-block;
        float: left;
        margin-right: 2%;
        margin-bottom: 20px;
      }
      .end { margin-right: 0 !important; }

      /*-=-=-=-=-=-=-=-=-=-=- */
      /* Flip Panel */
      /*-=-=-=-=-=-=-=-=-=-=- */

      .wrapper{ width: 980px; margin: 0 auto;  background-color: #bdd3de; hoverflow: hidden;}

      .panel {
        margin: 0 auto;
        height: 130px;  
        position: relative;
        -webkit-perspective: 600px;
        -moz-perspective: 600px;
      }

      .panel .front,
      .panel .back {
        text-align: center;
      }

      .panel .front {
        height: inherit;
        position: absolute;
        top: 0;
        z-index: 900;
        text-align: center;
        -webkit-transform: rotateX(0deg) rotateY(0deg);
           -moz-transform: rotateX(0deg) rotateY(0deg);
        -webkit-transform-style: preserve-3d;
           -moz-transform-style: preserve-3d;
        -webkit-backface-visibility: hidden;
           -moz-backface-visibility: hidden;
        -webkit-transition: all .4s ease-in-out;
           -moz-transition: all .4s ease-in-out;
          -ms-transition: all .4s ease-in-out;
           -o-transition: all .4s ease-in-out;
            transition: all .4s ease-in-out;
      }

      .panel .back {
        height: inherit;
        position: absolute;
        top: 0;
        z-index: 1000;
        -webkit-transform: rotateY(-180deg);
           -moz-transform: rotateY(-180deg);
        -webkit-transform-style: preserve-3d;
           -moz-transform-style: preserve-3d;
        -webkit-backface-visibility: hidden;
           -moz-backface-visibility: hidden;
        -webkit-transition: all .4s ease-in-out;
           -moz-transition: all .4s ease-in-out;
          -ms-transition: all .4s ease-in-out;
           -o-transition: all .4s ease-in-out;
            transition: all .4s ease-in-out;
      }
      .panel.flip .front {
        z-index: 900;
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
      }
      .panel.flip .back {
        z-index: 1000;
        -webkit-transform: rotateX(0deg) rotateY(0deg);
        -moz-transform: rotateX(0deg) rotateY(0deg);
      }
      .box1{
        background-color: #14bcc8;
        width: 250px;
        height: 150px;
        margin: 0 auto;
        padding: 20px;
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
      }
      .box2{
        background-color: #ff7e70;
        width: 250px;
        height: 150px;
        margin: 0 auto;
        padding: 20px;
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
      }
    </style>
</head>
<body>
  <h1>CSS 3D FLIP BOX</h1>
  <h3>Flipping content to a div (Transitions and 3D Transforms)</h3>

  <div class="wrapper">
        <div class="col_third">
          <div class="hover panel">
            <div class="front">
              <div class="box1">
                <p>Front Side</p>
              </div>
            </div>
            <div class="back">
              <div class="box2">
                <p>Back Side</p>
              </div>
            </div>
          </div>
      </div>

      <div class="col_third">
          <div class="hover panel">
            <div class="front">
              <div class="box1">
                <p>Front Side</p>
              </div>
            </div>
            <div class="back">
              <div class="box2">
                <p>Back Side</p>
              </div>
            </div>
          </div>
      </div>

      <div class="col_third end">
          <div class="hover panel">
            <div class="front">
              <div class="box1">
                <p>Front Side</p>
              </div>
            </div>
            <div class="back">
              <div class="box2">
                <p>Back Side</p>
              </div>
            </div>
          </div>
        </div>
     </div>
     <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
     <script>
          $(document).ready(function(){
            // set up hover panels
            // although this can be done without JavaScript, we've attached these events
            // because it causes the hover to be triggered when the element is tapped on a touch device
            $('.hover').hover(function(){
              $(this).addClass('flip');
            },function(){
              $(this).removeClass('flip');
            });
          });
     </script>
</body>
</html>
8
  • CSS pertence ao ficheiro de CSS logo não tem que estar no ficheiro HTML
    – dippas
    5/07/2016 às 17:36
  • @dippas Veja o titulo da pergunta
    – Miguel
    5/07/2016 às 17:43
  • e um documento html não pode ter um <link rel="stylesheet" href="ficheiro.css" /> ?
    – dippas
    5/07/2016 às 17:45
  • 1
    Claro @dippas, era como eu faria, mas a questão claramente não pede para fazer isso. "Estou com dificuldade e gostaria de saber como juntar e salvar estes trechos em um arquivo html..."
    – Miguel
    5/07/2016 às 17:54
  • 1
    @dippas mas olhe que não é necessáriamente má prática, em termos de performance fica mais rápido assim, e tendo em conta que os css não são muitos diria que até podesse ficar assim, escusava-se de fazer requisições externas (o que demora tempo) e se fizesse minify dos css ainda ficava melhor
    – Miguel
    5/07/2016 às 18:03
1

Basicamente basta utilizar as tags. Para começar tudo teria que estar entre as tags <html></html> (Lembrando que para indicar o termino de uma tag HTML utiliza-se </).

Com o <html> criado, você adiciona <head> e <body>, dentro de <head>, adicione <style> para colocar o código CSS, e <style> para o JS. E dentro de <body> a parte HTML.

Salve o arquivo com .html no final, exemplo: exemplo.html

O código completo fica assim:

<html>
    <head>
        <style>
            body {
                background-color: #ecf0f1;
                margin: 20px;
                font-family: Arial, Tahoma; 
                font-size: 20px; 
                color: #666666; 
                text-align: center; 
            }
            p { color: #ffffff;  }

            /*-=-=-=-=-=-=-=-=-=-*/
            /* Column Grids */
            /*-=-=-=-=-=-=-=-=-= */

            .col_half { width: 49%; }
            .col_third { width: 32%; }
            .col_fourth { width: 23.5%; }
            .col_fifth { width: 18.4%; }
            .col_sixth { width: 15%; }
            .col_three_fourth { width: 74.5%;}
            .col_twothird{ width: 66%;}
            .col_half,
            .col_third,
            .col_twothird,
            .col_fourth,
            .col_three_fourth,
            .col_fifth{
                position: relative;
                display:inline;
                display: inline-block;
                float: left;
                margin-right: 2%;
                margin-bottom: 20px;
            }
            .end { margin-right: 0 !important; }

            /*-=-=-=-=-=-=-=-=-=-=- */
            /* Flip Panel */
            /*-=-=-=-=-=-=-=-=-=-=- */

            .wrapper{ width: 980px; margin: 0 auto;  background-color: #bdd3de; hoverflow: hidden;}

            .panel {
                margin: 0 auto;
                height: 130px;  
                position: relative;
                -webkit-perspective: 600px;
                -moz-perspective: 600px;
            }

            .panel .front,
            .panel .back {
                text-align: center;
            }

            .panel .front {
                height: inherit;
                position: absolute;
                top: 0;
                z-index: 900;
                text-align: center;
                -webkit-transform: rotateX(0deg) rotateY(0deg);
                   -moz-transform: rotateX(0deg) rotateY(0deg);
                -webkit-transform-style: preserve-3d;
                   -moz-transform-style: preserve-3d;
                -webkit-backface-visibility: hidden;
                   -moz-backface-visibility: hidden;
                -webkit-transition: all .4s ease-in-out;
                   -moz-transition: all .4s ease-in-out;
                    -ms-transition: all .4s ease-in-out;
                     -o-transition: all .4s ease-in-out;
                        transition: all .4s ease-in-out;
            }

            .panel .back {
                height: inherit;
                position: absolute;
                top: 0;
                z-index: 1000;
                -webkit-transform: rotateY(-180deg);
                   -moz-transform: rotateY(-180deg);
                -webkit-transform-style: preserve-3d;
                   -moz-transform-style: preserve-3d;
                -webkit-backface-visibility: hidden;
                   -moz-backface-visibility: hidden;
                -webkit-transition: all .4s ease-in-out;
                   -moz-transition: all .4s ease-in-out;
                    -ms-transition: all .4s ease-in-out;
                     -o-transition: all .4s ease-in-out;
                        transition: all .4s ease-in-out;
            }
            .panel.flip .front {
                z-index: 900;
                -webkit-transform: rotateY(180deg);
                -moz-transform: rotateY(180deg);
            }
            .panel.flip .back {
                z-index: 1000;
                -webkit-transform: rotateX(0deg) rotateY(0deg);
                -moz-transform: rotateX(0deg) rotateY(0deg);
            }
            .box1{
                background-color: #14bcc8;
                width: 250px;
                height: 150px;
                margin: 0 auto;
                padding: 20px;
                border-radius: 10px;
                -moz-border-radius: 10px;
                -webkit-border-radius: 10px;
            }
            .box2{
                background-color: #ff7e70;
                width: 250px;
                height: 150px;
                margin: 0 auto;
                padding: 20px;
                border-radius: 10px;
                -moz-border-radius: 10px;
                -webkit-border-radius: 10px;
            }
        </style>

        <!-- Necessário para que o Script funcione -->
        <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

        <script>
            $(document).ready(function(){
                // set up hover panels
                // although this can be done without JavaScript, we've attached these events
                // because it causes the hover to be triggered when the element is tapped on a touch device
                $('.hover').hover(function(){
                    $(this).addClass('flip');
                },function(){
                    $(this).removeClass('flip');
                });
            });
        </script>
    </head>
    <body>
        <h1>CSS 3D FLIP BOX</h1>
        <h3>Flipping content to a div (Transitions and 3D Transforms)</h3>

        <div class="wrapper">
              <div class="col_third">
                <div class="hover panel">
                  <div class="front">
                    <div class="box1">
                      <p>Front Side</p>
                    </div>
                  </div>
                  <div class="back">
                    <div class="box2">
                      <p>Back Side</p>
                    </div>
                  </div>
                </div>
                </div>

                <div class="col_third">
                <div class="hover panel">
                  <div class="front">
                    <div class="box1">
                      <p>Front Side</p>
                    </div>
                  </div>
                  <div class="back">
                    <div class="box2">
                      <p>Back Side</p>
                    </div>
                  </div>
                </div>
                </div>

                <div class="col_third end">
                <div class="hover panel">
                  <div class="front">
                    <div class="box1">
                      <p>Front Side</p>
                    </div>
                  </div>
                  <div class="back">
                    <div class="box2">
                      <p>Back Side</p>
                    </div>
                  </div>
                </div>
              </div>
             </div>
    </body>
</html>

Bom, é isso, qualquer dúvida pergunte.

Att;

2
  • CSS pertence ao ficheiro de CSS logo não tem que estar no ficheiro HTML
    – dippas
    5/07/2016 às 17:57
  • Só se você quiser, isso não é uma regra, se fosse não existiria a opção <style>. Vai muito do programador, tecnicamente é mais simples você utilizar um CSS que só é aplicado a esta pagina diretamente nela do que ter de importar um arquivo que seria de única utilização. 5/07/2016 às 18:02

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .