Ofereço ajuda em Java, C/C++, Python, C#, LISP, AutoLisp, AutoCAD
+55 (062) 98553-6711
Ofereço ajuda em PHP, Python, C#, JavaScript, Laravel, Google Ads e SEO
+55 (062) 98243-1195

Controle de Estoque completo com código fonte em PHP, MySQL, Bootstrap, jQuery - 100% funcional e fácil de modificar e implementar novas funcionalidadesCó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 funcionalidades
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-radius

Quantidade 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:

Este código completo faz parte do nosso Super Pack Aprenda a Programar - 12.000 Dicas e Truques de Programação e 1.500 Exercícios Resolvidos.
Domine lógica de programação e várias linguagens de programação com o nosso Super Pack Aprenda a Programar - 12.000 Dicas e Truques de Programação e 1.500 Exercícios Resolvidos.

Torne-se um(a) expert em Java, Portugol, VisuAlg, Python, PHP, JavaScript, Delphi, C, C++, C#, VB.NET, LISP, Ruby, e muito mais. São mais de 15.000 páginas com conteúdo exclusivo para você estudar onde e quando quiser.
Me Fala Mais


Link para compartilhar na Internet ou com seus amigos:

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 senha

Quantidade 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:

Este código completo faz parte do nosso Super Pack Aprenda a Programar - 12.000 Dicas e Truques de Programação e 1.500 Exercícios Resolvidos.
Domine lógica de programação e várias linguagens de programação com o nosso Super Pack Aprenda a Programar - 12.000 Dicas e Truques de Programação e 1.500 Exercícios Resolvidos.

Torne-se um(a) expert em Java, Portugol, VisuAlg, Python, PHP, JavaScript, Delphi, C, C++, C#, VB.NET, LISP, Ruby, e muito mais. São mais de 15.000 páginas com conteúdo exclusivo para você estudar onde e quando quiser.
Me Fala Mais


E aqui está o código JavaScript que permite exibir ou ocultar a senha do usuário:

Este código completo faz parte do nosso Super Pack Aprenda a Programar - 12.000 Dicas e Truques de Programação e 1.500 Exercícios Resolvidos.
Domine lógica de programação e várias linguagens de programação com o nosso Super Pack Aprenda a Programar - 12.000 Dicas e Truques de Programação e 1.500 Exercícios Resolvidos.

Torne-se um(a) expert em Java, Portugol, VisuAlg, Python, PHP, JavaScript, Delphi, C, C++, C#, VB.NET, LISP, Ruby, e muito mais. São mais de 15.000 páginas com conteúdo exclusivo para você estudar onde e quando quiser.
Me Fala Mais


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 HTML

Quantidade 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:

Este código completo faz parte do nosso Super Pack Aprenda a Programar - 12.000 Dicas e Truques de Programação e 1.500 Exercícios Resolvidos.
Domine lógica de programação e várias linguagens de programação com o nosso Super Pack Aprenda a Programar - 12.000 Dicas e Truques de Programação e 1.500 Exercícios Resolvidos.

Torne-se um(a) expert em Java, Portugol, VisuAlg, Python, PHP, JavaScript, Delphi, C, C++, C#, VB.NET, LISP, Ruby, e muito mais. São mais de 15.000 páginas com conteúdo exclusivo para você estudar onde e quando quiser.
Me Fala Mais


Exemplo 2: Como definir a cor de fundo e a imagem de fundo para a página HTML usando as propriedades background e url:

Este código completo faz parte do nosso Super Pack Aprenda a Programar - 12.000 Dicas e Truques de Programação e 1.500 Exercícios Resolvidos.
Domine lógica de programação e várias linguagens de programação com o nosso Super Pack Aprenda a Programar - 12.000 Dicas e Truques de Programação e 1.500 Exercícios Resolvidos.

Torne-se um(a) expert em Java, Portugol, VisuAlg, Python, PHP, JavaScript, Delphi, C, C++, C#, VB.NET, LISP, Ruby, e muito mais. São mais de 15.000 páginas com conteúdo exclusivo para você estudar onde e quando quiser.
Me Fala Mais


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:

