Ajouter des bordures, des coins arrondis et des ombres.

Encadrez une carte, arrondissez les coins d’une photo ou soulevez une boîte de la page avec une ombre. Vous réglez tout cela dans le panneau Style de l’élément, et vous pouvez le changer au survol dans le panneau Hover style. Utilisez-le pour faire ressortir une carte. Pour le même cadre sur toute une série de cartes, une classe partagée les garde semblables.

La vidéo suit la recette ci-dessous : elle transforme un bloc de texte en carte avec une bordure, des coins arrondis et une ombre qui s’approfondit au survol.

Avant de commencer

• Ouvrez la page dans DXPR Builder ; pointer un élément montre sa barre de contrôle avec Plus. Vous débutez avec le constructeur ? Voir Votre première page.
• Enregistrer dans la boîte de dialogue garde une modification dans l’éditeur. Enregistrer sur la barre d’outils du constructeur au-dessus de votre contenu stocke la page et affiche « Saved field ».
• Mettez une chose en valeur. Une bordure ou une ombre attire l’œil vers une date clé, une offre ou une citation. Mettez-la partout et elle cesse de fonctionner.
• Gardez une série semblable. Pour le même cadre sur beaucoup de cartes, enregistrez une carte comme modèle ou utilisez une classe partagée. Voir ID et classes HTML.
• Laissez le thème accorder les ombres. Les cinq niveaux de Drop shadow sont définis une fois pour tout le site. Votre thème peut restyler un niveau, et chaque élément qui l’utilise suit.

Recette : une carte mise en valeur

Vous obtenez une boîte douce avec une fine bordure de la couleur de votre marque. Elle a des coins arrondis et une ombre qui grandit au survol.

1. Survolez l’élément Texte, cliquez sur Plus, puis Paramètres.
2. Ouvrez le panneau Style. Le modèle de boîte se trouve en haut. Ses verrous commencent ouverts ; cliquez sur le verrou à côté de Padding pour le fermer, pour que ses quatre côtés bougent ensemble.
3. Cliquez sur le côté haut de Padding, saisissez 32 et appuyez sur Entrée. Les quatre côtés affichent désormais 32px.
4. Choisissez une couleur Background claire, comme un gris pâle.
5. Réglez Border style sur Solid.
6. Fermez le verrou à côté de Border, puis cliquez sur l’un de ses côtés, saisissez 1 et appuyez sur Entrée.
7. Choisissez une Border color, réglez Border radius sur 16 et Drop shadow sur 3.
8. Ouvrez le panneau Hover style et réglez Drop shadow sur 5.
9. Cliquez sur Enregistrer dans la boîte de dialogue, puis Enregistrer dans la barre d’outils.
10. Choisissez Aperçu dans le menu d’affichage (l’icône œil) et pointez la carte. Son ombre s’approfondit.

Ce que vous voyez

La carte a une fine bordure de votre couleur, des coins arrondis et une ombre douce en dessous. Dans Aperçu, l’ombre s’approfondit pendant que le pointeur est sur la carte et se calme à son départ.

Comment une bordure est faite

Une bordure exige trois réglages, et le panneau les étale. Réglez les trois :

1. Border style choisit la ligne : Solid, Dotted ou Dashed. Sur Theme defaults, la plupart des éléments n’ont aucune bordure. None retire une bordure dessinée par votre thème.
2. L’anneau Border du modèle de boîte règle la largeur de chaque côté, de 0 à 50 px. Si vous le laissez vide, le navigateur utilise sa propre largeur d’environ 3 px.
3. Border color règle la couleur. Si vous le laissez vide, la bordure prend la couleur du texte.

Border radius arrondit les quatre coins, de 0 à 100 px. Il arrondit aussi l’arrière-plan et l’ombre. Sur une Image, il arrondit l’image elle-même.

Pour un cercle, rendez l’élément carré. Puis réglez Border radius à la moitié de sa largeur en pixels : 100 pour un élément large de 200 px. Pour tout ce qui est plus large, ajoutez la classe Circular (50% radius) sous HTML classes. Sur une Image, cette classe arrondit le cadre autour de l’image, pas l’image, donc utilisez Border radius là.

Niveaux de Drop shadow

Ce sont les niveaux par défaut. Chaque niveau est un style partagé, pas une valeur stockée dans votre page, donc un thème peut réaccorder un niveau pour tout le site. Pour votre développeur de thème : les niveaux sont les variables CSS --dxb-box-shadow-1 à --dxb-box-shadow-5.

Dans le panneau Hover style, Drop shadow règle le niveau pendant que le pointeur est sur l’élément. La nouvelle ombre apparaît en fondu en 0,15 seconde. Un niveau plus élevé au survol donne à une carte un air soulevé.

HTML classes propose plus de formes : Lifted drop shadow, Raised drop shadow, 3D shadow et Curved horizontal drop shadow. Il a aussi les Small shadow, Default shadow et Large shadow de Bootstrap. Utilisez une ombre par élément. Les classes d’ombre Bootstrap battent le curseur Drop shadow.

Si la bordure, les coins ou l’ombre réglés ne s’affichent pas

• La bordure n’apparaît pas. Border style est sur Theme defaults ou None. Choisissez Solid, Dotted ou Dashed.
• La bordure est plus épaisse que voulu. Aucune largeur n’est réglée, donc le navigateur utilise environ 3 px. Réglez les côtés Border dans le modèle de boîte.
• La bordure a la mauvaise couleur. Un Border color vide prend la couleur du texte. Choisissez une Border color.
• Les coins restent carrés. Une classe comme No rounded corners (rounded-0) sous HTML classes, ou une règle de thème avec !important, gagne. Retirez la pastille, ou demandez à votre webmestre au sujet de la règle de thème.
• Les coins s’arrondissent mais aucun cercle n’apparaît. Le curseur s’arrête à 100 px. Utilisez la classe Circular (50% radius).
• Drop shadow ne change rien. Une classe d’ombre Bootstrap comme Large shadow sous HTML classes gagne. Retirez sa pastille. Le niveau 1 est aussi discret, donc essayez le niveau 3 pour tester.
• L’ombre ne grandit pas au survol. Réglez Drop shadow dans le panneau Hover style, pas dans Style, et choisissez un niveau plus élevé que celui du repos.
• Un seul côté a changé. Le verrou à côté de Padding ou Border était ouvert. Fermez-le et saisissez de nouveau la valeur.
• L’ombre de survol ne s’affiche jamais sur téléphone. Les écrans tactiles n’ont pas de pointeur, donc un aspect de survol ne s’affiche qu’après un toucher.

Et ensuite ?

• Espacement : donnez au contenu de la place dans la bordure.