 |
|
Você está aqui: CSS ::: Dicas & Truques ::: Cores de Fundo e Imagens de Fundo |
Como definir a cor de fundo de um elemento usando um valor hexadecimalQuantidade de visualizações: 6764 vezes |
<body style="background-color: #B0C4DE"> |
 Link para compartilhar na Internet ou com seus amigos: |
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: 462 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 com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<!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 ::: 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. |
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. |
Vamos testar seus conhecimentos em Python |
Qual o resultado da execução do seguinte código Python?
valor = 76.1234
print("O valor é: %0.2f" % valor)
A) O valor é: 76.00 B) O valor é: 76.12 C) O valor é: 0076 D) O valor é: 0.76 E) O valor é: 76.13 Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em |
| Características do concreto armado A fissuração é um efeito importante nas estruturas de concreto e não deve ser desprezada. O conhecimento íntimo desse tipo de efeito é de vital importância para garantir a durabilidade e o desempenho das estruturas por longos anos. A seguir, correlacione os tipos de fissuração e as definições: 1 - Fissuras plásticas. 2 - Fissuras térmicas. 3 - Fissuras de retração por secagem. ( ) Desenvolvem-se por conta de tensões de tração devido à restrição interna causada por retração diferencial entre a superfície e o interior do concreto. ( ) Desenvolvem-se nas primeiras idades do concreto, após o endurecimento. ( ) Desenvolvem-se antes de o concreto estar endurecido, entre 1 e 8 horas após o lançamento. Agora, assinale a alternativa que traz a sequência correta: A) 1 - 2 - 3. B) 2 - 1 - 3. C) 3 - 1 - 2. D) 2 - 3 - 1. E) 3 - 2 - 1. 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 |
Vamos testar seus conhecimentos em Python |
Qual o resultado da execução do seguinte código Python?
estados = {"SP": "SÃO PAULO", "GO": "GOIÁS",
"RJ": "RIO DE JANEIRO", "MG": "MINAS GERAIS"}
print("GO" in estados)
A) "GO" B) True C) False D) "SP", "GO", "RJ", "MG" E) "GOIÁS" Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Ética e Legislação Profissional |
| Noções de licitação pública Licitação pública é o procedimento por meio do qual a administração pública adquire ou vende bens e contrata serviços. Sobre a licitação pública, assinale a alternativa correta. A) É dever do órgão licitante garantir a igualdade entre os competidores durante todo o certame a fim de assegurar a isonomia, que é um princípio fundamental do processo licitatório. B) Na legislação que regulamenta as licitações, não há previsão para o estabelecimento, nos processos licitatórios, de margem de preferência para bens e serviços com tecnologia desenvolvida no Brasil. C) É prevista em lei a permissão para a realização de licitação cujo objeto inclua bens sem similaridade ou de marcas, de características e de especificações exclusivas, salvo em casos específicos previstos em legislação. D) Na aquisição pública de materiais mediante processo licitatório, a administração pública pode descumprir as normas e as condições do edital, visando à celeridade no recebimento dos materiais. E) A licitação é um procedimento utilizado para dar a oportunidade aos vários interessados em manifestar propostas à administração pública, que, ao final, vai selecionar a considerada mais barata. 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 |