Este código completo faz parte do nosso Super Pack Aprenda a Programar - 12.000 Dicas e Truques de Programação e 1.500 Exercícios Resolvidos.
Domine lógica de programação e várias linguagens de programação com o nosso Super Pack Aprenda a Programar - 12.000 Dicas e Truques de Programação e 1.500 Exercícios Resolvidos.

Torne-se um(a) expert em Java, Portugol, VisuAlg, Python, PHP, JavaScript, Delphi, C, C++, C#, VB.NET, LISP, Ruby, e muito mais. São mais de 15.000 páginas com conteúdo exclusivo para você estudar onde e quando quiser.
Me Fala Mais


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:

Este código completo faz parte do nosso Super Pack Aprenda a Programar - 12.000 Dicas e Truques de Programação e 1.500 Exercícios Resolvidos.
Domine lógica de programação e várias linguagens de programação com o nosso Super Pack Aprenda a Programar - 12.000 Dicas e Truques de Programação e 1.500 Exercícios Resolvidos.

Torne-se um(a) expert em Java, Portugol, VisuAlg, Python, PHP, JavaScript, Delphi, C, C++, C#, VB.NET, LISP, Ruby, e muito mais. São mais de 15.000 páginas com conteúdo exclusivo para você estudar onde e quando quiser.
Me Fala Mais


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:

Este código completo faz parte do nosso Super Pack Aprenda a Programar - 12.000 Dicas e Truques de Programação e 1.500 Exercícios Resolvidos.
Domine lógica de programação e várias linguagens de programação com o nosso Super Pack Aprenda a Programar - 12.000 Dicas e Truques de Programação e 1.500 Exercícios Resolvidos.

Torne-se um(a) expert em Java, Portugol, VisuAlg, Python, PHP, JavaScript, Delphi, C, C++, C#, VB.NET, LISP, Ruby, e muito mais. São mais de 15.000 páginas com conteúdo exclusivo para você estudar onde e quando quiser.
Me Fala Mais



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 rgb

Quantidade 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:

Este código completo faz parte do nosso Super Pack Aprenda a Programar - 12.000 Dicas e Truques de Programação e 1.500 Exercícios Resolvidos.
Domine lógica de programação e várias linguagens de programação com o nosso Super Pack Aprenda a Programar - 12.000 Dicas e Truques de Programação e 1.500 Exercícios Resolvidos.

Torne-se um(a) expert em Java, Portugol, VisuAlg, Python, PHP, JavaScript, Delphi, C, C++, C#, VB.NET, LISP, Ruby, e muito mais. São mais de 15.000 páginas com conteúdo exclusivo para você estudar onde e quando quiser.
Me Fala Mais



Veja mais Dicas e truques de CSS

Dicas e truques de outras linguagens

E-Books em PDF

E-Book 650 Dicas, Truques e Exercícios Resolvidos de Python - PDF com 1.200 páginas
Domine lógica de programação e a linguagem Python com o nosso E-Book 650 Dicas, Truques e Exercícios Exercícios de Python, para você estudar onde e quando quiser.

Este e-book contém dicas, truques e exercícios resolvidos abrangendo os tópicos: Python básico, matemática e estatística, banco de dados, programação dinâmica, strings e caracteres, entrada e saída, estruturas condicionais, vetores e matrizes, funções, laços, recursividade, internet, arquivos e diretórios, programação orientada a objetos e muito mais.
Ver Conteúdo do E-book
E-Book 350 Exercícios Resolvidos de Java - PDF com 500 páginas
Domine lógica de programação e a linguagem Java com o nosso E-Book 350 Exercícios Exercícios de Java, para você estudar onde e quando quiser.

Este e-book contém exercícios resolvidos abrangendo os tópicos: Java básico, matemática e estatística, programação dinâmica, strings e caracteres, entrada e saída, estruturas condicionais, vetores e matrizes, funções, laços, recursividade, internet, arquivos e diretórios, programação orientada a objetos e muito mais.
Ver Conteúdo do E-book

Linguagens Mais Populares

1º lugar: Java
2º lugar: Python
3º lugar: C#
4º lugar: PHP
5º lugar: C
6º lugar: Delphi
7º lugar: JavaScript
8º lugar: C++
9º lugar: VB.NET
10º lugar: Ruby



© 2025 Arquivo de Códigos - Todos os direitos reservados
Neste momento há 30 usuários muito felizes estudando em nosso site.