Création de filigranes à l'aide de HTML et CSS
Un filigrane sur toute interface de page Web est le logo ou le texte transparent qui apparaît à l'écran et reste à une position fixe. Le filigrane indique normalement la nature de l'application ou du site Web ou de tout système d'ouverture. Par exemple, le système d'ouverture des fenêtres a un filigrane sous forme de texte au bas de l'écran représenté comme «Fenêtres actives".
Cet article montrera la méthode pour créer un filigrane à l'aide de HTML et CSS.
Comment créer un filigrane en utilisant HTML et CSS?
Un filigrane dans HTML est créé à l'aide d'un ensemble de propriétés CSS comme «opacité","hauteur","largeur","couleur","position", etc. Il peut être mieux compris en ajoutant un exemple pour appliquer les propriétés CSS sur un élément HTML pour créer un filigrane à partir d'un texte simple.
Exemple
Premièrement, il est nécessaire d'ajouter l'élément HTML pour définir le texte qui est censé être représenté dans le filigrane:
Bonjour utilisateur!
C'est le texte à l'intérieur du conteneur div.
Le symbole de filigrane est un symbole transparent sur l'interface qui reste en position fixe.
Filigrane!
Dans l'extrait de code ajouté ci-dessus:
- UN "div"L'élément est ajouté avec le"identifiant»Déclaré comme«ma pièce d'identité".
- À l'intérieur, certaines phrases aléatoires sont écrites qui indiquent le contenu de la page Web.
- Après ça, un autre «div"L'élément est ajouté qui contient le texte qui est censé être affiché sur le filigrane.
Partie CSS
#filigrane
Position: fixe;
En bas: 9px;
À droite: 9px;
Opacité: 0.4;
la couleur noire;
Color en arrière-plan: RGBA (131, 50, 185, 0.5);
hauteur: 40px;
Largeur: 100px;
Affichage: flex;
Align-Items: Centre;
Justification-contenu: centre;
#ma pièce d'identité
Color d'arrière-plan: Azure;
Hauteur: 125px;
Dans le code CSS ci-dessus:
- Le "identifiant»Sélecteur pour sélectionner le div associé au«#filigrane"ID a été ajouté.
- Le "position«La propriété à l'intérieur du sélecteur d'identification est définie comme«fixé". Cette valeur place le filigrane en position fixe sur l'interface.
- Le "bas«La propriété est définie comme«9px". Il place le filigrane sur l'interface de telle manière qu'il est «9 pixels”Haut du bas de l'écran.
- Le "droite"La propriété est ajoutée avec la valeur"9px"Pour régler le filigrane"9 pixels”Du côté droit de l'écran.
- Le "opacité" est défini comme "4". C'est la propriété CSS qui définit la transparence de l'élément.
- Le "couleur«Pour le texte affiché sur le filigrane est défini comme«noir".
- Étant donné que le filigrane est créé à l'aide d'un «div»Élément, nous pouvons également définir la couleur d'arrière-plan du filigrane en utilisant le«RVB" fonction.
En conséquence, le filigrane sera créé et placé en bas à droite de la page Web:
Le filigrane ne bougera nulle part ailleurs à l'écran et restera en position fixe:
Cela résume la méthode pour créer un filigrane à l'aide des bibliothèques HTML et CSS.
Conclusion
Un filigrane est créé dans HTML et CSS en ajoutant le texte de filigrane ou le logo via un élément HTML. Ensuite, appliquez certaines propriétés CSS comme «opacité","hauteur","largeur","couleur","Couleur de l'arrière plan", et "position«Propriétés à lui pour en faire un filigrane et à le définir de manière à ne pas se déplacer à partir de là. Ce blog a démontré comment créer un filigrane en utilisant HTML et CSS.