 |
|
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: 8933 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 |
Como definir uma imagem de fundo fixa para suas páginas HTML em CSS usando as propriedades background-image, background-repeat e background-attachmentQuantidade de visualizações: 10927 vezes |
|
Nesta dica mostrarei como combinar as propriedades CSS background-image, background-repeat e background-attachment para definir uma imagem de fundo fixa para a página. Dessa forma, a imagem não será repetida e e permanecerá fixa no fundo da página, ou seja, não vai rolar com o restante do conteúdo. Veja como o exemplo ficará na imagem abaixo (é claro que sua imagem de fundo será diferente):  Veja o código HTML completo para o exemplo, incluindo as definições de estilo CSS: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<head>
<title>Estudando CSS</title>
<meta name="viewport" content="width=device-width,
initial-scale=1">
<style type="text/css">
body {background-image: url(fundo.jpg);
background-repeat: no-repeat;
background-attachment: fixed}
</style>
</head>
<body>
</body>
</html>
|
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: 2742 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. |
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: 8009 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 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">
<style type="text/css">
body {background-image: url('fundo2.jpg')}
</style>
</head>
<body>
</body>
</html>
|
Vamos testar seus conhecimentos em AutoCAD Civil 3D |
| COGO Points no AutoCAD Civil 3D Qual parâmetro do COGO point é controlado pela configuração Point Identity na barra de ferramentas Create Points? A) Point location (Localização do ponto) B) Point name (Nome do ponto) C) Point description (Descrição do ponto) D) Point number (Número de ponto) Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Engenharia Civil - Instalações Hidráulicas Prediais |
| Perda de Carga Localizada, Acessórios de Tubulação Qual a perda de carga singular em um conduto de 100 m, diâmetro de 100 mm, com um fluido escoando a 2 m/s, apresentando as seguintes singularidades rosqueadas na tubulação: válvula globo totalmente aberta e cotovelo de 45º com raio normal? Selecione a resposta: A) 1,16 m. B) 0,61 m. C) 0,06 m. D) 1,22 m. E) 0,00 m. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Fenômeno de Transportes e Hidráulica |
| Turbinas hidráulicas Turbinas hidráulicas têm como principal aplicação a geração de energia, transformando energia cinética da água em energia mecânica, que será posteriormente convertida em energia elétrica. Sobre as turbinas hidráulicas, marque a alternativa correta: A) Uma turbina do tipo Francis apresenta uma baixa eficiência e pode ser operada apenas em baixas vazões. B) Uma turbina do tipo Francis tem eficiência relativamente baixa, porém tem ampla faixa de operação. C) A turbina do tipo Pelton tem um conjunto de pás fixas que podem ajustar o ângulo de entrada da água. D) A turbina do tipo Kaplan foi adaptada a partir da turbina de hélice e pode ser operada em grandes vazões. E) Uma turbina do tipo Pelton tem suas pás em formato de conchas e são operadas em grandes vazões. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Fundações |
| Fundações profundas As estacas Strauss podem ser armadas com ferragem longitudinal (barras retas) e estribos que permitam livre passagem do soquete de compactação e garantam um cobrimento da armadura não inferior a 3cm. A estaca Strauss é recomendada: A) apenas em terrenos com comprimento fixo de cravação. B) em trabalhos abaixo do lençol freático. C) em terrenos com comprimento variável de cravação. D) com a disponibilidade de equipamentos robustos e complexos na execução. E) em áreas não suscetíveis à presença de agentes biológicos. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Engenharia Civil - Construção Civil |
| Fases de uma obra Em relação aos conceitos envolvidos na elaboração de um orçamento de obras, assinale a alternativa correta. A) Custos diretos são aqueles em que é necessário estipular um fator de rateio para que sejam apropriados aos serviços. B) Devem ser incluídas no título "desmobilização" de um orçamento as despesas com locação, fechamento, tapumes, demolições e relocações. C) A administração do canteiro de obras e as despesas decorrentes da administração da empresa fazem parte dos custos diretos de uma obra. D) Como regra, orçam-se os preços na construção civil por serviço, determinando-os segundo a produção de composições unitárias. E) Em um solo, caso seja necessário escavar 1 m3 do terreno, deve-se orçar, no item referente à escavação do material, o valor 1,4 m3. Verificar Resposta Estudar Cards Todas as Questões |
Veja mais Dicas e truques de CSS |
Dicas e truques de outras linguagens |
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 |
