 |
|
Você está aqui: CSS ::: Dicas & Truques ::: Cores de Fundo e Imagens de Fundo |
Como definir a posição inicial de uma imagem de fundoQuantidade de visualizações: 8984 vezes |
<style type="text/css">
<!--
body {background-image: url('fundo.gif');
background-position: center center;
background-repeat: no-repeat}
//-->
</style>
|
 Link para compartilhar na Internet ou com seus amigos: |
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: 7247 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 com o código abaixo, pode me chamar no WhatsApp +55 (62) 98553-6711 (Osmar) ---------------------------------------------------------------------- <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: 8945 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 com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
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 com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
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 com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
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 com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
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 com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
body {background: #0099CC url(fundo.gif) no-repeat
fixed 40 60}
|
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: 2962 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 com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
/* 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 com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<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. |
Veja mais Dicas e truques de CSS |
Dicas e truques de outras linguagens |
|
GNU Octave - Como calcular a derivada de uma função usando a função diff() do GNU Octave - Regra do Tombo (ou Regra da Potência) JavaScript - Como converter uma string em um valor de ponto-flutuante em JavaScript usando a função parseFloat() |
Códigos Fonte |
 Software de Gestão Financeira com código fonte em PHP, MySQL, Bootstrap, jQuery - Inclui cadastro de clientes, fornecedores e ticket de atendimentoDiga adeus às planilhas do Excel e tenha 100% de controle sobre suas contas a pagar e a receber, gestão de receitas e despesas, cadastro de clientes e fornecedores com fotos e histórico de atendimentos. Código fonte completo e funcional, com instruções para instalação e configuração do banco de dados MySQL. Fácil de modificar e adicionar novas funcionalidades. Clique aqui e saiba mais |
 Controle de Estoque completo com código fonte em PHP, MySQL, Bootstrap, jQuery - 100% funcional e fácil de modificar e implementar novas funcionalidadesTenha o seu próprio sistema de controle de estoque web. com cadastro de produtos, categorias, fornecedores, entradas e saídas de produtos, com relatórios por data, margem de lucro e muito mais. Código simples e fácil de modificar. Acompanha instruções para instalação e criação do banco de dados MySQL. Clique aqui e saiba mais |
Linguagens Mais Populares |
|
1º lugar: Java |
