Comments

  1. Post
    Author
  2. Post
    Author
    Nicolas Siqueira da Silva

    Ótimo vídeo cara! Ganhou mais um inscrito. Obrigado por ter esse tempo livre e compartilhar isso conosco.

  3. Post
    Author
  4. Post
    Author
  5. Post
    Author
  6. Post
    Author
  7. Post
    Author
  8. Post
    Author
  9. Post
    Author
  10. Post
    Author
  11. Post
    Author
  12. Post
    Author
  13. Post
    Author
  14. Post
    Author
  15. Post
    Author
  16. Post
    Author
  17. Post
    Author
    Edna aguiar

    meu css não funciona no CHROME, já atualizei o navegador estou usando o webkit e nada. Vc sabe o que pode ser?

  18. Post
    Author
    GG AMBIENTAL

    Boa tarde amigo, comigo deu tudo certo mas na hora de clicar no botão com o + para abrir o menu circular ele não abre, vou deixar o meu código, se poder, por favor verifica para mim qual foi o meu erro, gostaria muito de usar o efeito obrigado;

    <!DOCTYPE html>

    <html>
    <head>
    <meta charset="utf-8" />

    <title>Slide CSS3 </title>

    <style>

    *{

    margin:0;
    padding: 0;
    }

    body {

    background-color: #414950;

    }

    nav{

    margin: 150px; auto;
    width: 450px;
    height: 450px;
    }

    #check{

    display: nane;
    }

    #central{

    cursor: pointer;
    width: 150px;
    height: 150px;
    position: absolute;
    margin: 150px 150px;
    z-index: 1;
    }

    #central img{

    width: 100%;
    transition: all .4s ease-in-out;
    border-radius: 50%;
    }

    .link{

    position: absolute;
    margin: 195px 195px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    transition: all .1s ease-out;
    }

    #check:checked ~ a #link_01{

    transform: translateY(-195px);
    }

    #check:checked ~ a #link_02{

    transform: translateX(195px);
    transition-delay: .1s;
    }

    #check:checked ~ a #link_03{

    transform: translateY(195px);
    transition-delay: .2s;
    }

    #check:checked ~ a #link_04{

    transform: translateX(-195px);
    transition-delay: .3s;
    }

    #check:checked ~ #central img{

    transform: rotate(45deg);
    }

    </style>
    </head>
    <body>

    <nav>

    <imput type="checkbox" id="check">
    <label id="central"for="check"> <img src="central.png"/></label>

    <a href="#"><img class="link" id="link_01" src="01.png"/></a>
    <a href="#"><img class="link" id="link_01" src="02.png"/></a>
    <a href="#"><img class="link" id="link_01" src="03.png"/></a>
    <a href="#"><img class="link" id="link_01" src="04.png"/></a>

    </nav>
    </body>
    </html>

  19. Post
    Author
    verdade da noticia

    <!DOCTYPE html>
    <html>
    <head>
    <title>Menu circular com css3</title>
    <style>

    *{
    padding: 0px;
    margin: 0px;
    }
    body{
    background-color: #414950;
    }

    nav{
    margin: 150px auto;
    width: 450px;
    height: 450px;
    }

    #check{
    display: none;
    }

    #central{
    cursor: pointer;
    width: 150px;
    height: 150px;
    position: absolute;
    margin: 150px 150px;
    z-index: 1;
    }

    #central img{
    width: 100%;
    transition: all .4s ease-in-out;
    border-radius: 50%;
    }

    .link{
    position: absolute;
    margin: 195px 195px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    transition: all .1s ease-out;
    }

    #check:checked ~ a #link_01{
    transform: translateY(-195px);
    }

    #check:checked ~ a #link_02{
    transform: translateX(195px);
    transition-delay: .1s;
    }
    #check:checked ~ a #link_03{
    transform: translateY(195px);
    transition-delay: .2s;
    }
    #check:checked ~ a #link_04{
    transform: translateX(-195px);
    transition-delay: .3s;
    }

    #check:checked ~ #central img{
    transform: rotate(45deg);
    }

    </style>
    </head>
    <body>

    <nav>

    <input type="checkbox" id="check" />
    <label id="central" for="check"><img src="central.png"/></label>
    <a href="#"><img class="link" id="link_01" src="01.png"></img></a>
    <a href="#"><img class="link" id="link_02" src="02.png"></img></a>
    <a href="#"><img class="link" id="link_03" src="03.png"></img></a>
    <a href="#"><img class="link" id="link_04" src="04.png"></img></a>
    </nav>

    </body>
    </html>

  20. Post
    Author
    Acneto

    Uma coisa que tenho dúvida é sobre a regra dos "id"
    Recomendam que use um por página, mas vejo muitos exemplos com vários, tipo desse tutorial na tag "a"
    Isso não afeta em nada a regra? É permitido em qual circunstância?

  21. Post
    Author
  22. Post
    Author

Leave a Reply

Your email address will not be published. Required fields are marked *