Você está aqui: CSS ::: Dicas & Truques ::: Cores de Fundo e Imagens de Fundo |
Como definir uma imagem de fundo para um botão HTML usando a propriedade background-image do CSSQuantidade de visualizações: 9549 vezes |
Nesta dica mostrarei como podemos usar a propriedade background-image do CSS para aplicar uma imagem de fundo a elemento <button> do HTML. Vamos ver duas abordagens. Na primeira abordagem usaremos CSS inline. Veja:---------------------------------------------------------------------- Se precisar de ajuda para ajustar o código abaixo de acordo com as suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar) Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar a manter o site livre de anúncios. Ficaremos eternamente gratos ;-) Nosso PIX é: osmar@arquivodecodigos.com.br ---------------------------------------------------------------------- <!doctype html> <html> <head> <title>Estudos CSS</title> </head> <body> <button style="background-image: url('fundo.jpg')"> Clique aqui</button> </body> </html> Agora veja a mesma técnica usando um bloco CSS na seção <head> da página HTML e definindo um id para o botão: ---------------------------------------------------------------------- Se precisar de ajuda para ajustar o código abaixo de acordo com as suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar) Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar a manter o site livre de anúncios. Ficaremos eternamente gratos ;-) Nosso PIX é: osmar@arquivodecodigos.com.br ---------------------------------------------------------------------- <!doctype html> <html> <head> <title>Estudos CSS</title> <style> #botao{ background-image: url('fundo.jpg'); } </style> </head> <body> <button id="botao">Clique aqui</button> </body> </html> |
![]() |
CSS ::: Dicas & Truques ::: Barras de Navegação, Menus e Dropdowns |
Como criar uma barra de menus na horizontal usando CSS e o valor inline-block para a propriedade displayQuantidade de visualizações: 514 vezes |
Nesta dica mostrarei como podemos criar uma barra de menus horizontal usando CSS. Para isso cada item de menu será um elemento <li>, contidos dentro de um elemento <ul>. O truque é definir o valor inline-block para a propriedade display de cada elemento <li>. Veja a página HTML e CSS completa para o exemplo: ---------------------------------------------------------------------- Se precisar de ajuda para ajustar o código abaixo de acordo com as suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar) Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar a manter o site livre de anúncios. Ficaremos eternamente gratos ;-) Nosso PIX é: osmar@arquivodecodigos.com.br ---------------------------------------------------------------------- <!doctype html> <html> <head> <title>Estudos CSS</title> <style> #menu{ background-color: #eeeeee; list-style-type: none; text-align: center; margin: 0; padding: 0; } #menu li { display: inline-block; font-size: 20px; padding: 20px; text-decoration: none; } #menu li a{ text-decoration: none; } </style> </head> <body> <h1>Exemplo de Barra de Menu Horizontal</h1> <p>Veja como podemos usar o valor inline-block para a propriedade display do CSS para criar uma barra de menu na horizontal</p> <ul id="menu"> <li><a href="index.php">Início</a></li> <li><a href="servicos.php">Serviços</a></li> <li><a href="produtos.php">Produtos</a></li> <li><a href="contatos.php">Contatos</a></li> </ul> </body> </html> |
CSS ::: Dicas & Truques ::: Cores de Fundo e Imagens de Fundo |
Como definir uma imagem de fundo que se repete apenas verticalmente usando a propriedade background-repeat do CSSQuantidade de visualizações: 7503 vezes |
Nesta dica mostrarei como podemos definir uma imagem de fundo para a página HTML e ajustá-la para repetir apenas verticalmente usando a propriedade background-repeat com o valor repeat-y. Note que, para definir a imagem de fundo, nós usamos a propriedade background-image. Veja o código CSS para o exemplo: ---------------------------------------------------------------------- Se precisar de ajuda para ajustar o código abaixo de acordo com as suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar) Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar a manter o site livre de anúncios. Ficaremos eternamente gratos ;-) Nosso PIX é: osmar@arquivodecodigos.com.br ---------------------------------------------------------------------- <style type="text/css"> <!-- body {background-image: url('fundo.gif'); background-repeat: repeat-y} //--> </style> |
CSS ::: Projetos HTML/CSS Completos - Códigos Fonte HTML/CSS/JavaScript ::: Formulários HTML/CSS/JavaScript |
Como criar uma tela de login usando HTML, CSS e JavaScript - Responsivo e com opção de exibir/ocultar senhaQuantidade de visualizações: 3237 vezes |
Nesta dica mostrarei uma combinação muito interessante de HTML5, CSS e JavaScript para a criação de um formulário de login contendo dois campos de texto, um para a inserção do nome de usuário e outro para a inserção da senha: Veja:![]() No final da dica deixei o link para download do arquivo index.html e as imagens usadas no exemplo. Neste código você aprenderá técnicas valiosas de CSS para a criação de formulários HTML, tais como a definição de cores de fundo, espaçamento interno e margens. Além disso, verá como exibir uma imagem ao lado (na verdade dentro) de um campo de senha, de forma que, ao clicar na imagem, a senha digitada pelo usuário seja exibida ou ocultada. Para isso foi usado código JavaScript puro, sem a necessidade de nenhum framework ou biblioteca. Outro detalhe interessante é a responsividade. Ao abrir o exemplo em uma tela reduzida, tal como a tela de um celular, o formulário é ajustado. Para isso você aprenderá a usar as media queries do CSS. Tudo bem simples e comentado. Aqui está a parte do CSS que formata a DIV de recuperação da senha, remove o sublinhado do link e define a sua cor, e a media query que ajusta a largura da DIV principal em telas reduzidas: ---------------------------------------------------------------------- Se precisar de ajuda para ajustar o código abaixo de acordo com as suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar) Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar a manter o site livre de anúncios. Ficaremos eternamente gratos ;-) Nosso PIX é: osmar@arquivodecodigos.com.br ---------------------------------------------------------------------- /* DIV para recuperar a senha */ .div_recuperar_senha{ margin-top: 12px; padding: 10px; background-color: #f1f1f1; text-align: center; } /* retira o sublinhado do link */ .div_recuperar_senha a{ text-decoration: none; color: black; } /* define as regras de responsividade para as telas menores */ @media screen and (max-width: 600px) { .div_principal{ width: 100%; } } E aqui está o código JavaScript que permite exibir ou ocultar a senha do usuário: ---------------------------------------------------------------------- Se precisar de ajuda para ajustar o código abaixo de acordo com as suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar) Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar a manter o site livre de anúncios. Ficaremos eternamente gratos ;-) Nosso PIX é: osmar@arquivodecodigos.com.br ---------------------------------------------------------------------- <script type="text/javascript"> function exibir_ocultar_senha(){ // obtém uma referência ao campo senha const txt_senha = document.getElementById("senha"); // obtém uma referência à imagem indicativa const imagem = document.getElementById(" imagem_exibir_ocultar"); // mudamos o type do campo senha const type = senha.getAttribute('type'); if(type === 'password'){ senha.setAttribute('type', 'text'); imagem.src = "imagens/olho_exibir.png"; } else{ senha.setAttribute('type', 'password'); imagem.src = "imagens/olho_ocultar.png"; } } </script> Gostou? Agora é só baixar o código completo e adicionar estes recursos às páginas web. Código fonte formulário de login em HTML, CSS e JavaScriptResponsivo 1) FLHCJEOS1 - Código fonte formulário de login em HTML, CSS e JavaScript Responsivo - Faça o download do Código fonte formulário de login em HTML, CSS e JavaScript Responsivo. Não se esqueça: Uma boa forma de estudar o código é fazendo pequenas alterações e rodando para ver os resultados. Outra opção é começar um projeto HTML do zero e ir adicionando trechos do código fonte para melhor entendimento de suas partes. |
CSS ::: Dicas & Truques ::: Barras de Navegação, Menus e Dropdowns |
Como criar uma barra de navegação horizontal com menu dropdown em HTML e CSS - Menu suspenso usando CSSQuantidade de visualizações: 811 vezes |
Nesta dica mostrarei como podemos usar uma combinação de várias propriedades CSS para criar um menu suspenso, ou seja, uma barra de navegação contendo links normais e também links que, ao passar o mouse, exibe uma lista de sub-menus. O código apresentado neste exemplo é muito útil para estudantes de HTML e CSS, pois apresenta várias propriedades interessantes para melhorar o visual e a usabilidade de suas páginas web. Entre as propriedades CSS usadas na criação deste menu suspenso nós podemos citar overflow, margin, padding, list-style-type, background-color, display, float, text-align, text-decoration, position, min-width e z-index. Note que coloquei o mínimo de código para fazer a barra de menus funcional. Fique à vontade para acrescentar as formatações que você achar interessante. Veja a página HTML e CSS para o exemplo: ---------------------------------------------------------------------- Se precisar de ajuda para ajustar o código abaixo de acordo com as suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar) Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar a manter o site livre de anúncios. Ficaremos eternamente gratos ;-) Nosso PIX é: osmar@arquivodecodigos.com.br ---------------------------------------------------------------------- <!doctype html> <html> <head> <title>Estudos CSS</title> <style> /* estiliza o elemento <ul> */ ul{ background-color: #e0e0e0; margin: 0; padding: 0; overflow: hidden; list-style-type: none; } /* aplica estilo aos elementos <li> */ li{ float: left; } /* aplica estilo aos links e <li> do sub-menu */ li a, .dropdown_linguagens{ display: inline-block; text-align: center; padding: 10px 15px; text-decoration: none; } /* define o display do <li> de linguagens */ li.linguagens{ display: inline-block; } /* aplica estilo ao menu de linguagens */ .menus_linguagens{ display: none; position: absolute; background-color: #eceff1; min-width: 160px; z-index: 1; } /* aplica estilo aos links do sub-menu */ .menus_linguagens a { padding: 10px 15px; text-decoration: none; display: block; text-align: left; } /* exibe o sub-menu ao passar o mouse */ .linguagens:hover .menus_linguagens{ display: block; } /* aplica uma cor diferente aos menus ao passar o mouse */ .menus_linguagens a:hover{ background-color: #cfd8dc; } </style> </head> <body> <h1>Exemplo de Barra de Navegação com Menu Dropdown</h1> <ul> <li><a href="index.php">Inicial</a></li> <li class="linguagens"> <a href="javascript:void(0)" class="dropdown_linguagens"> Linguagens</a> <div class="menus_linguagens"> <a href="java.php">Java</a> <a href="python.php">Python</a> <a href="ruby.php">Ruby</a> <a href="delphi.php">Delphi</a> </div> </li> </ul> </body> </html> |
CSS ::: Dicas & Truques ::: Cores de Fundo e Imagens de Fundo |
Como definir uma imagem de fundo para a página HTML em CSS usando a propriedade background-imageQuantidade de visualizações: 8236 vezes |
Nesta dica mostrarei como usar a propriedade background-image do CSS (Cascading Style Sheet) para aplicar uma imagem de fundo às nossas páginas HTML. Note que, neste exemplo, não controlamos como e se a imagem de fundo será repetida. Em outras dicas dessa seção você aprenderá como isso pode ser feito. Veja o resultado desta dica na figura abaixo: ![]() E agora veja o código HTML completo para o exemplo, incluindo a marcação CSS: ---------------------------------------------------------------------- Se precisar de ajuda para ajustar o código abaixo de acordo com as suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar) Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar a manter o site livre de anúncios. Ficaremos eternamente gratos ;-) Nosso PIX é: osmar@arquivodecodigos.com.br ---------------------------------------------------------------------- <html> <head> <title>Estudando CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css"> body {background-image: url('fundo2.jpg')} </style> </head> <body> </body> </html> |
CSS ::: Dicas & Truques ::: Media Queries |
CSS3 - O que são CSS media queries e como usá-las em suas páginas web para criar designs responsivosQuantidade de visualizações: 1499 vezes |
Os desenvolvedores web acostumados com o CSS2 com certeza vão se lembrar das media types e como as usávamos, ou ainda usamos, para definir o tipo de mídia para a qual uma determinada folha de estilo será aplicada. Com media types é possível, por exemplo, oferecer estilos diferentes dependendo se o tipo de mídia for all, screen ou print, ou seja, todos os tipos (all), somente tela (screen), ou impressão (print). O CSS3 trouxe ainda mais comodidade por meio das media queries, que, na verdade, são uma extensão das media types. Com as media queries é possível aplicar uma folha de estilo CSS baseado não somente no tipo de mídia, mas também baseado nas características do navegador web, tais como largura e altura do viewport (a área disponível para exibição dos elementos da página web), a largura e altura do dispositivo, sua orientação e resolução, etc. Veja, por exemplo, como podemos aplicar uma imagem de fundo diferente na página HTML dependendo do tamanho da tela: ![]() E aqui o código completo para a página HTML e as definições CSS: ---------------------------------------------------------------------- Se precisar de ajuda para ajustar o código abaixo de acordo com as suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar) Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar a manter o site livre de anúncios. Ficaremos eternamente gratos ;-) Nosso PIX é: osmar@arquivodecodigos.com.br ---------------------------------------------------------------------- <html> <head> <title>Estudando CSS3</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> /* demais resoluções */ body{ background-image: url("horizontal.jpg"); background-repeat: no-repeat; } /* max-width (largura máxima) */ @media screen and (max-width: 600px) { body{ background-image: url("vertical.jpg"); background-repeat: no-repeat; } } </style> </head> <body> </body> </html> Este exemplo é bem simples, mas dará a você uma idéia de como iniciar hoje o mesmo o uso das media queries em CSS. Note que, se a resolução for no máximo 600px, a página terá como fundo a imagem "vertical.jpg". Se a página for aberta em outras resoluções, a imagem de fundo será "horizontal.jpg". Abra o exemplo no seu navegador e experimente redimensionar a janela. Veja como a imagem de fundo é trocada automaticamente ao atingir a resolução que definimos para o atributo max-width da media query. Esta técnica é muito utilizada quando queremos criar uma página web responsiva, ou seja, com design responsivo. |
CSS ::: Dicas & Truques ::: Cores de Fundo e Imagens de Fundo |
Apostila CSS - Como definir a cor de fundo de um elemento HTML usando um valor rgbQuantidade de visualizações: 7311 vezes |
A propriedade background-color aceita um valor de cor que pode ser informado por meio da função rgb(). Esta função aceita valores de 0 até 255 para a cores vermelho, verde e azul, ou seja Red, Green e Blue. Veja a figura abaixo: ![]() A cor de fundo para esta página for gerada com o seguinte código: ---------------------------------------------------------------------- Se precisar de ajuda para ajustar o código abaixo de acordo com as suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar) Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar a manter o site livre de anúncios. Ficaremos eternamente gratos ;-) Nosso PIX é: osmar@arquivodecodigos.com.br ---------------------------------------------------------------------- <html> <head> <title>Estudando CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body style="background-color: rgb(201, 20, 58)"> </body> </html> |
CSS ::: Dicas & Truques ::: Cores de Fundo e Imagens de Fundo |
Exemplos de uso da propriedade background do CSS para definições cores e imagens de fundo em elementos HTMLQuantidade de visualizações: 9012 vezes |
Nesta dica mostrarei alguns exemplos muito úteis da propriedade background do CSS para definirmos cores e imagens de fundo para a página HTML e também para os elementos HTML: Exemplo 1: Como definir a cor de fundo para a página HTML usando a propriedade background: ---------------------------------------------------------------------- Se precisar de ajuda para ajustar o código abaixo de acordo com as suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar) Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar a manter o site livre de anúncios. Ficaremos eternamente gratos ;-) Nosso PIX é: osmar@arquivodecodigos.com.br ---------------------------------------------------------------------- body {background: #0099CC} Exemplo 2: Como definir a cor de fundo e a imagem de fundo para a página HTML usando as propriedades background e url: ---------------------------------------------------------------------- Se precisar de ajuda para ajustar o código abaixo de acordo com as suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar) Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar a manter o site livre de anúncios. Ficaremos eternamente gratos ;-) Nosso PIX é: osmar@arquivodecodigos.com.br ---------------------------------------------------------------------- body {background: #0099CC url(fundo.gif)} Exemplo 3: Como definir a cor de fundo, a imagem de fundo para a página HTML e a forma de repetição usando as propriedade background, url e repeat-x: ---------------------------------------------------------------------- Se precisar de ajuda para ajustar o código abaixo de acordo com as suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar) Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar a manter o site livre de anúncios. Ficaremos eternamente gratos ;-) Nosso PIX é: osmar@arquivodecodigos.com.br ---------------------------------------------------------------------- body {background: #0099CC url(fundo.gif) repeat-x} Exemplo 4: Como definir a cor de fundo, a imagem de fundo para a página HTML, a forma de repetição e como fixar a imagem de fundo usando as propriedade background, url, repeat-x e fixed: ---------------------------------------------------------------------- Se precisar de ajuda para ajustar o código abaixo de acordo com as suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar) Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar a manter o site livre de anúncios. Ficaremos eternamente gratos ;-) Nosso PIX é: osmar@arquivodecodigos.com.br ---------------------------------------------------------------------- body {background: #0099CC url(fundo.gif) repeat-x fixed} Exemplo 5: Como definir a cor de fundo, a imagem de fundo para a página HTML, sem repetição, fixa e posições inicias usando as propriedade background, url, repeat-x e fixed: ---------------------------------------------------------------------- Se precisar de ajuda para ajustar o código abaixo de acordo com as suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar) Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar a manter o site livre de anúncios. Ficaremos eternamente gratos ;-) Nosso PIX é: osmar@arquivodecodigos.com.br ---------------------------------------------------------------------- body {background: #0099CC url(fundo.gif) no-repeat fixed 40 60} |
Vamos testar seus conhecimentos em Python |
Qual o resultado da execução do seguinte código Python?# função usada para trocar dois itens de posição em uma lista def trocar_posicao(lista, pos1, pos2): lista[pos1], lista[pos2] = lista[pos2], lista[pos1] return lista # cria uma lista valores = [1, 2, 3, 4] # define as posições de troca pos1, pos2 = 0, 3 # chama a função de troca e retorna a nova lista print(trocar_posicao(valores, pos1, pos2)) A) [1, 4, 3, 2] B) [3, 2, 4, 1] C) [4, 2, 3, 1] D) [4, 4, 3, 2] E) [4, 3, 2, 1] Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Python |
Analise o seguinte código Pythonpalavra = "python" palavra.upper() print(palavra) A) PYTHON B) Um erro de execução na linha 2 C) python D) Python Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Ética e Legislação Profissional |
O exercício do direito à propriedade Ainda sobre as ações judiciais correlatas aos direitos de vizinhança, mais especificamente sobre as ações de demarcação e divisão de propriedades, retificação de registros imobiliários e relação entre esses procedimentos, assinale a alternativa correta no que toca aos seus objetivos, às hipóteses de cabimento e às demais peculiaridades: A) A ação de demarcação serve para esclarecer os limites divisórios entre dois prédios de dois proprietários diferentes. B) O procedimento de retificação de matrícula serve para individualizar em matrículas separadas um bem que é de propriedade conjunta (condomínio). C) A ação de demarcação dispensa memorial descritivo e prova pericial no processo. D) As ações demarcatória e divisória não podem ser cumuladas na mesma ação, pois têm objetos diferentes. E) Os procedimentos ou as ações de marcação e divisão de propriedades só podem ser realizados judicialmente. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em |
Cisalhamento e detalhamento de vigas Conforme a NBR 6118 (ABNT, 2014), a armadura transversal mínima deve ser colocada nas vigas de modo a garantir a estabilidade das estruturas, mesmo na eventualidade de serem aplicados carregamentos não previstos no cálculo, evitando a ruptura abrupta logo após o surgimento das primeiras fissuras inclinadas. Nesse contexto, qual a armadura transversal mínima necessária por metro de viga, tendo em vista que ela tem seção de 30 x 80cm e altura útil de 77cm? Adote concreto C35 e aço CA-50. A) 2,43cm2/m. B) 2,84cm2/m. C) 3,12cm2/m. D) 3,54cm2/m. E) 3,85cm2/m. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em AutoCAD Civil 3D |
A paleta Toolspace Qual aba da paleta Toolspace é usada para exibir os objetos do Civil 3D em uma lista resumida e expansível? A) Settings B) Prospector C) Toolbox D) Survey Verificar Resposta Estudar Cards Todas as Questões |
Veja mais Dicas e truques de CSS |
Dicas e truques de outras linguagens |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
1º lugar: Java |