Criação de marca d'água usando HTML e CSS
Uma marca d'água em qualquer interface da página da web é o logotipo ou texto transparente que aparece na tela e permanece em uma posição fixa. A marca d'água normalmente denota a natureza do aplicativo ou site ou qualquer sistema de abertura. Por exemplo, o sistema de abertura do Windows tem uma marca d'água na forma de texto na parte inferior direita da tela representada como “Janelas ativas”.
Este artigo demonstrará o método para criar uma marca d'água usando HTML e CSS.
Como criar uma marca d'água usando HTML e CSS?
Uma marca d'água no HTML é criada usando um conjunto de propriedades CSS como “opacidade","altura","largura","cor","posição”, Etc. Pode ser melhor compreendido adicionando um exemplo para aplicar propriedades CSS em um elemento HTML para criar uma marca d'água a partir de um texto simples.
Exemplo
Em primeiro lugar, é necessário adicionar o elemento HTML para definir o texto que deveria estar representado na marca d'água:
Olá usuário!
Este é o texto dentro do contêiner div.
O símbolo da marca d'água é um símbolo transparente na interface que permanece na posição fixa.
Marca d'água!
No trecho de código adicionado acima:
- A "div”O elemento é adicionado com o“eu ia"Declarado como"minha identidade”.
- Dentro dele, são escritas algumas frases aleatórias que denotam o conteúdo da página da web.
- Depois disso, outro “div”O elemento é adicionado que contém o texto que deveria ser exibido na marca d'água.
Parte css
#watermark
Posição: fixado;
Inferior: 9px;
Direita: 9px;
Opacidade: 0.4;
cor preta;
Background-Color: RGBA (131, 50, 185, 0.5);
Altura: 40px;
Largura: 100px;
exibição: flex;
alinhado-itens: centro;
Justify-Content: Center;
#minha identidade
Background-Color: Azure;
Altura: 125px;
No código CSS acima:
- O "eu ia”Seletor para selecionar a div associada ao“#watermark”ID foi adicionado.
- O "posição”Propriedade dentro do seletor de identificação é definida como“fixo”. Este valor coloca a marca d'água em uma posição fixa na interface.
- O "fundo”A propriedade é definida como“9px”. Coloca a marca d'água na interface de tal maneira que é “9 pixels”High a partir da parte inferior da tela.
- O "certo”A propriedade é adicionada com o valor“9px”Para definir a marca d'água“9 pixels”Do lado direito da tela.
- O "opacidade" é definido como "4”. É a propriedade CSS que define a transparência do elemento.
- O "cor”Para o texto exibido na marca d'água, é definida como“preto”.
- Desde que a marca d'água é criada com a ajuda de um “div”Elemento, também podemos definir a cor de fundo para a marca d'água usando o“rgb”Função.
Como resultado, a marca d'água será criada e colocada no lado inferior direito da página da web:
A marca d'água não se moverá em nenhum outro lugar na tela e permanecerá na posição fixa:
Isso resume o método para criar uma marca d'água usando as bibliotecas HTML e CSS.
Conclusão
Uma marca d'água é criada em HTML e CSS adicionando o texto ou logotipo da marca d'água através de um elemento HTML. Em seguida, aplique algumas propriedades do CSS como “opacidade","altura","largura","cor","cor de fundo", e "posição”Propriedades para torná -lo uma marca d'água e colocá -lo de tal maneira que não se move a partir daí. Este blog demonstrou como criar uma marca d'água usando HTML e CSS.