 |
|
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: 1434 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. |
 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 que se repete apenas verticalmente usando a propriedade background-repeat do CSSQuantidade de visualizações: 7422 vezes |
|
Nesta dica mostrarei como podemos definir uma imagem de fundo para a página HTML e ajustá-la para repetir apenas verticalmente usando a propriedade background-repeat com o valor repeat-y. Note que, para definir a imagem de fundo, nós usamos a propriedade background-image. Veja o código CSS para o exemplo: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<style type="text/css">
<!--
body {background-image: url('fundo.gif');
background-repeat: repeat-y}
//-->
</style>
|
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: 8887 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}
|
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: 706 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 com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<!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>
|
Vamos testar seus conhecimentos em Engenharia Civil - Estruturas de Aço e Madeira |
| Ações em estruturas: apresentação dos principais carregamentos na análise de estruturas convencionais Um gerador industrial movido a gás natural, colocado na laje de cobertura de um prédio, apresentou defeito em um dos cilindros. Foi contratada uma empresa para prestar manutenção no gerador. A equipe da manutenção é formada por três pessoas, que carregam consigo cerca de 100 kg em equipamentos. Tendo em vista a descrição acima feita, a equipe e os equipamentos podem ser enquadrados em que classificação de carregamento? A) Ação permanente direta. B) Ação excepcional. C) Ação acidental direta. D) Ação permanente indireta. E) Ação acidental indireta. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Engenharia Civil - Estruturas de Aço e Madeira |
| Estrutura e propriedade dos materiais A determinação e o conhecimento dos materiais são muito importantes para a escolha do material para determinada aplicação. Essa escolha é a partir: A) de um banco de dados obtidos por meio de ensaios laboratoriais. B) da análise do agrupamento e da organização dos átomos. C) da estrutura interna do material. D) da análise das características físicas do material. E) da avaliação da composição química dos materiais. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Ética e Legislação Profissional |
| Responsabilidade civil dos prepostos e preponentes Considera-se ___________ a entrega de papéis, bens ou valores ao ____________, encarregado pelo __________, se os recebeu sem ______________, salvo nos casos em que haja prazo para reclamação. Qual opção abaixo preenche corretamente as lacunas? A) Perfeita - preponente - preposto - protesto. B) Inválida - preponente - preposto - protesto. C) Inválida - preposto - preponente - protocolo. D) Perfeita - preposto - preponente - protocolo. E) Perfeita - preposto - preponente - protesto. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Ética e Legislação Profissional |
| Responsabilidade civil dos prepostos e preponentes Com relação as definições do preposto, assinale a alternativa correta. A) O preposto pode negociar por conta própria ou de terceiro, e participar indiretamente de operação idêntica a que lhe foi cometida. B) O preposto não pode, sem autorização escrita, fazer-se substituir no desempenho da preposição, sob pena de responder pessoalmente pelos atos do substituto e pelas obrigações por ele contraídas. C) Considera-se inválida a entrega de papéis, bens ou valores ao preposto, encarregado pelo preponente, se este os recebeu sem protesto. D) As limitações contidas na outorga de poderes podem ser opostas a terceiros, dependem do arquivamento e averbação do instrumento no Registro Público de Empresas Mercantis. E) No exercício de suas funções, os prepostos são pessoalmente responsáveis, perante terceiros, pelos atos culposos e atos dolosos. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em |
| Características do concreto armado Sabe-se que o controle adequado da retração é fundamental no projeto e na construção de estruturas de concreto para evitar problemas como fissuração e para garantir a integridade da estrutura ao longo do tempo. Marque a alternativa correta a respeito desse fenômeno. A) A retração química pode levar à formação de produtos de hidratação que ocupam mais espaço do que os materiais originais. B) A retração plástica ocorre após o endurecimento do concreto e está relacionada à perda contínua de umidade. C) A retração por secagem ocorre durante o estado fresco do concreto, enquanto ele ainda está sendo moldado e antes de começar a endurecer. D) A retração térmica ocorre devido a reações químicas dentro do concreto, causando expansão especialmente em estruturas expostas a condições ambientais extremas. E) A retração por secagem é comum em superfícies de concreto expostas ao Sol ou ao vento durante a fase de cura, ou seja, no seu processo de endurecimento. Verificar Resposta Estudar Cards Todas as Questões |
Veja mais Dicas e truques de CSS |
Dicas e truques de outras linguagens |
|
PHP - Programação Orientada a Objetos em PHP - Aprenda a criar e usar métodos e classes abstratas em PHP |
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 |
