Comment créer un objet \

Le niveau dépend de la taille du module. Remplissage personnalisé: 2 haut, 2 bas
Nous allons continuer à doubler la hauteur de la couche précédente en doublant la valeur de remplissage. Force la boîte d’ombre floue: 50 pixels de même, l’intensité du flou augmente avec chaque niveau. Créer une troisième couche d’ombre externe pour créer une troisième couche d’ombre externe, nous continuerons à copier le formulaire de texte et à mettre à jour les paramètres. Copiez le formulaire de texte que vous venez de terminer l’édition et mettez à jour ce qui suit: largeur: 60% marge personnalisée: – 15px remplissage personnalisé en haut: 3px en haut, 3px en bas ombrage flou intensité: 70 px
Enregistrer les paramètres pour créer une quatrième couche d’ombre externe pour créer une quatrième couche d’ombre externe, copiez le formulaire de texte que vous venez de terminer d’éditer et mettez à jour ce qui suit: largeur: 80% marge personnalisée: – 10px haut remplissage personnalisé: 4px haut, 4px Frame Shadow Bottom vertical position: 100 Px Frame Shadow Flour Force: 90 px Ici, la position verticale est augmentée à 100 Px pour tenir compte d’une plus grande force de flou et pour positionner les ombres. Créer une cinquième couche d’ombre externe pour créer une cinquième couche d’ombre externe, copiez le formulaire de texte que vous venez de terminer d’éditer et mettez à jour ce qui suit:
Largeur: 100% marge personnalisée: – 5px en haut, 200px en bas remplissage personnalisé: 5px en haut, 5px en bas position de l’ombre du cadre vertical: 100 Px intensité du flou de l’ombre de la boîte: 110 Px j’ai ajouté la marge inférieure de 200 Px pour tenir compte de la marge supérieure négative que nous ajoutons à tous les niveaux. Et ça le sera. Maintenant, votre image a une belle ombre extérieure. Sauvegardez – le dans la bibliothèque et placez – le n’importe où Comme cette ombre sera utilisée avec de nombreux éléments, d
X Intensity Fuzzy shadow box: 110 Px Shadow diffusion Force: 0px shadow box color: rgba (0,0,0,2) third level text module set width: 75% Alignment: Center Custom margin: – 120 Px top, 0 Px Bottom Custom fill: 70px top, 70px filet de fond: 50% vertical frame Shadow Location: 250 Px Frame Shadow Fuzzy Intensity: 120 Px Frame Shadow Spread Force: 0px Shadow Frame color: rgba (0,0,0,0,2) Fourth level text module Setting width: 100% Alignment: Center Custom edge: – 130 Px top, 0 Px remplissage personnalisé du Bas: 70px haut, 70px filet du Bas: 50% de la position verticale de l’ombre du cadre: 250 Px intensité du flou de l’ombre du cadre: 130 Px force de diffusion de l’ombre du cadre: 0px couleur du cadre de l’ombre: rgba (0,0,0,2) Notez que la largeur de chaque couche augmente de 25% (25%, 50%, 75%, 100%). L’intensité de remplissage et de flou augmente également pour s’étendre progressivement vers l’extérieur et brouiller les ombres. Voici les résultats de son apparence sous l’image PNG de l’objet. Si vous Abaissez un objet en lui donnant une marge négative, vous pouvez voir que l’objet semble être sur la surface. Ajoutez l’animation à l’image et à l’ombre extérieure pour créer des élévations je ne mentirai pas, l’animation n’est pas 100% exacte par rapport à l’apparence physique de l’ombre lorsque vous soulevez l’objet de la surface, mais l’effet est toujours intéressant et peut être partagé. Ajoutons de l’animation au premier exemple d’ombres à 5 couches utilisant une image Divi. Le concept est simple. Animez la diapositive vers le haut pour l’image que vous souhaitez promouvoir. Ensuite, ajoutez une animation de diapositives dans la direction médiane pour chaque élément d’ombre sous l’image.
Cela augmente l’image lorsque l’ombre s’étend. Pour rendre cette animation réaliste, vous pouvez limiter l’animation au – dessus de l’élément effondré de sorte que l’animation apparaisse à la fois sur l’image et sur l’ombre lorsque la page est chargée. Si vous comptez sur l’activation de l’animation lorsque l’utilisateur fait défiler la page vers le bas, vous obtenez un délai entre l’image promue et les ombres étendues. Pour ajouter une animation, utilisez ce qui suit pour mettre à jour les paramètres du module Image: style d’animation: durée de l’animation de diapositives: 1400 MS intensité de l’animation: 10% Ensuite, pour chacun des cinq modules de texte, mettre à jour ce qui suit: style d’animation: zoom durée de l’animation: 1400 MS intensité de l’animation: 10% C’est l’animation générée… Réactivité et compatibilité avec le navigateur comme ces couches d’ombre sont créées en utilisant la largeur en pourcentage, elles s’adaptent à la taille de la colonne dans laquelle elles se trouvent et sont belles sur n’importe quel appareil ou la largeur du navigateur. De plus, les attributs CSS de l’ombre de boîte utilisés pour créer ces ombres sont largement acceptés par tous les navigateurs principaux. Voici un aperçu rapide de ces ombres sur les appareils mobiles… Si vous voulez redimensionner les ombres mobiles, vous pouvez toujours définir un remplissage personnalisé spécifique pour chaque niveau de votre tablette et smartphone lorsque vous créez vos propres ombres. Au départ, j’ai décidé de créer ces ombres en utilisant des filtres flous, mais les ombres multicouches décrites ici ne sont qu’une petite partie d’un certain nombre de combinaisons hybrides d’ombres, de couleurs et de formes que vous pouvez créer en utilisant Divi Builder. Une fois que vous avez appris la technique de stratification des ombres pour les panneaux de formulaires texte, vous pouvez facilement changer les ombres externes. De plus, vous pouvez enregistrer ces couches dans la Bibliothèque Divi et les utiliser n’importe où