 |
|
Você está aqui: CSS ::: Dicas & Truques ::: Bordas CSS |
Como definir a cor da borda de um elemento HTML usando a propriedade border-color do CSSQuantidade de visualizações: 438 vezes |
|
Nesta dica mostrarei como podemos usar a propriedade border-color do CSS para definir a cor da borda de um elemento HTML. Note que, para alterar a cor da borda do elemento HTML, é preciso antes verificar se ele possui borda. Caso contrário teremos que manipular também as propriedades border-style e border-width. Veja uma página HTML completa na qual usamos CSS para manipular a largura (width), o espaçamento interno (padding), as margens (margin), o estilo da borda (border-style), a largura da borda (border-width) e a cor da borda (border-color) de um elemento DIV: ----------------------------------------------------------------------
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>
#m_div{
width: 150px;
padding: 10px;
margin: 30px;
border-style: solid;
border-width: 1px;
border-color: red
}
</style>
</head>
<body>
<div id="m_div">Sou um elemento DIV</div>
</body>
</html>
A propriedade border-color aceita de um até quatro valores na seguinte ordem: borda superior, borda direita, borda inferior e borda esquerda. Assim, o código abaixo: ---------------------------------------------------------------------- Se precisar de ajuda com o código abaixo, pode me chamar no WhatsApp +55 (62) 98553-6711 (Osmar) ---------------------------------------------------------------------- border-color: red blue yellow green aplica um cor diferente para cada uma das bordas do elemento. O valor da cor para a propriedade border-color do CSS pode ser definido como o nome de um cor em inglês (por exemplo, "blue"), por um código hexadecimal (por exemplo, "#0288d1"), um código RGB (por exemplo, "rgb(255,30,90)"), um código HSL (por exemplo, "hsl(40%, 100%, 30%)") ou o valor "transparent". |
 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 fixa para suas páginas HTML em CSS usando as propriedades background-image, background-repeat e background-attachmentQuantidade de visualizações: 10927 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 com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<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 ::: 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: 1433 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. |
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: 2742 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 com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
/* 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 com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<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. |
Vamos testar seus conhecimentos em Fenômeno de Transportes e Hidráulica |
| Equação de Manning A equação de Manning é uma expressão empírica que se aplica ao fluxo uniforme em canais abertos, relacionando a velocidade do fluido, a área da seção e a inclinação do canal. Sobre a fórmula de Manning, selecione a alternativa correta. A) O valor do coeficiente de rugosidade n representa a perda de carga localizada, uma vez que se refere à interferência do atrito nas paredes das tubulações e canais de condução de fluidos. B) A fórmula de Manning só apresenta resultados precisos para canais naturais, sendo os artificiais complexos, pois o coeficiente de rugosidade n varia na produção do material. C) O valor do coeficiente de rugosidade n representa a perda de carga distribuída atribuída ao atrito e é sempre calculado em campo para que erros associados a ele sejam minimizados. D) Em canais artificiais, o valor do coeficiente de Manning n representa a perda de carga causada apenas pelas paredes, se fazendo necessário aplicar uma correção para o fundo do canal. E) A fórmula de Manning fornece resultados confiáveis para os canais naturais ou artificiais e o coeficiente de rugosidade n representa a perda de carga distribuída relacionada ao atrito. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Hidrologia |
| (UFG 2010) As bacias hidrográficas são unidades físicas, formadas por uma porção de terra, delimitadas pelas partes mais altas do relevo, drenadas por um curso d'água principal e seus afluentes. Os processos ambientais, decorrentes da ação da precipitação, responsáveis pela modelagem do relevo na bacia hidrográfica são: A) evaporação, condensação e infiltração. B) vulcanismo, falhamento e fraturamento. C) dobramento, intemperismo químico e soerguimento. D) escorregamento, erosão e assoreamento. E) lixiviação, intemperismo físico e laterização. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Engenharia Civil - Instalações Hidráulicas Prediais |
| Instalações prediais de combate a incêndio A norma NBR 13714 estabelece os critérios mínimos exigíveis para sistemas de hidrantes e de mangotinhos, para uso exclusivo no combate a incêndio. Com base nesses critérios, assinale a alternativa correta: A) Uma edificação com área de 850m2 não necessita de um sistema de mangotinhos ou de hidrantes para proteção contra incêndio. B) O ponto de tomada de água para hidrantes e mangotinhos pode ser instalado a até 10m de distância das portas externas e escadas. C) Os hidrantes devem ser distribuídos de tal forma que qualquer ponto da área a ser protegida seja alcançado por no mínimo dois esguichos. D) Uma edificação com parede externa de 12m de altura necessita que o hidrante externo seja instalado afastado no máximo 18m da edificação. E) Uma edificação com parede externa de 12m de altura necessita que o ponto de tomada de água seja instalado a no máximo 2m em relação ao piso. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Ética e Legislação Profissional |
| Ética Empresarial e Profissional: Noções Gerais A partir dos anos 80, a questão da ética começou a ganhar mais destaque e importância nas rotinas das empresas brasileiras. Indique a alternativa que contém os fatores que contribuem para essa mudança. A) O enxugamento dos cargos de comando; a competição interna pelos cargos mais elevados; a conquista de maior autonomia pelos empregados. B) O enxugamento dos cargos de comando; a competição externa pelos cargos mais elevados; a conquista de maior autonomia pelos empregados. C) O enxugamento dos cargos operacionais; a competição interna pelos cargos mais elevados; a conquista de maior autonomia pelos empregados. D) O enxugamento dos cargos operacionais; a competição interna pelos cargos mais elevados; as parcerias com os fornecedores. E) Maior contratação para os cargos operacionais; a competição interna pelos cargos mais elevados; a conquista de maior autonomia pelos empregados. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Topografia |
| Azimute e Rumo FCC-2014 - Na realização de um levantamento topográfico, foi determinado o azimute para o alinhamento 0-1, igual a 295º 32'. O rumo para este alinhamento é de: A) 25º 32'. B) 64º 28'. C) 25º 32' NW D) 64º 28' NW E) 295º 32' NW Verificar Resposta Estudar Cards Todas as Questões |
Veja mais Dicas e truques de CSS |
Dicas e truques de outras linguagens |
|
C# - Como excluir todos os itens selecionados em uma ListBox de múltipla seleção do C# Windows Forms |
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 |
