Jump to content

Search the Community

Showing results for tags 'css3'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Calendars

  • Comunidade iMasters

Forums

  • Q&A Desenvolvimento
    • Perguntas e respostas rápidas
  • Desenvolvimento e Banco de Dados
    • HTML e CSS
    • Java
    • Javascript
    • .NET
    • PHP
    • Python
    • Ruby
    • Mobile
    • Ambientes de Desenvolvimento
    • Arquitetura e Métodos Ágeis
    • Banco de Dados
    • DevOps
    • Desenvolvimento de Games
    • E-Commerce e Pagamentos Online
    • SEO e Otimizações
    • WordPress
    • Algoritmos & Outras Tecnologias
  • Design e Produto
    • Fotografia
    • Photoshop
    • Design de interfaces e UX
    • Edição/Produção de Vídeos
    • Marketing Online
    • Desenho, Ilustração e 3D
  • Entretenimento e uso pessoal
    • Geral
    • Segurança & Malwares
    • Gadgets e wearable
    • Softwares e Apps
    • Entretenimento

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Google+


Hangouts


Skype


Twitter


deviantART


Github


Flickr


LinkedIn


Pinterest


Facebook


Site Pessoal


Localização


Interesses

Found 57 results

  1. holasoycael

    Remover target de slider css3

    Oi Pessoal! Eu estou ultilizando um slide desenvolvido com css3. Vim pedir ajudar aos universitarios. Precisso personaliar este slide removendo a target e mantendo o efeito. TARGET: É natural pelo codigo css ao selecionar a tela no menu ele busque a target. É possivel buscar a targert sem aparecer na barra URL? <!DOCTYPE html> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><!-- HTML 4 --> <meta charset="utf-8"/><!-- HTML5 --> <style type="text/css"> *{margin:0;outline:0;padding:0;text-align:left;list-style:none;border:none;vertical-align:baseline;outline:none;} /* *Styling */ html,body { width: 100%; height: 100%; position: relative; } body { overflow: hidden; } header { background: #fff; position: fixed; left: 0; top: 0; width:100%; height: 3.5rem; z-index: 10; } nav { width: 100%; padding-top: 0.5rem; } nav ul { list-style: none; width: inherit; margin: 0; } ul li:nth-child( 3n + 1), #main .panel:nth-child( 3n + 1) { background: rgb( 0, 180, 255 ); } ul li:nth-child( 3n + 2), #main .panel:nth-child( 3n + 2) { background: rgb( 255, 65, 180 ); } ul li:nth-child( 3n + 3), #main .panel:nth-child( 3n + 3) { background: rgb( 0, 255, 180 ); } ul li { display: inline-block; margin: 0 8px; margin: 0 0.5rem; padding: 5px 8px; padding: 0.3rem 0.5rem; border-radius: 2px; line-height: 1.5; } ul li a { color: #fff; text-decoration: none; } .panel { width: 100%; height: 500px; z-index:0; -webkit-transform: translateZ( 0 ); transform: translateZ( 0 ); -webkit-transition: -webkit-transform 0.6s ease-in-out; transition: transform 0.6s ease-in-out; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .panel h1 { font-family: sans-serif; font-size: 64px; font-size: 4rem; color: #fff; position:relative; line-height: 200px; top: 33%; text-align: center; margin: 0; } /* *Scrolling */ a[ id= "tela1" ]:target ~ #main article.panel { -webkit-transform: translateY( 0px); transform: translateY( 0px ); } a[ id= "tela2" ]:target ~ #main article.panel { -webkit-transform: translateY( -500px ); transform: translateY( -500px ); } a[ id= "tela3" ]:target ~ #main article.panel { -webkit-transform: translateY( -1000px ); transform: translateY( -1000px ); } </style> </head> <body> <a id="tela1"></a> <a id="tela2"></a> <a id="tela3"></a> <header class="nav"> <nav> <ul> <li><a href="#tela1">Tela 1</a></li> <li><a href="#tela2">Tela 2</a></li> <li><a href="#tela3">Tela 3</a></li> </ul> </nav> </header> <section id="main"> <article class="panel" id="tela1"> <h1> Conteúdo 1</h1> </article> <article class="panel" id="tela2"> <h1> Conteúdo 2</h1> </article> <article class="panel" id="tela3"> <h1> Conteúdo 3</h1> </article> </section> </body> </html> DEMO: http://jsfiddle.net/ivanferrer/en0m7yk1/
  2. Olá! Bom dia! Tenho uma imagem que fica responsiva na maioria dos navegadores, porém no internet explore ela não fica responsiva. No iexplore ela tbm sai da posição correta, então fiz um codigo especifico para o iexplore (o posicionamento ficou correto, porém a imagem não esta responsiva) Teria alguma forma de corrigir isso? O codigo esta assim: <div class="conteudo"> <div id="cabeçalho"> <div class="logotipo"> <img src="arquivo/img/logotipo.png"> </div> </div> </div> O CSS: .cabeçalho{width:90%;margin-left:auto;margin-right:auto;} .logotipo {width:100%;max-width:1000px;}} .logotipo img{width:100%!important;height:auto;max-width:180px;} Obrigada
  3. esse é o link do meu site:https://xraros.000webhostapp.com/ o problema é que no arquivo css test.css no bloco de código: eu escrevi esse código: @media screen and (min-width: 800px) and (max-width: 848px){ .busca { width:200px; } .barra { background:url(../img/barra.png)no-repeat; } } escrevi esse código: .barra { background:url(../img/barra.png)no-repeat; } no index da pagina tem a div: <div class="barra"> </div> mais no site não carrega essa imagem. como eu carrego essa imagem via css dentro de um div?
  4. estou há horas tentando utilizar o Carousel do Bootstrap para exibir produtos. Fiz sozinho não funcionou, então encontrei este código https://codepen.io/kreigd/pen/ybYNoN coloquei em um arquivo sozinho, separado do site que estou desenvolvendo e nem assim funciona. Fica assim: http://equipenovainfo.com.br/_portifolio/amanda/31_07_2019/carousel_prod.php Segue o código: <!doctype html> <html lang="pt-br"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Hello, world!</title> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script> $(document).ready(function() { $("#myCarousel").on("slide.bs.carousel", function(e) { var $e = $(e.relatedTarget); var idx = $e.index(); var itemsPerSlide = 3; var totalItems = $(".carousel-item").length; if (idx >= totalItems - (itemsPerSlide - 1)) { var it = itemsPerSlide - (totalItems - idx); for (var i = 0; i < it; i++) { // append slides to end if (e.direction == "left") { $(".carousel-item") .eq(i) .appendTo(".carousel-inner"); } else { $(".carousel-item") .eq(0) .appendTo($(this).find(".carousel-inner")); } } } }); }); </script> </head> <body> <div class="container-fluid"> <h1 class="text-center mb-3">Bootstrap Multi-Card Carousel</h1> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <div class="carousel-inner row w-100 mx-auto"> <div class="carousel-item col-md-4 active"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/f44242/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 1</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="carousel-item col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/418cf4/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 2</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="carousel-item col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/3ed846/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 3</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="carousel-item col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/42ebf4/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 4</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="carousel-item col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/f49b41/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 5</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="carousel-item col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/f4f141/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 6</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="carousel-item col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/8e41f4/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 7</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> </div> <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> Preciso terminar esse trabalho, travei nisso. Me ajudará à pagar a faculdade e ganharei tempo para estudar.
  5. Webster Moitinho

    Sinal Sonoro ao receber a mensagem

    Criei um sistema de mensagens em que a notificação aparece como um "bullet" com a quantidade de mensagens não lidas sobre a logomarca do sistema. Todavia eu gostaria de que, se a quantidade de mensagens fosse maior que 0 (zero), o sistema emitisse um alarme sonoro. Meu código está assim: <?php //verifica se o numero de linhas é maior que 0 (zero) $num_rows = 2; if($num_rows > 0){ //toca o som de alerta echo "<script> play();</script>"; // <-- O elemento audio só vai ser criado daqui algumas linhas, // não tem como ele ser tocado ainda. } ?> <audio id="autoplay"> <source src="libraries/gopi.mp3" type="audio/mp3" /> seu navegador não suporta HTML5 </audio> <script type="text/javascript"> audio = document.getElementById('autoplay'); function play(){ audio.play(); } </script>
  6. Bom dia, peço humildemente a ajuda de vocês, Enfim, estou fazendo um exemplo de site, só para teste mesmo, onde terá uma janela principal perguntando em qual site a pessoa quer ir(1 só empresa, porém dois negócios) ai se a pessoa clicar em alguma das melecas, quero que ela abra mostrando o site, ou só uma imagem mesmo
  7. Rasp

    Border radius inverso

    Pessoal, bom dia. Estou convertendo um layout de um cliente para responsivo. Durante a jornada, estou tirando vários elementos que foram desenvolvidos com imagens e os convertendo para CSS, porém, estou com uma dúvida: Como fazer um "border radius inverso" (conforme imagem anexo)? Lembro de muito tempo atrás ter visto algo semelhante em algum blog (não me lembro se feito com css ou jquery), porém, não consigo encontrar ou não estou sabendo como pesquisar. Alguém poderia me dar um help? Obrigado!
  8. Mech

    Como fazer um text drop?

    Preciso fazer um textdrop em html5 e css3. Basicamento isso: > Pergunta 1 Ao clicar no Pergunta 1, aparecer um texto logo em baixo assim: > Pergunta 1 >Resposta 1 Eu fiz o código, mas o texto desaparece rapidamente: HTML: <nav id="mainnav"> <ul class="wrapper-menu"> <li class="wrapper-dropdown"> <a>PERGUNTA</a> <ul class="dropdown"> <li>Texto Resposta</li> CSS: #mainnav ul{ list-style: none; } #mainnav ul li{ padding:10px 15px; background-color: whitesmoke; } .wrapper-menu{ position:relative; } .dropdown{ position:absolute; left:0; display:none; } .wrapper-dropdown:active > .dropdown{ display:block; }
  9. Olá pessoal, estou com uma dúvida, já pesquisei mas não encontrei nenhuma solução. Quero trocar a classe de uma div em css3 por meio de JavaScript. Por exemplo eu clico em um botão e o mesmo chama uma função em JavaScript que vai mudar a classe design1 para a classe design2 desta div. Abaixo esta o código feito. alguém poderia me ajudar ? Obrigado. <html> <head> <title></title> </head> <style type="text/css"> .design1{ background-color: blue; width: 200px; height: 200px; margin-bottom: 30px; } .design2{ background-color: yellow; width: 250px; height: 250px; margin-bottom: 30px; } </style> <script type="text/javascript"> function mudarClasse(){ document.getElementById("quadrado").style./****Não sei oque colocar aqui para mudar a classe*****/; } </script> <body> <div class="design1" id="quadrado"></div> <input type="button" name="botao" value="Mudar de classe" onclick="mudarClasse()"> </body> </html>
  10. evertongouveia

    Formulário de pesquisa em ajax

    Boa noite galera, estou tentando fazer com que uma página só mostre o resultado quando eu clicar em "Buscar" já tentei de várias formas e não consigo. Queria que mostrasse o resultado a partir do preenchimento do formulário. Segue abaixo o meu código: <!DOCTYPE html> <head> <title>Conveniados</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/colors/main.css" id="colors"> <script> $(document).ready(function(e) { $("form[ajax=true]").submit(function(e) { e.preventDefault(); var form_data = $(this).serialize(); var form_url = $(this).attr("action"); var form_method = $(this).attr("method").toUpperCase(); $("#loadingimg").show(); $.ajax({ url: form_url, type: form_method, data: form_data, cache: false, success: function(returnhtml){ $("#result").html(returnhtml); $("#loadingimg").hide(); } }); }); }); </script> </head> <body> <?php $conveniados = array(); $destaques = array(); $servicos = array(); $locais = array(); $especialidades = array(); $convs = json_decode(file_get_contents('http://url.com.br/Service/BackOffice.svc/retornaConveniado')); foreach($convs as $conv){ $info = array(); $info["nome"] = $conv->nmConveniado; $info["categoria"] = $conv->listaEspecialidade[0]->nmEspecialidade; $especialidades[] = $conv->listaEspecialidade[0]->nmEspecialidade; $info["endereco"] = $conv->listaEndereco[0]->nmLogradouro; $info["bairro"] = $conv->listaEndereco[0]->nmBairro; $info["cidade"] = $conv->listaEndereco[0]->nmCidade; $info["telefone"] = $conv->dsTelefone1; $locais[] = $conv->listaEndereco[0]->nmCidade; $info["estado"] = $conv->listaEndereco[0]->sgEstado; $servicos_str = ''; $k=0; foreach($conv->listaServico as $serv_str){ $k++; $servicos[] = $serv_str->nmServico; if($k==count($conv->listaServico)){ $servicos_str .= $serv_str->nmServico; } else { $servicos_str .= $serv_str->nmServico.', '; } } $info["servicos"] = $servicos_str; $info["imagem"] = $conv->listaImagem[0]->nmArquivo; $conveniados[] = $info; if($conv->flDestaqueSite){ $destaques[] = $info; } } $_especialidades = array_unique($especialidades); $_servicos = array_unique($servicos); $_locais = array_unique($locais); asort($_especialidades); asort($_servicos); asort($_locais); ?> <!-- Wrapper --> <div id="wrapper"> <!-- Header Container ================================================== --> <header id="header-container"> <!-- Header --> <div id="header"> <div class="container"> <!-- Left Side Content --> <div class="left-side"> <!-- Logo --> <div id="logo"> <a href="index.html"><script type="text/javascript"> //<![CDATA[ window.__mirage2 = {petok:"c15ffef9e9bc60c90529128598972fc85e861c0e-1529018942-86400"}; //]]> </script> <script type="text/javascript" src="https://ajax.cloudflare.com/cdn-cgi/scripts/04b3eb47/cloudflare-static/mirage2.min.js"></script> <img data-cfsrc="images/logo.png" alt="" style="display:none;visibility:hidden;"><noscript><img src="images/logo.png" alt=""></noscript></a> </div> <!-- Mobile Navigation --> <div class="mmenu-trigger"> <button class="hamburger hamburger--collapse" type="button"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </button> </div> </div> <div class="right-side"> <div class="header-widget"> <a href="#" class="button border with-icon">Seja um conveniado <i class="sl sl-icon-plus"></i></a> </div> </div> </div> </div> </header> <div class="clearfix"></div> <div class="main-search-container" data-background-image="images/main-search-background-01.jpg" style="background-image: url("images/main-search-background-01.jpg");"> <div class="main-search-inner"> <div class="container"> <div class="row"> <div class="col-md-12"> <h2 class="text-center">Conveniados Anjo da Guarda</h2> <h4 class="text-center">Localize o conveniado desejado</h4> <form method="post" ajax="true" action=""> <div class="main-search-input"> <div class="main-search-input-item"> <input type="text" placeholder="Nome do conveniado" id="searchQuery" value=""> </div> <div class="main-search-input-item"> <select data-placeholder="Cidade" class="chosen-select" style="display: none;"> <?php foreach($_locais as $local){ ?> <?php if(trim($local)!=''){ ?> <option value="<?php echo $local; ?>"><?php echo $local; ?></option> <?php } ?> <?php } ?> </select> </div> <div class="main-search-input-item"> <select data-placeholder="Categoria" class="chosen-select" style="display: none;"> <option>Categoria</option> </select> </div> <div class="main-search-input-item"> <select data-placeholder="Especialidade" class="chosen-select" style="display: none;"> <?php foreach($_especialidades as $especialidade){ ?> <?php if(trim($especialidade)!=''){ ?> <option value="<?php echo $especialidade; ?>"><?php echo $especialidade; ?></option> <?php } ?> <?php } ?> </select> </div> <div class="main-search-input-item"> <select data-placeholder="Serviço" class="chosen-select" style="display: none;"> <option value>Serviços</option> <?php foreach($_servicos as $servico){ ?> <?php if(trim(servico)!=''){ ?> <option value="<?php echo $servico; ?>"><?php echo $servico; ?></option> <?php } ?> <?php } ?> </select> </div> <input type="submit" class="button" value="Buscar" /> </div> </form> </div> </div> </div> </div> </div> <div class="container "> <div class="row"> <div class="col-md-12 margin-top-40"> <div class="row"> <!-- Lista --> <?php $d=0; ?> <?php shuffle($destaques); ?> <?php foreach($destaques as $destaque){ ?> <?php $d++; if($d<=2){ ?> <div class="col-lg-12 col-md-12"> <div class="listing-item-container list-layout"> <a href="#" class="listing-item"> <!-- Imagem --> <div class="listing-item-image"> <img data-cfsrc="<?php echo $destaque["imagem"]; ?>" alt="" style="display:none;visibility:hidden;"><noscript><img src="<?php echo $destaque["imagem"]; ?>" alt=""></noscript> <span class="tag"><?php echo $destaque["categoria"]; ?></span> </div> <!-- Conteúdo --> <div class="listing-item-content"> <div class="listing-badge anunciante">Anunciante</div> <div class="listing-item-inner"> <h3><?php echo $destaque["nome"]; ?> <i class="verified-icon"></i></h3> <span><?php echo $destaque["telefone"]; ?></span></br> <span><?php echo $destaque["endereco"]; ?>, <?php echo $destaque["bairro"]; ?>, <?php echo $destaque["cidade"]; ?> - <?php echo $destaque["estado"]; ?></span> </div> </div> </a> </div> </div> <?php } ?> <?php } ?> <!-- Lista / Fim --> <center><a href="#" class="button border with-icon margin-bottom-20">Ver mais</a></center> <!-- Lista --> <?php $d=0; ?> <?php foreach($conveniados as $conveniado){ ?> <?php $d++; if($d<=5){ ?> <div class="col-lg-12 col-md-12" especialidade="<?php echo $conveniado["categoria"]; ?>" local="<?php echo $conveniado["cidade"]; ?>" nome="<?php echo $conveniado["nome"]; ?>" servicos="<?php echo $conveniado["servicos"]; ?>"> <div class="listing-item-container list-layout"> <a href="#" class="listing-item"> <!-- Imagem --> <div class="listing-item-image"> <?php if($conveniado["imagem"] != ''){ ?> <img data-cfsrc="<?php echo $conveniado["imagem"]; ?>" alt="" style="display:none;visibility:hidden;"><noscript><img src="<?php echo $conveniado["imagem"]; ?>" alt=""></noscript> <?php } else { ?> <img data-cfsrc="images/sem-imagem.jpg" alt="" style="display:none;visibility:hidden;"><noscript><img src="images/sem-imagem.jpg" alt=""></noscript> <?php } ?> <span class="tag"><?php echo $conveniado["categoria"]; ?></span> </div> <!-- Conteúdo --> <div class="listing-item-content"> <div class="listing-item-inner"> <h3><?php echo $conveniado["nome"]; ?></h3> <span><?php echo $conveniado["telefone"]; ?></span></br> <span><?php echo $conveniado["endereco"]; ?>, <?php echo $conveniado["bairro"]; ?>, <?php echo $conveniado["cidade"]; ?> - <?php echo $conveniado["estado"]; ?></span> </div> </div> </a> </div> </div> <?php } ?> <?php } ?> </div> <!-- Paginação --> <div class="clearfix"></div> <span id="result"><a href="http://wp.me/p2O9K2-b">jQuery + AJAX form submit script.</a></span> <div class="row"> <div class="col-md-12"> <!-- Paginação --> <div class="pagination-container margin-top-20 margin-bottom-40"> <nav class="pagination"> <ul> <li><a href="#" class="current-page">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#"><i class="sl sl-icon-arrow-right"></i></a></li> </ul> </nav> </div> </div> </div> <!-- Paginação / Fim --> </div> </div> </div> <!-- Footer ================================================== --> <div id="footer" class="margin-top-15"> <!-- Main --> <div class="container"> <!-- Copyright --> <div class="row"> <div class="col-md-12"> <div class="copyrights">© 2017 Afagu. Todos os direitos reservados.</div> </div> </div> </div> </div> <!-- Footer / End --> <!-- Back To Top Button --> <div id="backtotop"><a href="#"></a></div> </div> <!-- Wrapper / End --> <!-- Scripts ================================================== --> <script data-cfasync="false" src="../../cdn-cgi/scripts/f2bf09f8/cloudflare-static/email-decode.min.js"></script><script type="text/javascript" src="scripts/jquery-2.2.0.min.js"></script> <script type="text/javascript" src="scripts/mmenu.min.js"></script> <script type="text/javascript" src="scripts/chosen.min.js"></script> <script type="text/javascript" src="scripts/slick.min.js"></script> <script type="text/javascript" src="scripts/rangeslider.min.js"></script> <script type="text/javascript" src="scripts/magnific-popup.min.js"></script> <script type="text/javascript" src="scripts/waypoints.min.js"></script> <script type="text/javascript" src="scripts/counterup.min.js"></script> <script type="text/javascript" src="scripts/jquery-ui.min.js"></script> <script type="text/javascript" src="scripts/tooltips.min.js"></script> <script type="text/javascript" src="scripts/custom.js"></script> <!-- Google Autocomplete --> <script> function initAutocomplete() { var input = document.getElementById('autocomplete-input'); var autocomplete = new google.maps.places.Autocomplete(input); autocomplete.addListener('place_changed', function() { var place = autocomplete.getPlace(); if (!place.geometry) { window.alert("No details available for input: '" + place.name + "'"); return; } }); if ($('.main-search-input-item')[0]) { setTimeout(function(){ $(".pac-container").prependTo("#autocomplete-container"); }, 300); } } </script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAgeuuDfRlweIs7D6uo4wdIHVvJ0LonQ6g&amp;libraries=places&amp;callback=initAutocomplete"></script> </body> </html>
  11. Soneca_BO

    Efeito Transição Css3

    Bom dia, Eu já desenvolvo web faz um tempo. um dia peguei um código web kit que quando mudava o tamanho da tela o meu responsivo não fazia a nimção muito rapida, mas fazia de uma forma suave e agradável.. só que não lembro exatamente o que fiz... alguém sabe algum efeito de transição que faça o ajuste suave nos box das div etc.. obs.: trabalho com todas div em % caso necessite, se não precisar uso px, para manter o conteúdo fixo. do layout ele esta ok.. só queria o efeito da transição de vagar.. tipo mudou o tamanho da tela ele faz um efeito tipo de slow.. desde já agradeço.
  12. Bom Dia! Tenho a seguinte página <!doctype html> <html> <head> <meta charset="utf-8"> <title>Slider</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="_css/aos.css"> <link rel="stylesheet" type="text/css" href="_css/jquery.cycle2.css"> <script type="text/javascript" src="_js/jquery.js"></script> <script type="text/javascript" src="_js/jquery.cycle2.min.js"></script> <style> @import url('http://fonts.googleapis.com/css?family=Open+Sans'); * { font-family: 'Open Sans'; margin: 0; padding: 0; box-sizing: content-box; } img { border: 0; max-width: 100%; } ul { list-style: none; } ul li { display: inline; } .aos-all { width: 1000px; max-width: 98%; margin: 10vh auto 0 auto; } .aos-item { display: inline-block; float: left; width: 40%; height: 300px; padding: 20px; } .aos-item__inner { position: relative; width: 100%; height: 100%; float: left; background: #1da4e2; line-height: 260px; text-align: center; color: #fff; } @media screen and (max-width: 800px) { .aos-item { width: 50%; } } .logo { width : 432px; -webkit-animation : logo-anim 1s; -moz-animation : logo-anim 1s; -o-animation : logo-anim 1s; animation : logo-anim 1s; } @-webkit-keyframes logo-anim { 0% { opacity : 0; transform : translateY(-50px); -webkit-transform : translateY(-50px); -moz-transform : translateY(-50px); -o-transform : translateY(-50px); -ms-transform : translateY(-50px); } 100% { opacity : 1; transform : translateY(0px); -webkit-transform : translateY(0px); -moz-transform : translateY(0px); -o-transform : translateY(0px); -ms-transform : translateY(0px); } } @-moz-keyframes logo-anim { 0% { opacity : 0; transform : translateY(-50px); -webkit-transform : translateY(-50px); -moz-transform : translateY(-50px); -o-transform : translateY(-50px); -ms-transform : translateY(-50px); } 100% { opacity : 1; transform : translateY(0px); -webkit-transform : translateY(0px); -moz-transform : translateY(0px); -o-transform : translateY(0px); -ms-transform : translateY(0px); } } @-o-keyframes logo-anim { 0% { opacity : 0; transform : translateY(-50px); -webkit-transform : translateY(-50px); -moz-transform : translateY(-50px); -o-transform : translateY(-50px); -ms-transform : translateY(-50px); } 100% { opacity : 1; transform : translateY(0px); -webkit-transform : translateY(0px); -moz-transform : translateY(0px); -o-transform : translateY(0px); -ms-transform : translateY(0px); } } @keyframes logo-anim { 0% { opacity : 0; transform : translateY(-50px); -webkit-transform : translateY(-50px); -moz-transform : translateY(-50px); -o-transform : translateY(-50px); -ms-transform : translateY(-50px); } 100% { opacity : 1; transform : translateY(0px); -webkit-transform : translateY(0px); -moz-transform : translateY(0px); -o-transform : translateY(0px); -ms-transform : translateY(0px); } } .logo-atividades { position : absolute; top : 0; center : 0; width : 100%; height : 500px; text-align : center; overflow : hidden; z-index : 20; } .atividades { color : #FFF; height : 115px; overflow : hidden; position : absolute; top : 80%; margin-top : -176px; width : 100%; pointer-events : none; text-align : center; z-index : 10; } .atividades a { text-decoration : none; } .atividades ul { list-style : none; padding : 0; margin : 10px 0 0; position : relative; height : 100px; font-size : 36px; font-weight : 300; text-align : center; font-family : 'Lato', sans-serif; letter-spacing : 5px; text-transform : uppercase; z-index : 100; } .atividades ul li { width : 100%; text-align : center; position : absolute; opacity : 0; top : 85px; line-height : 100px; -webkit-transition : all 0.5s ease-in-out; -moz-transition : all 0.5s ease-in-out; -o-transition : all 0.5s ease-in-out; transition : all 0.5s ease-in-out; transition-timing-function : ease; -webkit-transition-timing-function : ease; /* Safari and Chrome */ } .atividades ul li.ativa { opacity : 1; top : 0; -webkit-transition : all 1s ease-in-out; -moz-transition : all 1s ease-in-out; -o-transition : all 1s ease-in-out; transition : all 1s ease-in-out; transition-timing-function : ease; -webkit-transition-timing-function : ease; /* Safari and Chrome */ } } </style> </head> <body> <div class="cycle-slideshow" data-cycle-fx=fadeout data-cycle-timeout=5000 data-cycle-pause-on-hover="true" data-cycle-slides="div.slide"> <div class="logo-atividades"> <div style="margin-top: 100px;"> <a href="http://www.funerariasaopedro.net.br"> <img class="logo" src="_img/logoFuneraria.png" alt="Logo"/> </a> <div class="atividades"> <ul> <li class="ativa">Agência Funerária</li> <li>Funerais</li> <li>Cremações</li> <li>Trasladações</li> <li>Tanatopraxias</li> <li>Exumações</li> <li>Artigos Religiosos</li> <li>Atendimento 24h</li> </ul> </div> </div> </div> <!-- prev/next links --> <div class="cycle-prev"></div> <div class="cycle-next"></div> <div class="cycle-pager"></div> <div class="slide"> <img src="_img/_banner/_site/1.png" /> </div> <div class="slide"> <img src="_img/_banner/_site/2.png" /> </div> <div class="slide"> <img src="_img/_banner/_site/3.png" /> </div> <div class="slide"> <img src="_img/_banner/_site/4.png" /> </div> </div> <div class="aos-item" data-aos="fade-right"> <div class="aos-item__inner"> <h3>Esquerda</h3> </div> </div> <div class="aos-item" data-aos="fade-left"> <div class="aos-item__inner"> <h3>Direita</h3> </div> </div> <div class="aos-item" data-aos="fade-up"> <div class="aos-item__inner"> <h3>Baixo Cima</h3> </div> </div> <div class="aos-item" data-aos="fade-down"> <div class="aos-item__inner"> <h3>Cima Baixo</h3> </div> </div> <div class="aos-item" data-aos="fade-in"> <div class="aos-item__inner"> <h3>Baixo Cima</h3> </div> </div> <div class="aos-item" data-aos="fade-in"> <div class="aos-item__inner"> <h3>Cima Baixo</h3> </div> </div> <script> function homeTitleAnimation(){ var interval; var counter = 1; var myFunc = function() { var cur = $('.atividades ul li').length; if(cur == counter) { $('.atividades ul li.ativa').removeClass('ativa'); $('.atividades ul li').first().addClass('ativa'); counter = 1; } else { counter++; $('.atividades ul li.ativa').removeClass('ativa').next().addClass('ativa'); } }; interval = setInterval(myFunc, 4000); } homeTitleAnimation(); </script> <script src="_js/aos.js"></script> <script> AOS.init({ easing: 'ease-in-out-sine' }); </script> </body> </html> Tudo funciona corretamente com exceção do posicionamento da logo e da ul que rodam sobre o Slideshow que não estou conseguindo posiciona-los sobre o Slideshow. <div class="cycle-slideshow" data-cycle-fx=fadeout data-cycle-timeout=5000 data-cycle-pause-on-hover="true" data-cycle-slides="div.slide"> <div class="logo-atividades"> <div style="margin-top: 100px;"> <a href="http://www.funerariasaopedro.net.br"> <img class="logo" src="_img/logoFuneraria.png" alt="Logo"/> </a> <div class="atividades"> <ul> <li class="ativa">Agência Funerária</li> <li>Funerais</li> <li>Cremações</li> <li>Trasladações</li> <li>Tanatopraxias</li> <li>Exumações</li> <li>Artigos Religiosos</li> <li>Atendimento 24h</li> </ul> </div> </div> </div> <!-- prev/next links --> <div class="cycle-prev"></div> <div class="cycle-next"></div> <div class="cycle-pager"></div> <div class="slide"> <img src="_img/_banner/_site/1.png" /> </div> <div class="slide"> <img src="_img/_banner/_site/2.png" /> </div> <div class="slide"> <img src="_img/_banner/_site/3.png" /> </div> <div class="slide"> <img src="_img/_banner/_site/4.png" /> </div> </div> Onde estou errando? Esse código pode ser visto em : http://funerariasaopedro.net.br/novo/ Na página, se derem um ctr+a, poderão notar no canto direito e abaixo do slide, a ul rodando normalmente. Porém a posição correta dela é no meio do slide e ao centro. Com relação à logomarca que está escondida atrás do slide, sua posição é acima do slide e acima da ul
  13. Estou tentando posicionar os elementos fora da div aplicando uma margem negativa, mas quando faço isso, o elemento fica "por baixo" da div e não por cima. Como gostaria que ficasse: (inputs) Como realmente está ficando: Como pode ver pela seleção, o conteúdo está fora da div, mas não está aparecendo. Tentativas: já apliquei position:relative e coloquei um z-index: 2; no form para ficar em cima, mas não deu certo. Alguém tem uma ideia?
  14. DinhoPHP

    Div flutuante

    Olá gente! No site que estou trabalhando, preciso fazer guia de favoritos que fica posicionada sempre à direita e ao ser clicada, exibe os imóveis favoritos, como no site do Zap Imóveis. Estou com dificuldades de como fazê-la ficar visível a todo tempo. Dei uma interrompida no código (por motivo de força maior) e pouco tenho ainda, mas deixarei o código. Caso alguém saiba até o que devo pesquisar, por favor, me avise. O resultado pode ser visto clicando aqui! home.php <?php require_once("include/head.php"); ?> <body> <div style="display:none;" class="tips"><?=__FILE__?></div> <div class="tail-top"> <?php require_once (DIR_BLOCO . "/header_home.php"); //require_once(DIR_BLOCO . "/bloco_busca_topo.php"); ?> <div class="ImageTop"> <?php require_once(DIR_BLOCO . "/bannerhome.php"); ?> <?php require_once(DIR_BLOCO . "/bloco_busca_home.php"); ?> </div> <div class="mainhome"> <?php require_once(DIR_BLOCO . "/autenticacao.php"); /*require_once(DIR_BLOCO . "/box_mapa.php");*/ require_once(DIR_BLOCO . "/bloco_anuncios_destaques.php"); require_once(DIR_BLOCO . "/bloco_banners_meio.php"); require_once(DIR_BLOCO . "/bloco_cidades_destaque.php"); require_once(DIR_BLOCO . "/bloco_noticias_destaques.php"); require_once(DIR_BLOCO . "/bloco_botao_anuncie_rodape.php"); ?> </div> </div> <div id="show_favorite" class="navbar navbar-inverse" data-spy="affix" data-offset-top="197"> <?php require_once(DIR_BLOCO . "/bloco_favorite_div.php"); /*AQUI É O ARQUIVO DA DIV FAVORITOS*/ ?> </div> <?php require_once(DIR_BLOCO . "/rodape.php"); ?> </body> </html> bloco_favorite_div.php <div style="display:none;" class="tips"><?=__FILE__?></div> <div id="box_favorite" style="background-color: #00307d;"> <i class="fa fa-heart-o 1g" aria-hidden="true"></i> <div id="content_btn_favorite" class="col-md-4"> <h2>FAVORITOS</h2> <div id="content_divs_favorite"> <div id="divs_favorite"> </div> </div> </div> </div> css_div_favorite.php /* DIV DOS FAVORITOS */ #show_favorite{ display: flex; overflow: hidden; box-sizing: border-box; border-color: red; height: 500px; width: max-content; } #box_favorite{ } #content_btn_favorite{ } #content_divs_favorite{ } #divs_favorite{ }
  15. Felipe Massulini

    Como inserir o autofocus no botão?

    Bom dia pessoal. No menu do meu projeto, apenas tem um botão com uma lupa, e quando ele é clicado, abre o campo de texto para ser pesquisado. Porém quando clico nele, preciso clicar novamente no campo de texto para que eu possa digitar. Gostaria de saber como faço para que o clique da lupa, ja abra o campo de texto com o cursor nele pronto para digitar. Obs: Sou iniciante.
  16. DinhoPHP

    Preciso desse estilo visual

    Olá! Preciso urgentemente de ajuda, para desenvolver um estilo de busca avançada, como a do Zap Imóveis (no modo mobile). É possível fazer no CSS puro ou há FrameWorks? Fico no aguardo! Não consegui enviar a imagem por erro no site deste fórum.
  17. Alguém pode me explicar de forma rápida de que forma eles trabalham juntos?
  18. Pessoal, com vocês o CSS, as vezes, para de funcionar derrepente em um navegador, mas nos outros funciona perfeitamente? Gostaria de saber porque isso ocorre. Eu acredito que seja problema de compatibilidade entre os navegadores, mas o estranho é que se eu colocar ele diretamente na página ele funciona normalmente, mas se eu linkar ele assim, por exemplo: "<link rel="stylesheet" href="css/index.css">" ele as vezes para de funcionar em um navegador e no outro dia "as vezes" volta a funcionar normalmente. Gostaria de saber se dá para corrigir isso, se não der eu vou colocar puro na página, mesmo que fique menos organizado.
  19. Bom eu desconheço de é possível definir uma porcentagem da borda então alguém teria como me dar uma luz para criar esse efeito. Vejamos a print do efeito: html: CSS: Basicamente é isso uma curva reta semi-vertical uns 20 a 25 graus. Mas qual o problema se eu consigo fazer? O problema é que do jeito que fiz usei uma borda para criar o efeito e como disse até onde eu sei não dar para por uma borda por porcentagem, assim sendo não podendo adequar a um design responsivo. Então quando a screen é abaixo do padrão da borda cria-se uma extensa barra de rolagem para suprir a falta de espaço na tela. Obs.: Quero conseguir fazer isso só com CSS, porque com Javascript é só controlar a largura da borda com a largura de tela. E essa não é minha intenção. Obrigado.
  20. Joob

    CSS para Firefox (outros)

    Boas Malta, Estou aqui com um pequeno problema.. No Chrome roda bem, até no Internet Explore, quero que aparece o scroll na horizontal, mas no Firefox não aparece.. .title { font-weight: bold; max-width: 640px; } Basicamente, quero que quando passe desse max-width, que fique com scroll.. sem em qualquer browser.. não testei no Opera por acaso. mas no Firefox sei que não está a funcionar. Abraço
  21. Kimo Gordinho

    Menu Drop Down com HTML5 e CSS3

    Oi, bom dia. Então... eu estou testando meus conhecimentos básicos de HTML5 e CSS3 e como teste eu peguei um site e estou tentando montar ele do zero, mas acho que vou ficar só com o menu mesmo, enfim. O meu problema é que eu consegui fazer o menu drop down e eu queria que os itens do submenu dos itens do meu menu principal, demorassem para desaparecer quando eu tirasse o cursor do mouse de cima do item do menu principal. Exemplo: O meu item "Editar Perfil" tem os seus seguintes subitens: "Resumo", "Configurações da Conta", "Look and Layout" e "Perfil no Fórum". Eu quero que ao retirar o cursor do mouse de cima do item "Editar Perfil" do meu menu principal, em contrapartida os itens do meu submenu permaneçam aparecendo dentro de um limite de tempo, como por exemplo, três segundos.
  22. JonasGz

    PREENCHER BACKGROUND LENTAMENTE

    Bom dia, estou querendo fazer um efeito de ao passar o mouse a barra seja preenchida lentamente da esquerda para a direita, mas não sei qual propriedade do transition que muda a direção do preenchimento, segue como está até o momento: www.jonaschagas.info/efeito
  23. MrPhantomRed

    Menu em HTML5 E CSS3

    Preciso de ajuda com o menu que estou fazendo no meu site. Bem, já fiz de tudo pra tentar arrumar esse site, mas não consigo, por isso estou mandando meu código HTML e CSS aqui. HTML5: <!DOCTYPE html> <html lang="pt-br"> <head> <title>RUGBY</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="_css/normalize.css"> <link rel="stylesheet" type="text/css" href="_css/index.css"> <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800' rel='stylesheet' type='text/css'> <link rel="shortcut icon" href="_imagens/favicon.ico" type="image/x-icon"> <link rel="icon" href="_imagens/favicon.ico" type="image/x-icon"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body class="center clearfix"> <header> <h1><a href="home.html" title="Logotipo Rugby"><img src="_imagens/Rugby.png"><span></span></a></h1> <!-MENU-!> <nav> <ul class="menu"> <li><a href="#"><img id="icone" src="_imagens/menu2.png"></a> <ul> <li><a href="#">Inicio</a></li> <li><a href="#">Entenda o Rugby</a> <ul> <li><a href="#">Guia para iniciantes</a></li> <li><a href="#">Glossário</a></li> <li><a href="#">História do rugby</a></li> </ul> </li> <li><a href="#">Onde jogar</a> <ul> </ul> </li> <li><a href="#">Sobre</a> <ul> <li><a href="#">Contato</a></li> <li><a href="#">Sobre "nós"</a></li> </ul> </li> </ul> </ul> </nav> <!-FIM MENU-!> </header> <section class="welcome"> <h2>RUGBY</h2> <h3><span>TEXTO </span>TEXTO TEXTO <span> TEXTO</span> TEXTO TEXTO TEXTO.</h3> </section> <section class="container"> <div class="brancoex"> <h3>TITULO</h3> <p>TEXTOTEXTOTEXTOTEXTOTEXTOTEXTOTEXTO<span class="btn"><a href="estrutura.html" title="Leia mais...">Leia mais...</a></span></p> </div> <div class="fonteex"> <h3>TITULO</h3> <p>TEXTOTEXTOTEXTOTEXTOTEXTOTEXTOTEXTO<span class="btn"><a href="fonte.html" title="Leia mais...">Leia mais...</a></span></p> </div> <div class="menuex"> <h3>TITULO</h3> <p>TEXTOTEXTOTEXTOTEXTOTEXTOTEXTOTEXTO<span class="btn"><a href="menu.html" title="Leia mais...">Leia mais...</a></span></p> </div> </section> <footer> <small class="copyright"> <p>&copy 17087</p> </small> </footer> </body> </html> CSS3: body{ background:#282828; color:#dadada; font-family: "Open Sans", Helvetica, sans-serif, arial; font-size: 1.125em; font-weight: 300; line-height: 22px; text-align: left; text-shadow:1px 1px 0px #4c4c4c; } .center{ margin: 0 auto; max-width:1200px; width: 90%; } .clearfix:before, .clearfix:after { content: &quot; &quot;; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } /*fim do clearfix*/ img, picture, video, embed { max-width: 100%; } h1, h2{ color:#666666; font-size: 60px; font-weight: 800; letter-spacing: -3px; line-height: 60px; } h3{ font-size: 32px; font-weight: 300; letter-spacing: -2px; line-height: 38px; } p{ font-weight: 300; letter-spacing: -1px; } a, a:link, a:visited{ color:#a56256; font-weight:400; text-decoration:none; } a:hover{ color:#FE5E41; text-decoration:underline; text-shadow:none; } header{ border-bottom: 1px solid #E0E0E0; height:150px; width:100%; } /* Logotipo */ header h1 a{ display:block; float:left; height:120px; text-indent:-9999; width:35%; margin-top:-20px; margin-left:-100px; } /*nav - menu de navegação*/ nav{ float:right; margin-top:78px; text-align:right; width:41.6666666666667%; } /*SEÇÃO WELCOME*/ .welcome{ height:290px; text-align:center; width:100%; } h2 span{ font-size:1em; font-weight:300px; letter-spacing:-0.0333333333em; line-height:1em; } .welcome h3{ margin:0 auto; width:75%; } /* CONTAINER - CONTEUDO COM 3 COLUNAS */ .container{ background-color:#160d0b; height: 417px; padding:2.5%; width:95%; } .brancoex, .fonteex, .menuex{ float:left; position:relative; text-align:center; width:31.57894736842105%; } .brancoex, .fonteex{ margin-right: 2.631578947368421%; } .menuex{ background-color:#1a1a1a; margin-right:0px; } .brancoex{ background-color:#1a1a1a; } .fonteex{ background-color:#1a1a1a; } /*imagens*/ #brancoex img, #fonteex img, #menuex img{ margin: 10px auto -15px auto; text-align:center; img { max-width:100% } } /*formatação do texto*/ .container h3{ color:white; font-size: 1.77777777778em; font-weight: 300; letter-spacing: -0.0625em; margin-bottom: 30px; text-shadow:none; } .container p{ background-color:#434343; float:left; height:160px; padding: 1.9444444444444445%; position:absolute; width-max:100%; text-align:justify; top:225px; } /*formatação do botão*/ span.btn{ font-size:1.1111111111em; font-weight: 400; letter-spacing:-0.1em; height:27px; margin-top: 30px; position:absolute; right: 1px; text-align:center; text-shadow:none; width:33.33333333333333%; } span.btn a{ color:#1a1a1a; padding: 2px 3.333333333333333%; } .brancoex span.btn a{ background-color:#868686; } .fonteex span.btn a{ background-color:#868686; } .menuex span.btn a{ background-color:#868686; } /*Seção FOOTER - Rodape com 2 colunas*/ footer{ clear:both; height: 50px; padding: 10px 0; width:100%; } .copyright{ float:left; margin-left:2.5%; } .desenvolvedor{ float:right; } .desenvolvedor figure{ width:100%; } #menuu{ border:none; margin-left:-32.9%; width:100%; height:100%; overflow:hidden; margin } /*MENU*/ /*esse aqui oculta as marcações da lista*/ .menu{ list-style:none; float:left; } /*esse faz ficar na horizontal*/ .menu li{ position:relative; float:left; } /*esse aqui muda a cor dos links e tira o efeito de link no menu não suspenso*/ .menu li a{ color:black; text-decoration:none; display:block; } #icone{ width:17%; height:17%; } Imagem do menu em anexo. Podem editar o layout do menu como quiserem, apenas me ajudem a deixar coerente isso tudo. Há páginas em cima de outras. t.t
  24. html <section> <nav> <ul> <li><a href="index.html">Index</a></li> <li><a href="index.html">Index</a></li> <li><a href="index.html">Index</a></li> <li><a href="index.html">Index</a></li> <li><a href="index.html">Index</a></li> <li><a href="index.html">Index</a></li> </ul> </nav> </section> css #topo{ background:#000; width:100%; text-align:center; margin-top:-10px; position:fixed; } nav ul{ list-style: none; text-align:center; width:100%; margin-top:25%; position:absolute; } como vcs podem ver o menu está sobre o topo eu queria que ele passasse por de trás do topo é só um exemplo que o position absolute está passando sobre o position fixed
  25. Estou tendo dificuldades para criar uma transição na criação de bordas no css3. Quero que ao passar o mouse, crie a borda lentamente, mas mesmo usando a transição a borda é criada instantaneamente. Queria saber como faz aquele efeito para o traço da da borda caminhe de uma ponta a outra até fechar o quadrado, em x segundos. Mas a transição não faz nada com a borda... h1 a:hover { border: 1px solid black; transition: 2s; } não tem jeito para aplicar a transição na criação da borda?
×

Important Information

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