 |
|
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: 9422 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>
|
 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 ::: 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: 1433 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. |
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. |
Vamos testar seus conhecimentos em Engenharia Civil - Instalações Hidráulicas Prediais |
| Instalações prediais de águas pluviais Um professor de engenharia que gostava de fazer os alunos pensarem ativamente e questionarem a base das tabelas e ábacos fez uma pergunta em classe a partir dos ábacos da NBR 10844 de instalações prediais de águas pluviais: por que os ábacos com saída do tipo aresta viva fornecem maiores diâmetros que as do tipo funil? Cinco principais explicações foram fornecidas pelas classes, mas apenas uma estava correta. Marque a opção que explica corretamente o fenômeno. A) As saídas do tipo aresta viva fornecem maior capacidade de escoamento por permitir maior lâmina de água imediatamente sobre a entrada. B) As saídas do tipo funil geram aumento da perda de carga, ocasionando uma redução da capacidade hidráulica, que é, então, expressa no ábaco. C) As saídas em aresta viva geram uma incorporação de ar indesejada ao escoamento, ocasionando um efeito de sucção que reduz a capacidade hidráulica. D) As saídas do tipo funil necessitam de maior altura até chegar ao diâmetro da tubulação e isso é compensado em relação ao parâmetro L do ábaco. E) As saídas em arestas vivas têm menor perda de carga, o que implica a incorporação de ar com consequente redução da capacidade hidráulica. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Ética e Legislação Profissional |
| Ética Empresarial e Profissional: Noções Gerais Com o avanço das tecnologias de comunicação, o acesso às informações foi facilitado, permitindo que as pessoas, onde quer que estejam, acompanhem, praticamente em tempo real, os fatos ao redor do mundo. Assinale a alternativa que contém as ações realizadas pelas empresas diante desse contexto. A) As empresas estabelecem as convenções coletivas com o objetivo de regulamentar o comportamento dos colaboradores, buscando, dessa forma, evitar problemas que possam afetar sua imagem no mercado. B) As empresas terceirizam sua mão de obra com o objetivo de que as terceirizadas façam a regulamentação do comportamento dos seus colaboradores. C) As empresas utilizam a Constituição Federal e as leis vigentes para regulamentar o comportamento dos colaboradores com vistas a evitar problemas que possam afetar sua imagem no mercado. D) As empresas estabelecem os Códigos de Ética com o objetivo de regulamentar o comportamento dos colaboradores, buscando, dessa forma, evitar problemas que possam afetar sua imagem no mercado. E) As empresas não se importam com os aspectos comportamentais dos colaboradores fora do ambiente de trabalho. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em |
| Dimensionamento de pilares de extremidade Dimensionar a área de aço para as armaduras é uma das etapas mais importantes no dimensionamento dos pilares de extremidade. Esses pilares podem ter uma armadura longitudinal que deve atender aos requisitos de armadura mínima estabelecidos em norma, como também uma armadura transversal e, em alguns casos, uma armadura transversal suplementar. Diante disso, qual é o valor da área de aço da armadura longitudinal e armadura mínima do pilar de extremidade a seguir?  A) As = 10,35cm2; Asmínima = 2,42cm2. B) As = 15cm2; Asmínima = 10cm2. C) As = 35cm2; Asmínima = 5cm2. D) As = 23cm2; Asmínima = 15cm2. E) As = 18,5cm2; Asmínima = 7,45cm2. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Engenharia Civil - Instalações Hidráulicas Prediais |
| Instalações prediais de combate a incêndio O fogo é fundamental para o desenvolvimento da humanidade, mas é muito danoso às edificações, visto que pode causar prejuízos financeiros e sociais. Para tanto, as edificações necessitam de instalações prediais de combate a incêndio, que são projetadas para evitar prejuízos materiais e de vida decorrentes de um incêndio na edificação. Sobre as instalações prediais de combate a incêndio, são feitas as seguintes proposições: I - Têm sistemas concebidos para preservar a vida dos ocupantes das edificações e de áreas de risco, em caso de incêndio. II - São projetadas com dispositivos que dificultam a propagação do fogo, diminuindo os prejuízos ao patrimônio e ao meio ambiente. III - São concebidas para controlar e extinguir o incêndio, bem como favorecer a entrada do corpo de bombeiros na edificação. Quais proposições estão corretas? A) I, II e III. B) I e II. C) II e III. D) I e III. E) Apenas a III. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Hidrologia |
| Qual dos rios, entre os listados abaixo, não está localizado no território brasileiro? A) Rio São Francisco. B) Rio Tocantins. C) Rio Orinoco. D) Rio Araguaia. E) Rio Paraíba do Sul. Verificar Resposta Estudar Cards Todas as Questões |
Veja mais Dicas e truques de CSS |
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 |
