 |
|
||||
 Código-Fonte 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 |
|||||
Você está aqui: CSS ::: Dicas & Truques ::: CSS Grid Layout |
||||
Curso de CSS para iniciantes - Como usar o Grid Layout do CSSQuantidade de visualizações: 505 vezes |
||||
|
Antes da chegada do Grid Layout os designers web sofreram muito para distribuir os elementos das páginas web. No início não tínhamos distribuição nenhuma, ou seja, o conteúdo da página era distribuído de acordo com o gosto do navegador. Depois tivemos os layouts usando tabelas, e em seguida os layouts usando os recursos de float. O Grid Layout do CSS se aproxima muito das interfaces gráficas que usamos em linguagens de programação e frameworks tais como o Java Swing, o Python Qt, Python TKinter, wxPython, etc. Este tipo de layout nos permite especificar a linha e coluna nas quais um determinado componente será colocado. O primeiro passo para usar o Grid Layout do CSS é eleger o elemento no qual os demais componentes serão colocados. É este elemento pai que receberá o valor grid para a propriedade display. Em seguida a quantidade de colunas é definida usando-se a propriedade grid-template-columns, enquanto a quantidade de linhas é definida usando-se grid-template-rows. Veja um página HTML completa na qual temos uma DIV que serve como grid para três outras DIVs. As DIVs filhas possuem cores de fundo diferente para que você veja as colunas e linhas ocupadas por cada uma:
|
||||
 Link para compartilhar na Internet ou com seus amigos: |
||||
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: 7292 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:
| ||||
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: 8993 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:
Exemplo 2: Como definir a cor de fundo e a imagem de fundo para a página HTML usando as propriedades background e url:
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:
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:
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:
| ||||||||||||||||||||
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: 3146 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:
E aqui está o código JavaScript que permite exibir ou ocultar a senha do usuário:
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. | ||||||||
Veja mais Dicas e truques de CSS |
Dicas e truques de outras linguagens |
|
JavaScript - Como adicionar um método isPar() ao objeto Number do JavaScript que indicará se um número é par ou impar |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
