Pesquisar na Comunidade
Mostrando resultados para as tags ''css''.
Encontrado 324 registros
-
Melhor local para armazenar os arquivos e ter acesso de qualquer computador
proflupin postou uma questão Perguntas e respostas rápidas
Utilizo o computador de casa e também utilizo o computador do escritório. Muitas vezes faço alterações nos meus arquivos de desenvolvimento no de casa e depois fico querendo utilizá-los no do escritório. Tentei fazer este controle através do OneDrive, direcionando o Xampp para a pasta do OneDrive, porém não ficou legal, em alguns momentos os arquivos não foram sincronizados corretamente. Qual a melhor ferramenta para utilizar neste caso? Aproveitando a pergunta e engatando outra, existe alguma ferramenta ideal para desenvolvimento em grupo? -
tenho uma DIV que possui um while em php, esse while carrega 12 posts(DIV), e quero que quando acesse o site, a pagina carregue normalmente mas dentro da div aparece um loader e apenas mostre os posts quando todos estiverem carregados! isso é possivel?
-
É possível repetir background-image em perspectiva?
tiicaa postou um tópico no fórum Desenvolvimento frontend
Pessoal, preciso replicar o fundo (piso) em uma aplicação web. Acontece que eu consigo replicar uma parede enviando uma "tira" de imagem e via css repetir em X porém para o chão gostaira de utilizar perspectiva no piso de madeira como nessa imagem - https://i.imgur.com/BwzVfQo.png Porém na minha aplicação o usuário escolhe o tamanho do container, se ele quiser criar um corredor infinito ele pode inserir o tamanho que quiser, porém eu preciso que o background se repit. A dúvida é.... É possível replicar background em perspectiva? Se sim, como possso fazer? -
Quero colocar uma imagem de banner no site, mas quero que seu lado direito seja fixo na tela, se alterar o tamanho da tela, quero que somente a parte esquerda a imagem seja escondida. É possivel isso? se for, poderia me dizer como posso fazer?
-
Como expandir Multi-Level Menu para 100% ??
Carlos Web Soluções Web postou um tópico no fórum Desenvolvimento frontend
Como expandir Multi-Level Menu para 100% ?? Olá....como vão ?? Eu peguei um CSS Multi-Level Menu como modelo na internet, e gostaria de fazer uma modificação !! O menu (no link abaixo) sem estar no Responsive está ocupando mais ou menos a metade da tela. Eu gostaria que ocupasse 100% !! Tentei fazer tal modificação por conta mas não consegui !! Link = CSS Multi-Level Menu Alguém por favor poderia me dar uma ajuda ?? Desde já obrigado Carlos -
Gente, alguém sabe onde estou não errado nesse código para reproduzir essa tabela ? <html> <head> <title>Números Pares de 2 a 100</title> <style type="text/css"> <!-- td {font: 80% verdana; text-align: center; color:blue;} //--> </style> </head> <body> <table border="1" bordercolor="green" cellpadding="2" cellspacing="0"> <tr bgColor="#cccccc" borderColorDark="#fcfcfc" borderColorLight="#999999"> <script type="text/javascript"> <!-- for(i = 2; i <= 100; i++){ if(i % 2 == 0){ if(i % 20 = 0){ document.writ('<td>' + i + '</td></tr>'); if(i < 100){ document.write('<tr bgColor=\"#cccccc\" borderColorDark=\"#fcfcfc\" borderColorLight=\"#999999\">'); } } else{ document.write ('<td>' + i + '</td>'); } } } //--> </script> </tr> </table> </body>
-
oi, estou desenvolvendo abas de navegação utilizando bootstrap, porém gostaria de tornar ele responsivo pois as abas não se alinham em telas menores e as abas ficam bagunçadas. segue código abaixo: em html: <div class="row"> <div class="col-lg-12"> <h3 class="page-header">Central de ajuda</h3> </div> </div> <div class="row"> <div class="col-lg-12"> <ul class="nav nav-tabs round" id="#" role="tablist"> <li class="active"> <a id="tutorial-tab" data-toggle="tab" href="#tutorial" role="tab" aria-controls="tutorial" aria-selected="true"><span><i class="fas fa-book-reader"></i> Tutorial</a> </span> </li> <li> <a id="tarefa-tab" data-toggle="tab" href="#tarefa" role="tab" aria-controls="tarefa" aria-selected="false"> <span><i class=" fa fa-list-alt"></i> Tarefa</a> </li></span> <li> <a id="sugestao-tab" data-toggle="tab" href="#sugestao" role="tab" aria-controls="sugestao" aria-selected="false"><span> <i class="fa fa-lightbulb-o"></i> Sugestão</a></span> </li> <li> <a id="faq-tab" data-toggle="tab" href="#faq" role="tab" aria-controls="faq" aria-selected="true"><span><i class=" fa fa-search"></i> FAQ</a> </span> </li> </ul> </div> css: .nav-tabs { border-bottom: 1px solid var(--cor-primaria); overflow: hidden; transition: border 250ms ease; } .nav-tabs > li { margin: 0px; padding: 0px; float: left; padding-left: 48px; list-style-type: none; } .nav-tabs >li *{ margin: 0px; padding: 0px; } .nav-tabs > li > a { margin-right: 2px; line-height: 1.42857143; display: block; float: right; padding: 10px 24px 8px; background-color: #f2f2f2; z-index: 2; position: relative; color: #666666; text-transform: uppercase; transition: all 250ms ease; border-top: 0.5px solid rgba(204, 204, 204, 0.1803921568627451); } .nav-tabs > li > a:before, .nav-tabs > li > a:after{ display: block; content: " "; position: absolute; top: 0; height: 100%; width: 44px; background-color:#f2f2f2; transition: all 250ms ease; } .nav-tabs > li > a:before { right: -24px; transform: skew(30deg, 0deg); box-shadow: rgba(0,0,0,.1) 3px 2px 5px, inset rgba(255,255,255,.09) -1px 0; border-top: 0.5px solid rgba(204, 204, 204, 0.1803921568627451); } .nav-tabs > li > a:after { left: -24px; transform: skew(-30deg, 0deg); box-shadow: rgba(0,0,0,.1) -3px 2px 5px, inset rgba(255,255,255,.09) 1px 0; border-top: 0.5px solid rgba(204, 204, 204, 0.1803921568627451); } .nav-tabs > li > a:hover, .nav-tabs > li > a:hover:before, .nav-tabs > li > a:hover:after { background-color: var(--cor-primaria); color: #fff; border-top: 0px; } .nav-tabs >li.active > a{ z-index: 3; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:before, .nav-tabs > li.active > a:after { color: #fff; background-color: var(--cor-primaria); cursor: default; font-weight: 700; border-top: 0px; } /* Round Tabs */ .nav-tabs.round >li > a{ border-radius: 8px 8px 0 0; } .nav-tabs.round > li > a:before { border-radius: 0 8px 0 0; } .nav-tabs.round > li > a:after { border-radius: 8px 0 0 0; } tbm já tentei fazer utilizando o @media porém não ajusta certinho. poderia me dar essa ajuda.
-
Estou estudando html e css e estou com um erro ao criar o navbar! me ajudem!
-
bom dia/tarde/noite , eu estou desenvolvendo um sistema de machine learning para o meu TCC onde eu automatizarei dados que entrarão pelo meu sistema web via uma intranet e esses dados virarão estatística . Bem ,para isso eu preciso de ajuda com APIs as quais eu possa usar , gostaria que me Ajudassem com alguma que funciona com java Script A respeito de segurança na Intranet e segurança dos dados, ou até mesmo na transformação do conteúdo em documento . Sendo assim peço que me ajudem com APIs que já utilizaram ou recomendam , já pesquisei em alguns sites mas não achei nada que chamasse atenção ou fosse de acordo com um sistema de automatização . Agradeço desde já .
-
Boa tarde, Semanas atrás estava com um problema em um script de um widget de relógio para um site. Consegui um novo script sem o link que estava gerando um erro, porém gostaria de utilizar a formatação do texto similar a do anexo. Alguém pode me ajudar com a alteração no código? <div id="clockbox" style="text-align:center;"></div> <script type="text/javascript"> var tmonth=["January","February","March","April","May","June","July","August","September","October","November","December"]; function GetClock(){ var tzOffset = -3; var d=new Date(); var dx=d.toGMTString(); dx=dx.substr(0,dx.length -3); d.setTime(Date.parse(dx)) d.setHours(d.getHours()+tzOffset); var nmonth=d.getMonth(),ndate=d.getDate(),nyear=d.getFullYear(); var nhour=d.getHours(),nmin=d.getMinutes(),ap; if(nhour==0){ap=" AM";nhour=12;} else if(nhour<12){ap=" AM";} else if(nhour==12){ap=" PM";} else if(nhour>12){ap=" PM";nhour-=12;} if(nmin<=9) nmin="0"+nmin; var clocktext=""+tmonth[nmonth]+" "+ndate+", "+nyear+" "+nhour+":"+nmin+ap+""; document.getElementById('clockbox').innerHTML=clocktext; } GetClock(); setInterval(GetClock,1000); </script> Obrigado!
-
html Liberar o botão quando marcado o checkbox
gumoreno2803 postou um tópico no fórum Desenvolvimento frontend
olá, estou tentando fazer uma check box que libera o botão quando ela for marcado, mas não estou conseguindo pois não sou muito bom com html, java etc etc achei esse code no forum, mas não estou conseguindo colocar o link para quando marcar e clicar em "concordar" ele abrir uma pagina <script> function HabiDsabi(){ if(document.getElementById('habi').checked == true){ document.getElementById('envia').disabled = "" } if(document.getElementById('habi').checked == false){ document.getElementById('envia').disabled = "disabled" } }</script><form name="form1"><input type="checkbox" name="habi" id="habi" onClick="HabiDsabi()"><input type="button" name="envia" id="envia" value="Concorda" disabled></form> -
Executar ação contínua enquanto um botão esta pressionado e pará-la quando ele é solto
erikjfn postou um tópico no fórum Desenvolvimento frontend
Olá pessoal! Estou desenvolvendo uma aplicação que usa uma página html com css como controle de uma pequeno game que estou fazendo. Quero que quando eu pressionar um botão e deixar ele pressionado a ação executada desse botão continue em execução (por exemplo acelerar um carro do game) e quando soltar esse botão a ação seja encerrada. É possível fazer isso ? sinceramente eu comecei a ver html essa semana e não achei algo a respeito. Alguém pode me ajudar nessa? -
Executar ação contínua enquanto um botão esta pressionado e pará-la quando ele é solto
erikjfn postou um tópico no fórum Desenvolvimento frontend
Olá pessoal! Estou desenvolvendo uma aplicação que usa uma página html com css como controle de uma pequeno game que estou fazendo. Quero que quando eu pressionar um botão e deixar ele pressionado a ação executada desse botão continue em execução (por exemplo acelerar um carro do game) e quando soltar esse botão a ação seja encerrada. É possível fazer isso ? sinceramente eu comecei a ver html essa semana e não achei algo a respeito. Alguém pode me ajudar nessa? -
Oi, pessoal! Estou começando a utilizar javascript e entendendo os códigos. Quero muito utilizar um tipo de botão que é mais ou menos assim como coloquei em anexo. A primeira imagem é o botão normal, quando colocamos o mouse em cima, sobe a barra escura e aparece a descrição do link. Eu tenho um vídeo de um em funcionamento, mas não consegui o código dele. Alguém poderia me ajudar?
-
Estou desenvolvendo um site que terá varias paginas iguais, apenas com conteúdos diferentes (como se fosse o perfil do facebook, a pagina é padrão, mas conteúdos é diferente em cada perfil), e como serão varias paginas eu não quero só copiar o código e colar, eu queria fazer uma pagina base que se eu mudar alguma coisa mudará todas as "filhas" automaticamente. Entretanto eu não sei como esse método é chamado, nem como fazer, poderiam me falar como se chama essa técnica em HTML? e se puderem me mandem materiais sobre isso.
-
Alterar o html do tema animal de estimação da tray
Fabiana Theodoro postou um tópico no fórum Desenvolvimento frontend
Oi, tenho uma loja na Tray e o Tema é de animais de estimação. Na home quando passamos o mouse em cima do produto, aparece a patinha escrito Quero Esse! Gostaria de mudar essa imagem, e não estou achando no html. Só falta essa alteração para eu publicar a loja. Alguém pode me ajudar, por gentileza. Obg -
Boa Tarde! Estou desenvolvendo um site de uma agência de viagem para fixar meu conhecimento em javascript, html e css. Porém gostaria de colocar uma restrição no tópico "data de ida" que o usuário só prosseguia para a próxima página se no campo "Data de ida" tivesse um determinado valor no caso uma data. Iria aparecer um modal com uma mensagem de erro dizendo que é obrigatório colocar uma data. Gostaria de saber como consigo fazer essa validação utilizando javascript? <div class="container"> <div class="row"> <div class="col-12 text-center my-5"> <h1 class="display-3">Passagens Aéreas</h1> </div> </div> <div class="row justify-content-center mb-5"> <div class="col-sm-12 col-md-10 col-lg-8"> <form name="consulta" method="post"> <div class="form-row"> <div class="form-group col-sm-6"> <label for="escolhaDataIda">Escolha Data de Ida:</label> <input type="date" id="escolhaDataIda" class="form-control" name="dataida"> </div> <div class="form-group col-sm-6"> <label for="escolhaDataVolta">Escolha Data de Volta:</label> <input type="date" id="escolhaDataVolta" class="form-control" name="datavolta"> </div> <div class="form-group col-sm-12"> <a href="listaderesultados.html"> <button type="button" class="btn btn-outline-dark btn-lg btn-block">Pesquisar</button> </a> </div> </div> </form> </div> </div> </div> <!-- Modal --> <div class="modal" id="erroModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Eco Aero - Viagens</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <div class="modal-body"> </div> <div class="modal-footer"> <button type="button" class="btn btn-sucess" data-dismiss="modal">OK</button> </div> </div> </div> </div> showModal = function(mensagem, callback){ $('#erroModal').find('.modal-body').text(mensagem); $('#erroModal').find('.modal-footer .btn').click(callback); $('#erroModal').modal('show'); } function validacaoida () { if (document.cadastro.dataida.value == "") { showModal ("Por favor, coloque uma data de ida para prosseguir.", function(){ document.cadastro.dataida.focus (); }); return false; } return true; }
-
Eu gostaria de saber como faço para criar uma area de serviço igual ao dessa página https://ciesalon.com/services deixando ela responsiva
-
Campos de Formulario lado a lado
demerval.feliciano postou um tópico no fórum Desenvolvimento frontend
Boa tarde, Possuo um formulário em HTML onde tenho dois campos que fazem um select de estados e quando selecionado possibilita um select também da cidade. Acontece que o campo cidade fica abaixo do campo estado. Minha pergunta é como faço para deixar o campo cidade ao lado do campo estado. Segue o código HTML: <div class="field split"> <div class="field"> <label for="uf">UF *</label> <select id="estado" onchange="buscaCidades(this.value)"> <option value="" selected disabled>:: Selecione</option> <option value="Acre">Acre</option> <option value="Alagoas">Alagoas</option> <option value="Amapá">Amapá</option> <option value="Amazonas">Amazonas</option> <option value="Bahia">Bahia</option> <option value="Ceará">Ceará</option> <option value="Distrito Federal">Distrito Federal</option> <option value="Espirito Santo">Espirito Santo</option> <option value="Goiás">Goiás</option> <option value="Maranhão">Maranhão</option> <option value="Mato Grosso do Sul">Mato Grosso do Sul</option> <option value="Mato Grosso">Mato Grosso</option> <option value="Minas Gerais">Minas Gerais</option> <option value="Pará">Pará</option> <option value="Paraíba">Paraíba</option> <option value="Paraná">Paraná</option> <option value="Pernambuco">Pernambuco</option> <option value="Piauí">Piauí</option> <option value="Rio de Janeiro">Rio de Janeiro</option> <option value="Rio Grande do Norte">Rio Grande do Norte</option> <option value="Rio Grande do Sul">Rio Grande do Sul</option> <option value="Rondônia">Rondônia</option> <option value="Roraima">Roraima</option> <option value="Santa Catarina">Santa Catarina</option> <option value="São Paulo">São Paulo</option> <option value="Sergipe">Sergipe</option> <option value="Tocantins">Tocantins</option> </select> <br /> <select id="cidade"> </select> </div> </div> Atenciosamente, Demerval Feliciano -
Qual é o jeito correto de fazer a declaração dos seletores id e class na folha de estilo
fili postou um tópico no fórum Desenvolvimento frontend
Olá eu estava estudando as declarações dos seletores id e class e me deparei com 2 jeitos diferentes e eu não seio qual é o jeito correto /* 1° jeito de declara */ div#conteudo1 class.conteudo2 /* 2° jeito de declara */ #conteudo1 .conteudo2 qual desses jeitos é o correto ? -
css Como colocar imagem dentro da borda css?
cjdesign postou uma questão Perguntas e respostas rápidas
css ( width: 0; height: 0; border-style: solid; border-width: 100px 0px 0px 200px; border-color: transparent transparent transparent red; ) com esse css consigo deixar meu div em um formato do triangulo só que quando tento colocar uma imagem dentro ela fica no formato quadrado ou retangular... como faço pra deixar ela dentro da borda ? e assumir a forma que desejar como se fosse um powerclip dentro apenas da borda o css da imagem que eu coloco {{ float: left; width: 0; height: 0; border-style: solid; border-width: 100px 0px 0px 200px; border-color: transparent transparent transparent red; border-image: url(img/seta.jpg) round stretch; }} -
Gente eu gostaria de saber se existe alguma forma de identificar inputs dentro de uma div, sem usar nome, id ou class. Exemplo: <div> <input type='text'> <input type='text'> <input type='text> <button onclick='enviar(enviar-o-texto-do-primeiro-input, enviar-o-texto-do-segundo-input , enviar-o-texto-do-terceiro-input);>enviar</button> </div> Eu queria poder enviar os texto dos input sem usar id, class, nome, pois estou criando as div automaticamente e se botar um id para cada um, todas as outras div vão ter o mesmo id nos input.
-
Prezados Colegas: Uma coisa que eu ainda não entendi: Seria melhor usar, como recurso responsivo de desenvolvimento, medias como "rem", "em" e outras ao invés de "px" para especificar medias dos elementos box de nosso site? E por quê? Muito obrigado e grande abraço!!
-
Edição de código de logo de um site no wordpress
matbolog postou um tópico no fórum Desenvolvimento frontend
Bom dia, tudo bem? Queria saber como editar o código da logo de um site no WordPress que já está pronta pois está faltando responsividade e simplesmente não sei como fazer isso na home page do site feita com o page builder.Poderiam me ajudar? -
Bom dia pessoal, estou tentando inserir um menu responsivo no meu projeto, mas quando acesso pelo celular ele não se adapta, continua do mesmo jeito que no computador, o que deve-se fazer pra forçar-lo a se adaptar? segue codigo: <!-- <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Menu RESPONSIVO</title> <!---<link rel="stylesheet" href="style.css">--> </head> <style> *{ margin: 0; padding: 0; } .menu{ width: 100%; height: 50px; background-color: #f0f0f0; font-family:'Arial'; } .menu ul{ list-style:none; position: relative; } .menu ul li{ width: 150px; float: left; } .menu ul ul{ position: absolute; visibility: hidden; } .menu ul li:hover ul{ visibility: visible; display:block; } .menu a{ text-decoration: none; display: block; padding: 15px; text-align: center; background-color: #f6f6f6; color: #000; } .menu a:hover{ background-color: #f4f4f4; } .menu ul ul li{ float: none; border-bottom: 1px solid #000; } .menu ul ul li a{ background-color: #f0f0f0; } label[for="bt_menu"]{ padding: 5px; background-color: #d0d0d0; font-family: 'Arial'; text-align: center; font-size: 30px; width: 50px; height: 50px; } #bt_menu{ display: none ; } label[for="bt_menu"]{ display: none; } @media (max-width: 800px){ label[for="bt_menu"]{ display:block; margin-left: 0; } #bt_menu:checked ~ .menu{ margin-left: 0; display: block; } .menu{ margin-top:5px; margin-left: -100%; transition: all .4s } .menu ul li{ width:100%; float: none; } .menu ul ul{ position:static; overflow: hidden; max-height: 0; transition: all 2s; } .menu ul li:hover ul{ height:auto; max-height: 200px; } } </style> <body> <input type="checkbox" id="bt_menu"> <label for="bt_menu">☰</label> <nav class="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Serviços</a> <ul> <li><a href="#">Criação de Sites</a></li> <li><a href="#">Artes Visuais</a></li> </ul> </li> <li><a href="#">Cursos</a> <ul> <li><a href="#">Java</a></li> <li><a href="#">Photoshop</a></li> <li><a href="#">HTML/CSS</a></li> </ul> </li> <li><a href="#">Contato</a></li> </ul> </nav> </body> </html> --->
