Layout
Génération
Génération
Les éléments sont soit du HTML, soit de l’image.
🚨 Si un élément image a un enfant, il sera généré comme “background-image”, c’est à dire comme image de fond.
Element
Sans enfant
Avec un enfant
1
HTML
HTML
HTML
2
Image
Image
Background-image
There are no rows in this table
Les types générations
Un élément est un élément html, image ou background-image.
Les éléments générés en HTML
Les éléments HTML sont des éléments dynamiques. Ils peuvent avoir des enfants. Dans ce cas leur taille change en fonction contenu à l’intérieur.
On peut citer les textes, les lignes, les blocs HTML ou les boutons
Les éléments générés en image
Les images sont des éléments fixes. Si l’élément est généré en image, cela signifie qu’il n’a pas d’enfant.
On peut citer les visuels, ou les SVG
Les éléments générés en background-image
Les éléments “background-image” sont des images avec des enfants à l’intérieur. Contrairement aux éléments HTML, le “background-image” ne change pas de taille en fonction de ses enfants.
🚨 C’est le format a utiliser avec parcimonie.
La génération en fonction du type de layer
Les textes
Si un texte a un élément au dessus de lui, il sera alors généré en background-image.
Si un texte a les éléments suivants, il sera généré en image :
→ Une opacité ≠ 0
→ Un background-image
→ Une bordure
→ Une rotation
Sinon il sera généré en HTML (👌 Le meilleur)
Les rectangles/blocs dynamiques
Si le rectangle a un élément partiellement au dessus, il sera généré en background-image.
Si le rectangle a le style suivant, il sera généré en image :
→ Une opacité ≠ 0
→ Un background-image
→ Une forme non rectangulaire
→ Une rotation
Sinon, il sera généré en HTML (👌 Le meilleur)
Les visuels, les SVG, les masks, les fusions
Si un visuel a un élément au dessus (totalement ou partiellement), elle sera générée en background-image.
Sinon il sera généré en image
Les lignes
Si la ligne a un élément au dessus (totalement ou partiellement), elle sera générée en background-image.
Si la ligne a le style suivant, elle sera générée en image :
→ Une opacité ≠ 0
→ Un background-image
→ Une rotation
Sinon la ligne sera générée en HTML/CSS (👌 Le meilleur)
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.