Comment créer des images avec un reflet

Il n’y a pas d’option « reflet » pour les images dans Sparkle, mais, après ce tutoriel, vous pouvez recréer le même effet manuellement. Pour commencer, ajoutez une image à votre page en sélectionnant « Image » puis « Ajouter » sur l’inspecteur, ou bien copiez et collez-là. Ensuite, alignez l’image en bas à l’aide de l’icône la plus à droite des six icônes d’alignement.

Maintenant dupliquez cette image : en la copiant et la collant, vous la placerez automatiquement au-dessus de l’originale, ce qui est idéal pour ce tutoriel. Faites glisser la poignée supérieure de l’image en dessous de la poignée inférieure, en inversant l’image dupliquée verticalement et en la ramenant directement sous l’originale. Pour créer un reflet, il est préférable de réduire la hauteur de l’image à environ la moitié de l’originale.

À ce stade, superposez une boîte sur l’image du bas (sélectionnez « Boîte » dans la barre d’outils) et donnez à cette boîte un contenu « Dégradé », avec la partie supérieure transparente (représentée par un cube grille noir et blanc) et la partie inférieure blanche (qui correspond au fond de notre page).

Enfin, ajustez l’image du bas et la distance entre la boîte et l’image du haut, et assurez-vous que la boîte est alignée avec l’image du bas. Dans cet exemple, il y a un petit espacement pour séparer les images, ce qui donne un léger effet de « hauteur », mais elles peuvent être rapprochées. Pour plus d’informations voir la section « Images ».

Mis à jour pour Sparkle 3.1

In English

Auf Deutsch

In Italiano

S’il vous plait, signalez tout défaut dans la documentation et nous le corrigerons dès que possible !

Sparkle combine une approche tout-en-un, une interface lisible et une volonté absolue de produire des sites Web extrêmement performants et optimisés pour les moteurs de recherche (SEO). 

Tout ça dans une puissante application Mac native. 

Rien ne s’en approche.

Copyright ©2021 River SRL

IT06208340486 — REA FI-609716

Ce site utilise des cookies. Certains sont essentiels au fonctionnement de notre site ; d’autres nous aident à améliorer l’expérience utilisateur et afficher le contenu de tiers. En utilisant ce site, vous acceptez l’envoi de ces cookies par notre site. Lisez notre Politique de confidentialité pour en savoir plus ou refuser.