 |
|
Você está aqui: 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: 8898 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}
|
 Link para compartilhar na Internet ou com seus amigos: |
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: 2766 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 um botão HTML usando a propriedade background-image do CSSQuantidade de visualizações: 9431 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 com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<!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 com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<!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 ::: 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: 1438 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 com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<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. |
Vamos testar seus conhecimentos em |
| Dimensionamento de pilares de canto A direção mais crítica de um pilar de canto é determinada na comparação entre o índice de esbeltez do pilar e a esbeltez limite. Analise o pilar a seguir:  Sobre esse pilar de canto, assinale a alternativa correta. A) A direção x é a mais crítica, e nela não são considerados os momentos de 2ª ordem. B) A direção y é a mais crítica, e nela não são considerados os momentos de 2ª ordem. C) A direção x é a mais crítica, e nela são considerados os momentos de 2ª ordem. D) A direção y é a mais crítica, e nela são considerados os momentos de 2ª ordem. E) Ambas as direções x e y são críticas, e nelas são considerados os momentos de 2ª ordem. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Ética e Legislação Profissional |
| Ética, Legislação e Entidades que regulamentam a profissão Pensando no papel dos códigos de conduta ética desenvolvidos pelas empresas, qual afirmativa a seguir é incorreta? A) Podem ser apresentados através das políticas e objetivos da empresa, bem como pode ser repassado de modo informal através da cultura da empresa. B) Em geral, os códigos abordam temas relativos à qualidade dos serviços e produtos, assuntos sigilosos, tratamento de clientes e fornecedores, entre outros. C) O código de ética é a referência suprema para conduta dos funcionários, sendo, inclusive, mais relevante que as leis e códigos das entidades de classe em uma situação de impasse. D) Você deve sempre procurar seguir o código de conduta ética de sua empresa, o que lhe orientará na qualidade do trabalho e relacionamento com colegas, clientes e fornecedores. E) É correto, em uma entrevista de trabalho, abordar o código de ética da organização, solicitando-o e perguntando sobre alguma temática. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Engenharia Civil - Construção Civil |
| Alvenaria: Técnicas construtivas As alvenarias possuem espessuras variáveis, e o posicionamento dos tijolos ou blocos é item do projeto que influencia no desempenho da edificação e no isolamento térmico e acústico, por exemplo. Quando a alvenaria é erguida tendo tijolo maciço no sentido de sua menor espessura, denomina-se alvenaria de: A) Meio tijolo. B) Um tijolo. C) Cutelo. D) Um tijolo e meio. E) Oca. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Fundações |
| Fundações rasas Uma fundação do tipo radier é, convencionalmente, uma laje de concreto usada quando, EXCETO: A) O solo é mole, com baixa capacidade de carga. B) É necessário combater a sobrepressão hidrostática. C) Há ocorrência de bolsões de solos moles variáveis sob a projeção da estrutura. D) A sapata corrida cobre 40% acima da área de fundação por causa de cargas elevadas de pilares. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em JavaScript |
| Qual é a sintáxe correta para referenciar um arquivo JavaScript externo chamado "auxiliar.js"? A) <script name="auxiliar.js"> B) <script src="auxiliar.js"> C) <script href="auxiliar.js"> 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 |
