Jump to content

Search the Community

Showing results for tags 'CSS'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


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 1402 results

  1. danicarla

    Versão para impressão

    Olá pessoas, Estou tentando fazer uma versão de impressão usando CSS eu queria colocar um cabeçalho e um rodapé em todas as paginas, O problema é que o conteúdo vem do banco de dados, e dependendo do tamanho dos parágrafos em algumas vezes o texto acaba ficando em cima do cabeçalho ou do rodapé.. alguém tem alguma idéia de como posso fazer isso? Meu cód está assim: header {font-family:Arial;font-size: 22px;color: #000;text-align: center;} footer {font-family:Arial;font-size: 10px; color: #CD090C;text-align: center;} article {font-family:Arial;font-size: 14px; color: #000;text-align: justify;} @page {size: A4;margin: 11mm 17mm 17mm 17mm;} @media print { header {position: fixed;top: 0;} footer {position: fixed;bottom: 0;} article {position: relative;top:40px;} .content-block, p {top:40px;page-break-inside: avoid;} html, body {width: 210mm;height: 297mm;} } E no HTML <header>CABEÇALHO</header> <article>Conteudo.. texto.. etc..</article> <footer>Texto do Rodapé</footer>
  2. templateonweb

    Bootstrap Website Template

    Hi, Many of you want Bootstrap website templates. In this way, you have to develop a wonderful website. As this is the cheapest and fastest way to reach over the world. If you are interested in making a website by using Bootstrap website templates, then here I am sharing a website link that provides free website designs as Bootstrap website templates. If you are interested in then you can visit the site and use the best quality of Bootstrap website templates. Please visit: Bootstrap Website Templates
  3. Pessoal, alguem sabe como eu posso transformar esse relatório em html? comecei a implementar o código de html, mas não está igual rs. Esse é meu html, que não consegui fazer ficar igual da imagem em anexo, se alguém puder me ajudar agradeço. <style> table { border-collapse: collapse; margin-left: 0; } div.conteudodatabela { overflow: visible; } table > tbody { overflow: visible; } /*adds control for test purposes*/ thead td { font-size: 11pt; } tfoot td { text-align: center; font-size: 9pt; } thead { display: table-header-group; margin-bottom: 10px } tfoot { display: table-footer-group; } thead th, thead td { position: static; } thead tr { position: static; } /*prevent problem if print after scrolling table*/ table tfoot tr { position: static; } /* table */ .checkbox { width: 20px; height: 20px; border: 1px solid black; text-align: center; float: left; margin-right: 10px; font-size: 150%; } .foo { writing-mode: vertical-lr; } .border { border: 1px solid black; } table{ font-weight: 800; font-size: 80%; width: 100%; margin: 10px; margin-bottom: 20px; } .bg{ background: rgb(230,230,230); } .h1{ font-size: 120%; } .center{ text-align: center; } .semi-full-width{ width: 80%; } .row{ margin: 50px; } .p-1{ margin: 30px; margin-bottom: 40px; margin-top: 40px; padding: 8px; } .textovertical{ writing-mode: horizontal-tb; width:11px; word-wrap: break-word; font-family: Arial, Helvetica, sans-serif; white-space: pre-wrap; } tr{ margin: 10px; margin-bottom: 50px; } .m-r{ margin-right: 830px; } .padding_master { padding: 30px; } .conteiner{ font-size: 90%; } .table td{ border: 1px solid black; padding: 1px; margin: 0px; } .lineBottom-inLine{ /* <p> */ border-bottom: 1px solid black; display: inline; } .lineBottom{ /* <p> */ border-bottom: 1px solid black; } .no-border{ border: 0px; } .no-space{ margin: 1px; padding: 1px; } .no-bold{ font-weight: 500; } .space-p p{ margin: 1px; padding: 1px; } .tr-center td{ text-align: center; } .regras p{ margin: 0px; } </style> <style type="text/css" media="print"> @page { size: auto; margin: 0mm; } </style> <div class="table" runat="server" style="margin: 1 auto;"> <div> <table style="padding: 0px; margin: 0px;" class="no-bold"> <tr class="center"> <td class="textovertical">Contratação</td> <td colspan="2">Origem Dívida</td> <td>Credor</td> <td colspan="2">Devedor</td> <td>Credor</td> </tr> <tr class="tr-center"> <td class="textovertical" id="border" rowspan="4" style="width:43px">Direta</td> <td class="textovertical" id="border" colspan="" rowspan="1">Interna</td> <td id="border" colspan="2" rowspan="">teste25</td> <td id="border" colspan="2" rowspan="">teste12</td> <td>teste 1</td> </tr> <tr class="tr-center"> <td id="border" rowspan="1">Externa</td> <td id="border" colspan="2" rowspan="3"> teste20</td> <td id="border" colspan="2" rowspan="">teste40</td> <td>teste 1</td> </tr> </table> </div> <br/> <br/> </div> Essa é a imagem do link de como deveria ficar a estrutura do relatório. https://drive.google.com/file/d/1cgxh2IKu6KcVEMmLEEgorYqBtjpgHNgs/view?usp=sharing
  4. Eu gostaria de saber como eu faço para que uma DIV fique somente no limite do conteúdo, sem que ela herde a largura da DIV "pai". Exemplo no JSFiddle Eu quero que a DIV (.inside-box) fique com a largura limitada somente ao texto de "Fazer Download", sem que ela herde a largura da DIV (.box). Agradeço !! Resolvido >> stackoverflow
  5. Rebeca Julia Bronzatti

    Mudança do layout em select e buttons

    Boa tarde, bom ontem no meu projeto tudo estava funcionando normalmente, hoje assim que iniciei notei que os selects alguns buttons estavam divergindo do formato que eu gostaria, eu não faço ideia do porque isso, já que ele não apresenta erro e nada no código foi alterado pelo menos não nesses campos, já tentei fazer novamente mas a configuração continua, tentei alterar pelo CSS mas infelizmente ele simplesmente ignora, assim que iniciei hoje o projeto me deparei com esse erro Failed to load resource: the server responded with a status of 404 (Not Found) mas consegui resolver não sei se tem algo haver, se alguém puder me dar um help eu agradeceria muito nunca vi isso na vida. Eu to usando o materialize esse select já vem pronto. <div class="col s3"> <select name='tipo' class="browser-default"> <option value="" disabled selected>Tipo</option> <option value="Casa" class="tipo">Casa</option> <option value='Apartamento' class="tipo">Apartamento</option> <option>Sobrado</option> <option>Edicula</option> <option>KitNet</option> <option>Flat</option> <option>Sala Comercial</option> <option>Loja</option> <option>Galpão</option> <option>Terreno</option> <option>Fazenda</option> </select> </div>
  6. Salveee! Certo a dúvida que trarei aqui agora é bem complexa e eu sinceramente não sei se é realmente possível mas acho que não custa nada perguntar. Fiz um site de envio de textos, onde o aluno envia um texto e o professor corrigi até ai blz, queria saber como eu poderia fazer pra quando o professor marcar uma palavra aprece-se uma caixa de dialogo onde ele colocaria, por exemplo, a correção da palavra ou alguma explicação e essas informações seriam enviadas para o banco de dados quando o aluno acessa a correção desse texto e o ele passa-se mouse por cima dessa palavra apareceria a correção em um balãozinho. Como exemplo desse comportamento que acabei de citar temos o google documents que faz algo desse jeito. Queria saber se isso pode ser possível sem exigir muito código ou muita coisa. Desde já agradeço.
  7. Eu tenho 2 arquivos CSS externos que contém backgrounds da página. Em 1 só tem links para imagens .webP e em outro somente .PNG , eu estou usando um script para detectar se o browser aceita .webP e caso afirmativo ele altera o link CSS externo em HEAD para o css externo com .webP, por padrão inicialmente ele aponta para o .png, testei numa página mais simples e deu ok, mas na hora de colocar aonde quero não funcionou, segue o código: No HEAD: <link href="‪arquivos_css/png.css" rel="stylesheet" id="key"> No JS: ////////////////////////////////////////////////////////////// // FUNÇÃO QUE CRIA O LINK EXTERNO CSS PARA INSERIR NO HEAD // OK// ////////////////////////////////////////////////////////////// function loadCSS(url){ var link = document.createElement('link'); link.setAttribute('href', url ); link.setAttribute('rel', "stylesheet" ); link.setAttribute('id', "key" ); var para = document.getElementsByTagName('head')[0]; //Nó pai HEAD var velho = document.getElementById('key'); //local exato do elemento a ser substituido para.replaceChild(link, velho); //Substituímos o velho pelo novo(link) } ////////////////////////////// Chamada à função do webP ///////////////////////////// WebpIsSupported(function(isSupported){ if(isSupported){ //CHAMA A FUNÇÃO LOADCSS e carrega o link CSS externo com WEBP loadCSS('arquivos_css/webp.css'); } }); ////////////////////////////////////////////////////////////// // FUNÇÃO QUE DETECTA A COMPATIBILIDADE DO BROWSER COM WEBP // ////////////////////////////////////////////////////////////// function WebpIsSupported(callback){ if(!window.createImageBitmap){ callback(false); return; } var webpdata = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoCAAEAAQAcJaQAA3AA/v3AgAA='; fetch(webpdata).then(function(response){ return response.blob(); }).then(function(blob){ createImageBitmap(blob).then(function(){ callback(true); }, function(){ callback(false); }); }); } O erro que está dando no chrome é esse: Failed to load resource: net::ERR_FILE_NOT_FOUND já mudei na função loadCSS o endreço dos arquivos de loadCSS('arquivos_css/webp.css'); para loadCSS('/arquivos_css/webp.css'); e não funciona.... o arquivo CSS externo contém backgrounds dentro do seletor HTML tipo : html { background-image.....(1); background-image.....(2); background-image.....(3); etc } eu vou no elements do chome e está lá no HEAD conforme quero mas não carrega na página e dá este erro no console. – o que pode estar acontecendo ? ?
  8. Olá, eu estou estudando CSS e estou com um problema que já pesquisei e não consegui entender direito, a dúvida é: como remover um item (nesse caso, uma imagem por exemplo) quando a pessoa estiver, por exemplo, usando um celular para ver o site? Ou seja, quem acessar pelo pc, conseguirá ver a imagem, quem acessar pelo celular, não verá
  9. Boa noite! Preciso de ajuda... Estou fazendo o código de responsividade, o código para telas grandes eu já fiz, agora estou trabalhando no programação do código para telas pequenas. Eu tenho uma lista que possui imagens nas <li>, porém quando for resolução menor (480px) eu quero que as imagens mudem para outras. Exemplificando: Código para resolução minima de 760px: <section id="body-whats"> <ul> <li><a href="link" target="_blank"><img src="imagem 1"></a> <li><a href="link" target="_blank"><img src="imagem 2"></a> <li><a href="link" target="_blank"><img src="imagem 3"></a> </ul> </section> Código para resolução minima de 480px: Para resolução menor eu quero trocar as imagens: imagem 1 imagem 2 imagem 3 por imagem x imagem y imagem z Como poderia fazer isso usando apenas html e CSS? OBS: Nas DIVs que eu tenho imagens, eu consegui fazer a mudança de imagem com o seguinte atributo: <picture> <source media="(max-width:480px)" srcset="../image/bg-phone.png"> <source media="(max-width:780px)" srcset="../image/bg-tablet.png"> <source media="(min-width:800px)" srcset="../image/bg-topo3.jpg"> <img src="../image/bg-topo3.jpg" width=100%> </picture>
  10. Vaga: Web designer - WordPress Estamos com vaga aberta para Web Designer com experiência em WordPress para atuar na área de Marketing. Principais atividades: Desenvolvimento e manutenção de websites em ambiente WordPress. Criação de artes gráficas para o uso no ambiente web, que atendam sites, redes sociais e anúncios para campanhas de marketing. Requisitos: Grande experiência em Wordpress com desenvolvimento de layouts responsivos e também com instalação de plugins/componentes. Conhecimento dos formatos e tamanhos de imagens para site, rede sociais, e para anúncios de campanhas de marketing. Conhecimentos de HTML | CSS | SEO. Excelentes habilidades no PACOTE ADOBE (Illustrator e Photoshop). Detalhes: VAGA CLT - Período Integral - Home Office Estamos localizados em condomínio empresarial próximo à Unicamp. Detalhes da empresa e local, clique aqui. Interessados, por favor preencher o formulário ao lado até 31/Maio/2020. Interessados deverão enviar o portfólio e realizar o cadastro nesse link: https://go.vulcanet.com.br/vaga-web-designer
  11. Olá, tenho um form que pede um codigo enviado por email para o usuário confirmar, essa mesma pagina já está gerada o código dentro de uma variável. O que eu preciso é que no momento que o usuário digitar o codigo nesse input text que é composto de 6 digitos, o botão submit habilite (mas somente se o que foi digitado corresponder a variavel). Segue abaixo o meu Form. <input type="text" class="textenv" maxlength="6" placeholder="Digite o código enviado:"></input> <button type="submit" class="btncria" >Confimar<font color="#fff"></font></button> Alguem sabe como utilizar js nesse caso? Muito obrigado!!
  12. Olá, estou com uma dificuldade para posicionar um elemento. Se trata de um pop-up que aparece na tela ao clicar. Acontece que esse pop-up não fica centralizado em todas as telas dependendo da resolução. No momento estou usando o position absolute, a div é essa abaixo: .form-structor { background-color: #222; border-radius: 15px; height: 550px; width: 450px; position: absolute; top: -100px; left: 170px; overflow: hidden; } Também já tentei: {position: relative; top: 50%; left: 50%;} Alguém pode me ajudar? Qual propriedade eu utilizo para ficar centralizado tanto horizontal e quanto vertical em qualquer resolução?
  13. FabianoSouza

    CSS responsivo - agrupar boxes

    Pessoal, estou refazendo meu site com base num "modelo" que encontrei por aí. Estou enfrentando dificuldade para montar o layout dentro da tag header . Coloquei duas imagens para ilustrar o resultado que preciso atingir em desktop (os 4 itens exibidos em 2 pares) e em mobile (os 4 itens exibidos em coluna). Provisoriamente estou colocando o site nesse link, link para testes onde é possível ver tudo (HTML, CSS, JS e etc). O arquivo que tem as regras CSS da página é o css.css. Peço ajuda ao colegas para conseguir ajustar essa parte central do layout :-) (não se apeguem às cores fortes do que estou usando dentro da HEADER ...são apenas para testes)
  14. Boa noite amigos, tudo bem? Estou montando um site com materialize, inseri um carousel-slider porem ele nao da autoplay, alguem sabe me dizer qual o problema? segue meu codigo para detalhar <!DOCTYPE html> <html lang="pt-BR"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0" /> <title>Lab Ingressos - Sua Melhor Experiência em Entretenimento</title> <!-- CSS --> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection" /> <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection" /> <script src="https://unpkg.com/ionicons@5.0.0/dist/ionicons.js"></script> </head> <body class="grey lighten-4"> <?php include_once 'inc/menu_nav.php';?> <div class="tabs-content carousel carousel-slider"> <a class="carousel-item" href="#one!"><img src="img/img1.jpg"></a> <a class="carousel-item" href="#two!"><img src="img/logo_LAB_full.png"></a> <a class="carousel-item" href="#three!"><img src="img/img2.jpg"></a> </div> (function ($) { $(function () { $(".sidenav").sidenav(); $('.carousel.carousel-slider').carousel({ fullWidth: true, duration: 200, }); $(".collapsible").collapsible(); $("#textarea1").val(""); M.textareaAutoResize($("#textarea1")); $(document).ready(function () { $("select").formSelect(); }); }); // end of document ready\ })(jQuery); // end of jQuery name space
  15. Artes Ussler

    Recolher menu vertical em mobile

    Boa tarde! Fiz um menu vertical de navegação usando Bootstrap 4, conforme código abaixo: <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> </head> <body> <nav class="navbar navbar-light"> <h4>CATEGORIAS</h4> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#conteudoNavbarSuportado" aria-controls="conteudoNavbarSuportado" aria-expanded="false" aria-label="Alterna navegação"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse flex-column" id="conteudoNavbarSuportado"> <h4>FRIGORÍFICO</h4> <ul class="navbar-nav mr-auto"> <li class="" style="display: block;"><a class="nav-link ml-2 py-1 link-subcategoria" href="">TOUCAS</a> </li> <li class=""><a class="nav-link ml-2 py-1 link-subcategoria" href="">CAMISAS</a> </li> <li class=""><a class="nav-link ml-2 py-1 link-subcategoria" href="">CAMISETAS</a> </li> <li class=""><a class="nav-link ml-2 py-1 link-subcategoria" href="">BLUSAS</a></li> <li class=""><a class="nav-link ml-2 py-1 link-subcategoria" href="">CALÇAS</a></li> <h4 class="mt-2 px-2 py-0" href="" style="font-weight: 700">PROTEÇÃO</h4> </ul> </div> </nav> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> </body> </html> Está funcionando em partes. Preciso que, quando o site é carregado em telas grandes, o menu apareça expandido, e quando for aberto em telas menores (mobile), o menu fosse recolhido. Mas importante: o menu deverá estar sempre na vertical. Se alguém puder ajudar, fico grato.
  16. galera bom dia. tenho uma dúvida aqui. pela experiencia de vocês tem alguma vantagem no uso de :: no lugar de : nos pseudo elementos em css? a pergunta se refere ao fato do IE 8 não suportar o double-colon mas ao que parece, do IE9 pra frente e todos os outros browser que suporta pseudo elementos também suporta o single-colon. então mesmo que o IE8 seja já a essa altura bem pouco usado não ia ser melhor usar sc pra dar um suporte a esses gajos que usam ele? agradecido.
  17. ViniciusRamoa

    Slide CSS com margem grande

    Olá, estou criando um projeto no laravel e estou com um problema na parte de css, criei um slide "arrastavel" para ser exibida algumas imagens, mas a borda entre uma imagem e outra está grande demais Imagem de como está: Imagem de como deveria ser o tamanho do espaço entre as imagens: Código pag.blade.php: @section('hotmanga') @if (count($hotMangaList)>0) <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale-1, maximum-scale=1"> <link rel="stylesheet" type="text/css" href="swiper.min.css"> <link rel="stylesheet" type="text/css" href="swiper.min.css"> </head> <body> <div class="swiper-container"> <div class="swiper-wrapper"> @foreach ($hotMangaList as $manga) <div class="swiper-slide"> <li> <div class="imgBx" style="position: relative; z-index: 10; background: rgb(255, 255, 255) none repeat scroll 0% 0%;"> <img src='{{HelperController::coverUrl("$manga->manga_slug/cover/cover_250x350.jpg")}}' alt='{{ $manga->manga_name }}' /> <div class="well"> <p> <i class="fa fa-book"></i> {{ "#".$manga->chapter_number." ".$manga->chapter_name }} </p> </div> </div> </li> </div> @endforeach </div> </div> <!-- divisão --> <script type="text/javascript" src="swiper.min.js"></script> <script> var swiper = new Swiper('.swiper-container', { effect: 'coverflow', grabCursor: true, centeredSlides: true, slidesPerView: 'auto', coverflowEffect: { rotate: 7, stretch: 0, depth: 100, modifier: 1, slideShadows : true, }, pagination: { el: '.swiper-pagination', }, }); </script> </body> </html> @endif @stop Código CSS do slide: .swiper-container { width: 250px; height: 350px; padding-top: 20px; padding-bottom: 50px; position: left; } .swiper-slide { background-position: center; background-size: cover; width: 250px; height: 350px; background: #2e7ab9; } .swiper-slide .imgBx { width: 250px; height: 350px; overflow: hidden; } .swiper-slide .imgBx img { width: 250px; height: 350px; } .swiper-slide .details { box-sizing: border-box; } Código "limpo" onde o slide funciona normalmente: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale-1, maximum-scale=1"> <link rel="stylesheet" type="text/css" href="swiper.min.css"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="imgBx"> <img src="https://img.freepik.com/vetores-gratis/imagens-animadas-abstratas-neon-lines_23-2148344065.jpg?size=626&ext=jpg"> </div> </div> <div class="swiper-slide"> <div class="imgBx"> <img src="https://img.freepik.com/vetores-gratis/imagens-animadas-abstratas-neon-lines_23-2148344065.jpg?size=626&ext=jpg"> </div> </div> </div> <!-- divisão --> </div> <div class="swiper-pagination"></div> </div> <script type="text/javascript" src="swiper.min.js"></script> <script> var swiper = new Swiper('.swiper-container', { effect: 'coverflow', grabCursor: true, centeredSlides: true, slidesPerView: 'auto', coverflowEffect: { rotate: 7, stretch: 0, depth: 100, modifier: 1, slideShadows: true, }, pagination: { el: '.swiper-pagination', }, }); </script> </body> </html> Obrigado pelo seu tempo e ajuda
  18. Estou migrando para o frontend recentemente e tenho tido dificuldades para lidar com a formatação de estilos com o CSS, alguém poderia me ajudar? Minha intenção é que o conteúdo destacado em vermelho ocupe o local da marcação verde e o resto fique centralizado na tela. Estou usando o ReactJS para a composição, porém o CSS segue as mesmas regras do tradicional com HTML puro. Como podem ver até pela imagem, design não é meu ponto forte. Código do JSX (Componente do React): <div className="login-container"> <section className="form"> <form> <h1>Bem vindo!</h1> <input type="text" placeholder="Login" /> <input type="password" placeholder="Senha" /> <p>Possuo um Token</p> <input type="text" placeholder="Token" className="token-input" /> </form> </section> </div> Código do CSS: .login-container{ display: flex; align-items: center; justify-content: center; width: 100%; max-width: 1120px; height: 100vh; margin: 0 auto; } .login-container section.form{ width: 100%; max-width: 350px; } .login-container section.form form{ display: flex; justify-content: center; width: 100%; max-width: 1250px; height: 100%; max-height: 700px; } .login-container section.form form h1{ color: #fff; font-weight: bolder; text-shadow: #1B182E 2px 2px 8px; font-size: 42px; margin-bottom: 32px; position: absolute; margin-top: -65px; background: transparent; } .login-container section.form form input{ display: flex; justify-content: space-between; margin: 5px; width: 180px; height: 40px; max-width: 100%; font-weight: bold; padding: 8px; border-radius: 5px; color: white; background: #0A0816; border: solid #0D0929 2px; } .login-container section.form form p{ } .login-container section.form form input + p + input{ background: black; border: solid yellow 2px; } Pra quem não estiver afim de interpretar todo o código para tentar ajudar apenas diga o que você imagina que resolverá o problema. Obrigado desde já :)
  19. sander147

    Como por o menu do lado direito

    Boa Tarde, estou com um problema ao por o menu ao lado direito, ele não fica alinhado com o campo de notícias, eu não faço ideia de como fazer eles ficarem lado a lado, alguém poderia me dar uma luz? eu estou seguindo um livro da casa do código mas os resultados não saíram iguais depois que eu fui além do livro. :/ Deveria ficar assim: https://uploaddeimagens.com.br/images/002/561/267/original/menu.png?1585683825 Ficou assim:
  20. Olá galera! Estou criando um jogo da velha para coloca no meu portfólio, porem estou com um pequeno problema que não consigo resolver.. Quando o jogo finaliza a tela da uma ampliada/expandida no tamanho é quase imperceptível porem é algo que eu gostaria de mudar. Qual propriedade posso usar no css pra evitar que isso aconteça? Código CSS: :root{ --O-color: rgb(10, 177, 243); --X-color: rgb(253, 148, 148); --E-color: rgb(0, 0, 0); } * { margin: 0; padding:0; box-sizing: border-box; } body { display: grid; align-items: center; justify-content: center; font-family: grenze; height: 100vh; background-color: rgb(153, 153, 153); } .nextPlayer{ color: rgb(60, 62, 63); border: 1px solid rgb(211, 223, 104); box-shadow: 3px 5px 12px rgb(0, 0, 0); } .players { color: rgb(60, 62, 63); border: 1px solid rgb(211, 223, 104); box-shadow: 3px 5px 12px rgb(0, 0, 0); height: 55px; display: flex; flex-direction: column; justify-content: space-evenly; } .player{ display: flex; } .topo { display: flex; flex-direction: row; align-items: center; justify-content: space-evenly; margin-bottom: 20px; } .topo .players, .topo .nextPlayer { font-family: grenze; font-weight: bold; border-radius: 4px; } .title { font-size: 3rem; color: rgb(60, 62, 63); margin-bottom: 0; } .title2 { display: none; } .board { display: grid; grid-template-columns: repeat(3, 178px); grid-template-rows: repeat(3, 130px); gap: 1rem; cursor: pointer; } .board.game-over{ opacity: 0.10; } .cell { display: grid; align-items: center; justify-content: center; background-color: white; border-radius: 4px; font-size: 2rem; font-weight: bold; color: #00000066; } .cell:not(.O):not(.X):hover { box-sizing: 0 20px 25px -5px rgba(0, 0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0, 0.4); } .cell.O, .cell.X, .game-over .cell { cursor: not-allowed; } .cell.O { background-color: var(--O-color); } .cell.X { background-color: var(--X-color); } footer{ text-align: center; font-size: 30px; } .winner-message{ margin: 1rem; } .winner-message span.O{ color: var(--O-color); } .winner-message span.X{ color: var(--X-color); } .winner-message span.E{ color: var(--E-color); } button { padding: 0.9rem 1.5rem; border: none; border-radius: 5px; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0, 0.6); background-color: rgb(68, 255, 146); color: white; font-size: 1.2rem; cursor: pointer; } @media only screen and (max-width: 767px) and (orientation:portrait) { body { width: 100%; text-align: justify; } .board{ grid-template-columns: repeat(3, 88px); grid-template-rows: repeat(3, 80px); -webkit-tap-highlight-color: transparent; } button { font-size: 10px; } .cell { border-radius: 3px; font-size: 1rem; } footer { font-size: 13px; } .title { font-size: 1.5rem; display: none; padding: 0.6em; /* transform: translateY(80%); */ } .title2 { display: flex; font-size: 1.5rem; padding: 0.6em; color: rgb(60, 62, 63); } .topo{ flex-direction: column; } .players { height: 65px; width: 95px; align-items: center; } .nextPlayer{ text-align: center; height: 22px; width: 118px; /* transform: translateY(-150%); */ } } @media only screen and (max-width: 767px) and (orientation:landscape) { body { width: 100%; text-align: justify; } .board { grid-template-columns: repeat(3, 60px); grid-template-rows: repeat(3, 60px); -webkit-tap-highlight-color: transparent; } footer { font-size: 0.5rem; display: flex; flex-direction: row; align-items: center; justify-content: space-evenly; } button { font-size: 0.5rem; } .title { font-size: 0.8rem; } .players{ height: 30px; width: 50px; align-items: center; font-size: 0.5rem; } .nextPlayer{ text-align: center; height: 14px; width: 60px; font-size: 0.5rem; } .cell { border-radius: 3px; font-size: 0.8rem; } } @media only screen and (min-width: 991px) and (max-width: 1200px) { body { width: 100%; text-align: justify; } }
  21. Luiz Felipi Barone

    Erro ao inserir bootstrap

    Caros amigos, Sou novo na área e estou cursando técnico Para treinar resolvi atualizar um site de um jogo antigo. ( 2007 ). Primeiramente modifiquei banner's mudei algumas partes do layout's. E comecei configurar algumas coisas novas no site. A Ideia era adicionar um modal de cadastro porém quando adiciono o bootstrap a pagina fica inteira desconfigurada. Sem bootstrap inserido: https://imgur.com/d6Q65iA Com bootstrap inserido: https://imgur.com/HSUc628 Alguém tem ideia do que poderia ser ? Grato, desde já !
  22. Eu não estou conseguindo declarar um span com a pseudo-classe action. Estou declarando o span errado, pois ele não reconhece o comando action e hover : ( Ja tentei deixar só span, mas como esta dentro de um <p> ele também não reconhece, tiro o <p> ele faz a ação ) Ja tentei declarar por: span:action span.destaque_glossario:action p.destaque_glossario span.destaque_glossario p:action e nada T.T Mas se eu declarar .destaque:action ao clicar no texto ele aceita, mas eu gostaria que fosse apenas na palavra. div.glossario { background-color: #fdeae4; padding: 1em; border-radius: 10px; margin-left: auto; margin-right: auto; border-top: 3px solid #7e3e3b; max-width: 600px; margin-left: auto; margin-right: auto; position: absolute; top: 20%; left: 70%; display: none; } div.glossario p { text-indent: 0; margin-top: 0; margin-bottom: 0; } span.destaque_glossario { font-weight: bold; color: #3d8177; } span.destaque_glossario:active + div.glossario { display: block; } <body> <div class="destaque"> <p> Completa a coleção um caderno de gramática que atende a todos os anos do Fundamental II – do 6o ao 9o. Esse manual básico contém as principais normas referentes ao padrão linguístico, todas acompanhadas de exemplos correspondentes.trabalha interdisciplinaridade. <span class="destaque_glossario">Ética:</span> trabalha interdisciplinaridade. Seu conteúdo compreende cinco eixos temáticos: fonética, morfologia, sintaxe, semântica, estilística. </p> </div> <div class="glossario"> <p> <span class="destaque_glossario">Ética:</span> valores e modos de agir considerados como corretos </p> </div> </body>
  23. Boa noite. Estou estudo POO com PHP e fiz uma classe Pen.php. Inclui um echo com parágrafo nesse código que gostaria de alterar a cor da fonte de acordo com o atributo color da caneta. Pesquisei no Google e sugeriram fazer um arquivo php com as formatações, mas não obtive sucesso. Estou utilizando Apache como server local, última versão disponível do XAMPP. Mesma coisa para a versão do PHP. Segue o código dos arquivos: index.php <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" media="screen" href="style.php" /> <title>POO Lesson 02</title> </head> <body> <div> <label id="model"></label> </div> <?php require_once 'Pen.php'; $c1 = new Pen(); $c1->model = "bic"; $c1->color = "blue"; $c1->charge = 80; $c1->tip = 0.5; $c1->capped = false; $c2 = new Pen(); $c2->model = "faber-castell"; $c2->color = "red"; $c2->charge = 50; $c2->tip = 0.75; $c2->capped = true; print_r($c1); echo "<br>"; print_r($c2); $c1->scribble(); $c2->scribble(); ?> </body> </html> Pen.php <?php class Pen { var $model; var $color; var $tip; var $charge; var $capped; function scribble(){ if($this->capped == true){ echo "<p>ERROR! The pen ".$this->model." ".$this->color." is capped!</p>"; } else{ if($this->color=="blue"){ echo "<p style='color: blue;'>I'm scribbling with the pen ".$this->model." ".$this->color." ...</p>"; } else{ echo "<p id='c2'>I'm scribbling with the pen ".$this->model." ".$this->color." ...</p>"; } } } function cap(){ if($this->capped == true){ echo "<p>ERROR! The pen ".$this->model." ".$this->color." is already capped!</p>"; } else{ $this->capped = true; echo "<p>The pen ".$this->model." ".$this->color." is capped!</p>"; } } function uncap(){ if($this->capped == false){ echo "<p>ERROR! The pen ".$this->model." ".$this->color." is already uncapped!</p>"; } else{ $this->capped = false; echo "<p>The pen ".$this->model." ".$this->color." is uncapped!</p>"; } } } style.php <?php header("Content-type: text/css; charset: UTF-8"); require_once 'Pen.php'; $c0 = new Pen(); $color = $c0->color; ?> c2 { color: <?php echo $color; ?>; } <?php header("Content-type: text/css; charset: UTF-8"); require_once 'Pen.php'; $c0 = new Pen(); $color = $c0->color; ?> c2 { color: <?php echo $color; ?>; }
  24. wsoalves

    Trocar Icon com CSS no Wordpress

    Olá, eu estava mexendo em um Tema Wordpress, e no final do menu tem alguns ícones de social mídia que posso trocar selecionando em um biblioteca interna. Mas não tem o ícone do whatsapp para eu escolher Queria saber se tem alguma forma de trocar ícones assim no editor CSS colocando o Fontawesome no lugar por exemplo "<i class="fab fa-whatsapp"></i>" Obrigado!
  25. Carcleo

    Efeito em insertAfter

    Tenho um botão, que pega a primeira li da ul e joga ela para a ultima posição ininterruptamente e assim eu faço um efeito de slideshow. HTML: <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="slider"> <ul> <li> Slide 1 </li> <li> Slide 2 </li> <li> Slide 3 </li> <li> Slide 4 </li> </ul> <button id="back"> BACK </button> <button id="next"> NEXT </button> </div> CSS: * { margin: 0; padding: 0; } body { display: flex; width: 1000px; margin: 0 auto; } .slider { position: relative; display: flex; flex-direction: column; width: 1000px; height: 200px; overflow: hidden; border: 1px solid #000; } .slider > ul { display: flex; flex-wrap: wrap; width: 5000px; } .slider > ul > li { display: flex; justify-content: center; width: 500px; height: 150px; margin: 10px; } .slider > ul > li:hover { cursor: crosshair; } .slider > button { position: absolute; display: flex; justify-content: center; top: calc(45% - 15px); width: 30px; height: 30px; opacity: 0.2; } .slider > button:hover { opacity: 1; cursor: pointer; } .slider > button#back { left: 10px; } .slider > button#next { right: 10px; } .animacao { animation-duration: 4s; animation-name: identifier; } @keyframes identifier { 0% { right: 0; } 50% { right: 50%;} 75% { right: 75%; } 100% { right: 100%; } } JQUERY: function intervalo () { $(".slider > #next").click (); } var interval = setInterval(intervalo,4000); $(".slider > ul > li") .mouseover(function(){ clearInterval(interval); }) .mouseout(function(){ interval = setInterval(intervalo,4000); }) .addClass("animacao"); $(".slider > #back").click ( function(){ var liMover = $('.slider ul li:last-of-type'); // copia o conteudo da última $(liMover).insertBefore('.slider ul li:first-of-type'); // insere antes da primeira }); $(".slider > #next").click ( function(){ var liMover = $('.slider ul li:first-of-type'); // copia o conteudo da primeira $(liMover).insertAfter('.slider ul li:last-of-type'); // insere depois da última }); Tudo funciona bem. Mas estou tentando adicionar um efeito de transição tipo quando as lis mudarem de posição, elas correrem da direita para a esquerda em vez de aparecerem abruptamente. Será que tem como?
×

Important Information

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