Creazione di filigrane utilizzando HTML e CSS

Una filigrana su qualsiasi interfaccia della pagina Web è il logo o il testo trasparente che appare sullo schermo e rimane in posizione fissa. La filigrana normalmente indica la natura dell'app o del sito Web o di qualsiasi sistema di apertura. Ad esempio, il sistema di apertura di Windows ha una filigrana sotto forma di testo nella parte inferiore destra dello schermo rappresentato come "Finestre attive".

Questo articolo dimostrerà il metodo per creare una filigrana usando HTML e CSS.

Come creare una filigrana usando HTML e CSS?

Una filigrana in HTML viene creata utilizzando una serie di proprietà CSS come "opacità","altezza","larghezza","colore","posizione", eccetera. Può essere meglio compreso aggiungendo un esempio per applicare le proprietà CSS su un elemento HTML per creare una filigrana da un semplice testo.

Esempio

In primo luogo, è necessario aggiungere l'elemento HTML per definire il testo che dovrebbe essere rappresentato nella filigrana:

Ciao utente!


Questo è il testo all'interno del contenitore Div.


Il simbolo della filigrana è un simbolo trasparente sull'interfaccia che rimane in posizione fissa.

Nel frammento di codice aggiunto sopra:

• UN "div"L'elemento viene aggiunto con il"id"Dichiarato come"myid".
• Al suo interno, vengono scritte alcune frasi casuali che indicano il contenuto della pagina web.
• Dopodiché, un altro "div"Viene aggiunto l'elemento che contiene il testo che dovrebbe essere visualizzato sulla filigrana.

Parte CSS

#filigrana

Posizione: fissa;
In basso: 9px;
a destra: 9px;
opacità: 0.4;
colore nero;
Background-color: RGBA (131, 50, 185, 0.5);
Altezza: 40px;
larghezza: 100px;
display: flex;
ALIGE-ITMS: CENTRO;
giustificare contento: centro;

#myid

Background-color: Azure;
Altezza: 125px;

Nel codice CSS sopra:

• IL "id"Selettore per selezionare il div associato al"#filigrana"Id è stato aggiunto.
• IL "posizione"La proprietà all'interno del selettore ID è definita come"fisso". Questo valore colloca la filigrana in una posizione fissa sull'interfaccia.
• IL "metter il fondo aLa proprietà "è definita come"9px". Posiziona la filigrana sull'interfaccia in modo tale che sia "9 pixel"Alto dal fondo dello schermo.
• IL "Giusto"La proprietà viene aggiunta con il valore"9px"Per impostare la filigrana"9 pixel"Dal lato destro dello schermo.
• IL "opacità" è definito come "4". È la proprietà CSS che definisce la trasparenza dell'elemento.
• IL "colore"Per il testo visualizzato sulla filigrana è definito come"nero".
• Poiché la filigrana è creata con l'aiuto di "div"Elemento, possiamo anche definire il colore di sfondo per la filigrana usando il"RGB" funzione.

Di conseguenza, la filigrana verrà creata e posizionata nella parte in basso a destra della pagina Web:

La filigrana non si sposterà da nessun'altra parte sullo schermo e rimarrà nella posizione fissa:

Questo riassume il metodo per creare una filigrana utilizzando le librerie HTML e CSS.

Conclusione

Una filigrana viene creata in HTML e CSS aggiungendo il testo o il logo della filigrana attraverso un elemento HTML. Quindi, applica alcune proprietà CSS come "opacità","altezza","larghezza","colore","colore di sfondo", E "posizione"Proprietà ad esso per renderlo una filigrana e metterlo in modo tale da non muoversi da lì. Questo blog ha dimostrato come creare una filigrana usando HTML e CSS.