Vous connaissez les ombres, n'est-ce pas ?

Elles représentent un ajout simple, mais très important dans la conception de tout site web.

Elles apportent une sensation de profondeur à vos éléments et, lorsqu'elles sont bien utilisées, elles élèvent vraiment le design à un niveau supérieur de professionnalisme.

Appliquer des ombres à un groupe comme une carte dans Bubble est assez simple. Vous utilisez la propriété d’ombre de l’élément.

Cependant, sur un texte, ce n'est pas aussi évident.

En effet, Bubble vous permet d’ajouter une Box Shadow (l’ombre portée sur le conteneur de votre élément).

Dans cet article, nous allons voir comment ajouter des ombres à votre texte, pour le mettre en valeur et obtenir un résultat convaincant.‍

Étape 1 : Construire votre page

Si ce n’est pas déjà fait, commencez par créer votre page.

Dans cet exemple, nous allons utiliser cette section Hero provenant d’un modèle standard de site.‍

Notre objectif est d’améliorer cette section Hero avec des ombres de texte, alors commençons.‍

Étape 2 : Activer les attributs ID HTML‍

Si vous avez déjà lu certains de nos articles précédents, vous savez comment procéder.

Sinon, il est important de lire cette partie avant de passer à l’étape suivante.

Pour continuer, il est crucial de vérifier que la fonction permettant de révéler l’ID des éléments est activée dans votre application.

Pour activer cette fonctionnalité, allez dans les paramètre puis choisissez « Général ». Dans cette section, trouvez et cochez l’option intitulée « Exposer l’option permettant d’ajouter un attribut ID aux éléments HTML. »‍

Une fois cette option activée, vous verrez apparaître ce nouveau champ dans le panneau de propriétés de chaque élément :‍

Étape 3 : Installer le plugin Classify (gratuit)‍

Pour cet effet, nous allons avoir besoin d’un peu de CSS. Rien de très compliqué, mais c’est nécessaire.

Allez donc installer le plugin Classify dans votre application Bubble.

Vous pouvez le trouver ici. https://bubble.io/plugin/classify-1568299250417x684448291308175400
‍

‍C’est un plugin totalement gratuit qui vous permet d’ajouter une classe CSS à n’importe quel élément de votre application, ce qui nous permet ensuite de le cibler facilement avec du code CSS.‍

Étape 4 : Ajouter une classe CSS à nos éléments de texte‍

Très bien, il ne nous reste plus qu’une étape pour préparer nos éléments de texte à recevoir des ombres.

Attribuons-leur une classe CSS.

Pour cela, nous allons utiliser une commande Classify.

En résumé, cette commande indique simplement à Classify d’ajouter une classe CSS à notre élément, rien de plus.

Pour ce faire, collez simplement ce code dans l’attribut ID HTML de votre élément :

{addClass: "shadow-text"}

Par défaut, j’ai choisi le nom de classe « shadow-text », mais vous pouvez le remplacer par n’importe quelle valeur. Veillez simplement à vous en souvenir pour l’étape suivante.

‍Étape 5 : Insérer notre code CSS dans notre application.‍

Voici la dernière étape : créer notre ombre.

Pour cela, nous allons utiliser un peu de CSS simple, avec l’aide d’un générateur d’ombre de texte CSS.

Cela nous aidera à trouver l’ombre parfaite, sans avoir à modifier les valeurs à la main.

Vous pouvez par exemple utiliser celui-ci : https://www.cssportal.com/css3-text-shadow-generator/‍

Lorsque vous avez trouvé l’ombre qui vous convient, copiez simplement le code CSS depuis le côté droit de l’écran et collez-le dans ce code :

<style>
.shadow-text {
    VOTRE-CODE-CSS
</style>

Par exemple, j’ai obtenu ce code :‍

‍‍‍

<style>
.shadow-text {
    text-shadow: 3px 2px 0px rgba(145, 141, 145, 1);
</style>

Une fois votre code prêt, plusieurs méthodes s’offrent à vous pour l’intégrer dans votre application.

1. L’insérer dans l’en-tête global de votre application

Cela est utile si vous souhaitez utiliser ces ombres de texte sur plusieurs pages de votre application.

Pour cela, il suffit d’aller dans Paramètres —> SEO / Metatags —> et coller votre code dans la section « Script / balises meta dans l’en-tête ».

2. L’insérer dans l’en-tête d’une page spécifique

Cette méthode est à privilégier si vous souhaitez ajouter cette ombre de texte uniquement sur certaines pages spécifiques.

Pour cela, ouvrez le panneau des propriétés de la page (en la sélectionnant dans l’arbre des éléments) et collez votre code dans la section HTML Header.

Quelle que soit la méthode choisie, il suffit maintenant de cliquer sur « Preview » pour voir votre ombre de texte !

Notez que la partie la plus difficile n’est pas d’ajouter l’ombre à votre application, mais de trouver un rendu esthétique ! Alors continuez d’essayer :)