![]() |
|
||||
![]() Tenha 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 ::: Bordas CSS |
||||
Como criar botões achatados em CSS usando as propriedades box-shadow, border e border-radiusQuantidade de visualizações: 639 vezes |
||||
Em várias situações nós queremos criar designs mais arrojados para nossas páginas HTML e os botões achatados (flat buttons), ou botões com bordas reduzidas são sempre uma boa opção. Nesta dica mostrarei como podemos combinar algunas propriedades CSS, tais como box-shadow, border e border-radius para criar o efeito do botão flat. Note o uso da propriedade background-color para aplicar a cor de fundo ao botão e também o uso de :hover para trocar a cor de fundo ao passar o mouse sobre o elemento. Para finalizar, coloquei uma função JavaScript atrelada ao click do botão para demonstrar que ele está, de fato, funcionando corretamente. Veja o código HTML e CSS completo para o exemplo:
|
||||
![]() |
||||
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: 3148 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. | ||||||||
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 ::: 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:
| ||||
Veja mais Dicas e truques de CSS |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
1º lugar: Java |