Décalage CSS

Avez-vous déjà vu une animation en jouant à des jeux en ligne ou en utilisant un site Web pour des informations ou des connaissances? Ces animations peuvent rendre l'outil, le jeu ou le site Web plus esthétique et élégante. L'une de ces animations est le mouvement de certains éléments sur l'écran de la page Web. L'attribut CSS Offset Animons-nous un élément du script HTML. Cet attribut peut apporter des modifications à beaucoup de choses pour l'élément respectif du script HTML: sa position, son chemin, son mouvement et son espace entre contour et bordure. Dans ce guide, nous discuterons de l'utilisation de la propriété de décalage avec ses différents attributs.

Exemple 01: décalage de décalage

Pour utiliser la propriété de compensation pour donner un espace transparent parmi avec la bordure des éléments et son aperçu, nous devons créer une section «div» sur la page Web. Nous avons commencé ce code avec la balise HTML et l'avons terminée avec la balise de fermeture HTML. Dans la balise corporelle, nous avons utilisé la balise «div» pour créer une section sur la page Web HTML. Cette balise «div» ne contient qu'une simple rubrique ou une phrase de trois mots et a été fermée avec la rupture de ligne ajoutée par la balise de ligne de pause "
".

Dans la balise «tête» de ce code HTML, nous avons titré cette page Web à «Offset-Outline» et en utilisant la balise «Style» pour styliser la section «Div» de notre page HTML. Nous avons ajouté des marges de 10 pixels pour la section «div» avec une bordure cramoisi solide de 5 pixels. La couleur d'arrière-plan de cette section «div» serait «aqua» et le contour serait d'une couleur violet en pointillés à 4 pixels. Nous avons également utilisé la propriété «Offset» pour donner un écart de 15 pixels entre la frontière de la section «Div» et son aperçu. Enregistrons ce code et exécutons-le avec le menu «Run» du code Visual Studio.

Après l'exécution réussie de ce code dans le navigateur Chrome, nous avons la sortie ci-dessous de la page HTML. Voici un écart clair entre le bord Crimson 5 pixels de l'étiquette Div et son contour de couleur violet en pointillés à 4 pixels. Vous pouvez voir que l'espace n'a pas de couleur.

Exemple 02: Position de décalage

Voici à utiliser la propriété de position de décalage de CSS pour spécifier la position de début de tout élément de la page Web HTML. Commençons par l'utilisation des balises d'ouverture et de clôture HTML. Dans cette balise, nous avons utilisé des étiquettes de corps et de tête. La balise corporelle contient d'abord 2 titres de taille 2 avec différents titres. Après cela, deux balises «div» ont été utilisées. La balise «div» externe a été spécifiée avec l'ID «A» tandis que sa balise intérieure «div» a été spécifiée avec l'ID «B» pour la différenciation dans le style.

Les étiquettes «Div» et Body sont fermées ici. Dans la balise «Head», nous avons utilisé la balise de titre pour titre cette page Web HTML et la balise de style pour ajouter du style au corps de notre page Web. Nous avons utilisé le «#A» pour styliser la balise «div» externe en utilisant son identifiant «A». La position de décalage pour cette section «div» a été spécifiée avec la valeur «relative». Sa largeur et sa hauteur seraient spécifiées comme 200px avec la bordure de couleur cramoisie solide 5px autour de ce «div». La position de la balise intérieure «div» a été définie sur Absolute qui est lié à l'élément adjacent. La largeur et la hauteur de la section intérieure «div» sont définies à 75 pixels avec la frontière cramoisi de 5px solide.

L'espace ou le rembourrage supérieur et gauche ont été définis par rapport à la section extérieure pour ce «div»: en haut: 180px et à gauche: 7px. Notre code est maintenant prêt à être exécuté sur le navigateur.

L'utilisation de la valeur «relative» pour la propriété de position décalée place la section «div» externe par rapport aux autres éléments de notre page HTML. Tandis que l'utilisation de la valeur de position «absolue» ainsi que le réglage du rembourrage en haut et à gauche ont placé le «div» intérieur au milieu de la section externe «div».

Exemple 03: PATH OFFET

Essayons d'utiliser la propriété Offset-Anchor et Offset Path pour créer une animation dans la page Web HTML. Le même titre a été donné à cette page Web. Dans la balise corporelle, nous utilisons des balises à trois sections pour créer différentes sections sur la page Web suivie des balises «div» pour les différencier. Les trois balises «div» contiennent un seul texte à l'intérieur et ont été spécifiées avec trois classes différentes: A, B et C. La partie principale de ce code HTML est sa balise de style qui contient de nombreuses propriétés CSS pour animer trois balises. Les trois balises «div» contiennent la propriété du chemin de décalage pour se déplacer le long du chemin défini pour cela afin qu'il ne soit pas si linéaire de mouvement. La largeur et la hauteur des trois éléments Div seraient respectivement de 100 et 30 pixels. L'animation a été définie pour déplacer des éléments div avec la vitesse de 3000 millisecondes sans s'arrêter. Ainsi, l'attribut infini est utilisé. Voici l'élément de section pour le style. Son image d'arrière-plan serait un gradient linéaire et serait à 49% transparent du haut, à 50% de noir de gauche, de droite et du milieu, et 62% transparent par le bas. De plus, chaque section contenait une bordure solide de 2 pixels et des marges de 10 pixels par le bas.

La propriété de l'ancrage décalé a été utilisée pour spécifier un point de l'élément «div» pour voyager le long du chemin qui a été défini par l'utilisation de la propriété «Path de décalage» dans le style «div» principal. Cela signifie que le point d'un élément «div» serait de déplacer sur le chemin non linéaire particulier de notre écran de page Web. Les différentes couleurs d'arrière-plan pour ces éléments «div», la couleur du texte et l'alignement du texte pour ces éléments ont été définis. Enregistrons et exécutons ce code pour voir les modifications.

Les trois éléments Div se déplaceront le long du chemin non linéaire non droit dans trois sections différentes comme indiqué ci-dessous. Ces trois éléments sont étiquetés comme un, deux et trois; se déplaçant de gauche à droite de l'écran.

Nous avons mis à jour le code et utilisé les différentes valeurs de la propriété de chemin Offset-Path dans le style de ce code HTML. Ce chemin ferait que nos éléments div se déplacent dans un mouvement en zigzag. De plus, nous avons mis à jour la hauteur et la largeur de ces sections de div à 40 pixels. La distance de mouvement est également ajoutée tandis que le reste est inchangé.

La sortie de ce code mis à jour nous montre trois petits éléments div avec un mouvement zig-zag le long de chacune de leurs sections.

Conclusion

Cet article concerne l'utilisation de différentes propriétés de décalage pour styliser et animer les différents éléments d'une page Web HTML. Nous avons fourni un exemple en utilisant la propriété Offset-Outline pour ajouter de l'espace entre la bordure et le contour d'un élément spécifique. Un autre exemple est utilisé pour démontrer l'utilisation de la propriété de position de décalage pour positionner l'élément spécifique par rapport aux autres éléments du corps. Nous avons également essayé d'animer et de déplacer les éléments HTML sur l'écran du navigateur sur un chemin spécifique en utilisant les propriétés de décalage de décalage et de trame de décalage.