Boîtes

‍Les ‍boîtes ‍sont ‍des ‍éléments ‍décoratifs ‍qui ‍peuvent ‍être ‍utilisés ‍comme ‍arrière-plans ‍pour ‍le ‍contenu ‍réel ‍et ‍peuvent ‍contenir ‍une ‍couleur ‍de ‍remplissage, ‍un ‍dégradé, ‍un ‍motif, ‍une ‍image ‍bitmap ‍ou ‍une ‍image ‍vectorielle.

‍Les ‍réglages ‍de ‍base ‍d'une ‍boîte ‍sont ‍très ‍simples ‍mais ‍ils ‍cachent ‍un ‍grand ‍degré ‍de ‍personnalisation.

‍Les ‍boîtes ‍peuvent ‍être ‍étirées ‍sur ‍toute ‍la ‍largeur ‍du ‍navigateur, ‍c'est ‍si ‍courant ‍qu'il ‍y ‍a ‍un ‍raccourci ‍"boîte ‍large" ‍dans ‍la ‍barre ‍d'outils.

‍Bordure ‍de ‍boîte

‍Commun ‍à ‍tous ‍les ‍types ‍de ‍contenu ‍de ‍boîte, ‍vous ‍pouvez ‍spécifier ‍une ‍bordure ‍de ‍boîte. ‍La ‍bordure ‍est ‍ajoutée ‍en ‍dehors ‍de ‍l'étendue ‍de ‍l'image. ‍Vous ‍pouvez ‍avoir ‍un ‍réglage ‍de ‍bordure ‍commun ‍pour ‍tous ‍les ‍côtés ‍ou ‍un ‍réglage ‍individuel ‍pour ‍chaque ‍bord, ‍le ‍canevas ‍affichera ‍le ‍résultat ‍exact.

‍Arrondir ‍les ‍coincs ‍de ‍boîte

‍Les ‍coins ‍des ‍boîtes ‍peuvent ‍être ‍arrondis ‍avec ‍un ‍rayon ‍de ‍pixel ‍spécifié, ‍vous ‍pouvez ‍opter ‍pour ‍que ‍chaque ‍coin ‍soit ‍arrondi ‍ou ‍non.

‍La ‍bordure, ‍lorsqu'elle ‍est ‍visible, ‍suit ‍les ‍bords ‍arrondis.

‍Ombre ‍portée ‍de ‍boîte

‍Les ‍ombres ‍portées ‍étaient ‍autrefois ‍cool ‍et ‍à ‍la ‍mode, ‍et ‍pour ‍cette ‍seule ‍raison ‍leur ‍utilisation ‍peut ‍donner ‍à ‍votre ‍design ‍un ‍aspect ‍vieilli.

‍Utilisés ‍avec ‍soin ‍et ‍goût, ‍ils ‍peuvent ‍ajouter ‍un ‍effet ‍3D ‍subtil ‍et ‍donner ‍une ‍sensation ‍organique ‍de ‍profondeur.

‍Opacité ‍des ‍boîtes

‍L'ajustement ‍de ‍l'opacité ‍peut ‍être ‍utile ‍pour ‍certains ‍effets ‍visuels. ‍L'opacité ‍affecte ‍le ‍contenu ‍de ‍la ‍boîte ‍ainsi ‍que ‍la ‍bordure ‍et ‍l'ombre, ‍le ‍cas ‍échéant.

‍Arrière-plan ‍fixe

‍Lors ‍de ‍l'utilisation ‍d'une ‍image ‍d'arrière-plan, ‍l'inspecteur ‍affiche ‍l'option ‍supplémentaire ‍"Figé ‍dans ‍la ‍fenêtre". ‍L'option ‍"Fige ‍dans ‍la ‍fenêtre" ‍verrouille ‍l'arrière-plann ‍pour ‍que ‍la ‍partie ‍visible ‍change ‍lorsque ‍la ‍boîte ‍bouge ‍ou ‍que ‍vous ‍faites ‍défiler. ‍Ceci ‍peut ‍être ‍utilisé ‍pour ‍de ‍nombreux ‍effets ‍visuels ‍intéressants ‍tels ‍qu'un ‍effet ‍de ‍quasi ‍parallaxe, ‍comme ‍illustré ‍dans ‍la ‍plupart ‍des ‍modèles ‍de ‍design.

‍Boîtes ‍et ‍images

‍Lorsqu'elles ‍sont ‍configurées ‍avec ‍une ‍image ‍d'arrière-plan, ‍les ‍paramètres ‍de ‍la ‍boîte ‍sont ‍très ‍similaires ‍à ‍ceux ‍des ‍images, ‍et ‍peuvent ‍être ‍visuellement ‍indiscernables ‍des ‍éléments ‍d'image. ‍Les ‍images ‍sont ‍utilisées ‍comme ‍contenu, ‍les ‍boîtes ‍comme ‍arrière-plan ‍ou ‍décoration. ‍La ‍différence ‍est ‍principalement ‍due ‍à ‍l'accessibilité.

‍Boîtes ‍en ‍tant ‍que ‍sections ‍de ‍page

‍Une ‍utilisation ‍courante ‍pour ‍les ‍boîtes ‍est ‍de ‍regrouper ‍visuellement ‍différentes ‍sections ‍dans ‍une ‍page. ‍Ceci ‍est ‍efficace ‍avec ‍tous ‍les ‍modes ‍de ‍contenu, ‍une ‍couleur ‍unie, ‍un ‍dégradé, ‍une ‍image ‍ou ‍un ‍motif ‍rendra ‍la ‍boîte ‍visuellement ‍distincte ‍de ‍la ‍section ‍suivante ‍ou ‍précédente ‍dans ‍la ‍page.

‍Une ‍rupture ‍de ‍section ‍particulièrement ‍efficace ‍peut ‍être ‍obtenue ‍en ‍utilisant ‍un ‍SVG ‍comme ‍fond ‍boîte ‍d'arrière-plan, ‍avec ‍une ‍pente ‍ou ‍un ‍bord ‍non ‍droit. ‍Lorsque ‍la ‍largeur ‍du ‍navigateur ‍augmente, ‍le ‍SVG ‍s'étirera ‍et ‍s'étendra, ‍de ‍sorte ‍que ‍le ‍SVG ‍devra ‍être ‍aligné ‍contre ‍le ‍bord ‍supérieur ‍ou ‍inférieur ‍de ‍la ‍boîte.

‍Un ‍effet ‍similaire ‍pourrait ‍être ‍obtenu ‍avec ‍une ‍image ‍PNG ‍avec ‍un ‍arrière-plan ‍partiellement ‍transparent, ‍mais ‍au ‍détriment ‍d'une ‍taille ‍de ‍téléchargement ‍beaucoup ‍plus ‍importante ‍que ‍le ‍contenu ‍SVG ‍vectoriel ‍typique.

S'il vous plait, signalez toute lacune dans la documentation et nous la corrigerons dès que possible !

Copyright © 2019 River SRL 

IT06208340486 — REA FI-609716

This site uses cookies. Some are essential to make our site work; others help us improve the user experience and display third party content. By using the site, you agree to our site sending these cookies. Read our privacy policy to learn more or opt out.