 |
|
||||
Você está aqui: 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: 1500 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 para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<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. |
 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 para a página HTML em CSS usando a propriedade background-imageQuantidade de visualizações: 8236 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 para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<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>
|
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: 514 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 para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<!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 ::: 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: 7311 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 para ajustar o código abaixo de acordo com as suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar) Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar a manter o site livre de anúncios. Ficaremos eternamente gratos ;-) Nosso PIX é: osmar@arquivodecodigos.com.br ---------------------------------------------------------------------- <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 ::: 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: 3237 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 para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
/* 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 para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<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 ::: Barras de Navegação, Menus e Dropdowns |
Como criar uma barra de navegação horizontal com menu dropdown em HTML e CSS - Menu suspenso usando CSSQuantidade de visualizações: 811 vezes |
|
Nesta dica mostrarei como podemos usar uma combinação de várias propriedades CSS para criar um menu suspenso, ou seja, uma barra de navegação contendo links normais e também links que, ao passar o mouse, exibe uma lista de sub-menus. O código apresentado neste exemplo é muito útil para estudantes de HTML e CSS, pois apresenta várias propriedades interessantes para melhorar o visual e a usabilidade de suas páginas web. Entre as propriedades CSS usadas na criação deste menu suspenso nós podemos citar overflow, margin, padding, list-style-type, background-color, display, float, text-align, text-decoration, position, min-width e z-index. Note que coloquei o mínimo de código para fazer a barra de menus funcional. Fique à vontade para acrescentar as formatações que você achar interessante. Veja a página HTML e CSS para o exemplo: ----------------------------------------------------------------------
Se precisar de ajuda para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<!doctype html>
<html>
<head>
<title>Estudos CSS</title>
<style>
/* estiliza o elemento <ul> */
ul{
background-color: #e0e0e0;
margin: 0;
padding: 0;
overflow: hidden;
list-style-type: none;
}
/* aplica estilo aos elementos <li> */
li{
float: left;
}
/* aplica estilo aos links e <li> do sub-menu */
li a, .dropdown_linguagens{
display: inline-block;
text-align: center;
padding: 10px 15px;
text-decoration: none;
}
/* define o display do <li> de linguagens */
li.linguagens{
display: inline-block;
}
/* aplica estilo ao menu de linguagens */
.menus_linguagens{
display: none;
position: absolute;
background-color: #eceff1;
min-width: 160px;
z-index: 1;
}
/* aplica estilo aos links do sub-menu */
.menus_linguagens a {
padding: 10px 15px;
text-decoration: none;
display: block;
text-align: left;
}
/* exibe o sub-menu ao passar o mouse */
.linguagens:hover .menus_linguagens{
display: block;
}
/* aplica uma cor diferente aos menus ao
passar o mouse */
.menus_linguagens a:hover{
background-color: #cfd8dc;
}
</style>
</head>
<body>
<h1>Exemplo de Barra de Navegação com
Menu Dropdown</h1>
<ul>
<li><a href="index.php">Inicial</a></li>
<li class="linguagens">
<a href="javascript:void(0)" class="dropdown_linguagens">
Linguagens</a>
<div class="menus_linguagens">
<a href="java.php">Java</a>
<a href="python.php">Python</a>
<a href="ruby.php">Ruby</a>
<a href="delphi.php">Delphi</a>
</div>
</li>
</ul>
</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: 9012 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 para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
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 para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
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 para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
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 para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
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 para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
body {background: #0099CC url(fundo.gif) no-repeat
fixed 40 60}
|
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: 11122 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 para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<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 ::: 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: 9549 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 para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<!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 para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<!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>
|
Vamos testar seus conhecimentos em Hidrologia |
| A transpiração é um processo fundamental na contribuição para o acúmulo de água em estado gasoso na atmosfera. Qual agente é um dos principais atores nesse processo? A) Rochas. B) Solos férteis. C) Chuvas. D) Seres vivos. E) Minerais. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Engenharia Civil - Instalações Hidráulicas Prediais |
| Instalação hidrossanitária: fundamentos e definições Sobre as instalações prediais de água fria, assinale a alternativa correta. A) A coluna de distribuição é a tubulação que tem a função de interligar o barrilete aos ramais, exceto no sistema direto. B) No sistema direto, a coluna de distribuição é a tubulação, que tem a função de interligar o conjunto elevatório ao barrilete. C) A coluna de distribuição tem a função de efetuar o recalque da água no sistema direto de fornecimento. D) No sistema indireto de fornecimento, a coluna de distribuição tem a função de elevar a água para os ramais. E) A coluna de distribuição é a tubulação, que tem a função de interligar o ramal predial ao reservatório superior, independentemente do sistema de fornecimento. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Ética e Legislação Profissional |
| Princípios específicos do Direito do Consumidor (Juiz do Trabalho - RJ - 2015). Sob a visão clássica, cinco são os princípios que regem o direito contratual. A relação de consumo é ajustada por contrato e aqueles princípios também a ela se aplicam. Contudo, em face da natureza da relação de consumo, alguns desses princípios têm seu valor reduzido, enquanto outros assumem relevância. Tem relevância para a relação de consumo, o seguinte princípio do direito contratual: A) Da ordem pública. B) Da relatividade dos contratos. C) Da boa-fé. D) De obediência às regras mercantis. E) Da autonomia da vontade. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Engenharia Civil - Instalações Hidráulicas Prediais |
| Sistema domiciliar de abastecimento de água Uma instalação hidrossanitária será construída numa residência. Ela apresenta dois banheiros, uma cozinha e uma área de serviços. Cada banheiro tem uma bacia com caixa de descarga, um chuveiro elétrico e um lavatório. A cozinha apresenta duas pias, e a área de serviços tem um tanque e duas torneiras de uso geral.  Com base nesses dados, qual é vazão estimada de água fria em função dos pesos atribuídos às peças de utilização, em litros por segundo? A) 0,57. B) 0,65. C) 0,68. D) 0,78. E) 0,91 Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Python |
| Qual das formas abaixo é válida para a criação de um DICIONÁRIO em Python? A) estados = ["SP": "SÃO PAULO", "GO": "GOIÁS"] B) estados = ("SP": "SÃO PAULO", "GO": "GOIÁS") C) estados = set("SP": "SÃO PAULO", "GO": "GOIÁS") D) estados = "SP": "SÃO PAULO", "GO": "GOIÁS" E) estados = {"SP": "SÃO PAULO", "GO": "GOIÁS"} Verificar Resposta Estudar Cards Todas as Questões |
Veja mais Dicas e truques de CSS |
Dicas e truques de outras linguagens |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
