Avez-vous déjà tenté d'ajouter un coin arrondi sur l'arrière-plan d'une bordure ? Si tel est le cas, vous avez sans aucun doute remarqué que cela n'était pas possible.
Ci-dessous, une bordure avec dégradé sans arrondi :
C'est mieux. Cela fonctionne sur Firefox, mais pas sur Chromium (la propriété mask n'étant pas standardisée). De plus, on constate que sur Firefox, le coin arrondi ne suit pas à l'intérieur de l'élément. Retour à la case départ.
Jusqu'ici nous avons utilisé la propriété border-image pour le dégradé.
Bordure avec background-image
Essayons maintenant avec la propriété background-image :
Vous noterez que la bordure est devenue invisible (valeur transparent) et que le coin arrondi est supérieur à la bordure. Pourquoi ? Regardez plutôt le résultat si le coin arrondi est inférieur à la bordure :
De plus, si la bordure est égale au coin arrondi, nous n'obtenons plus le coin arrondi à l'intérieur de l'élément. Vous devez impérativement déclarer un coin arrondi supérieur à la bordure.
Parfait, nous obtenons enfin l'effet désiré ! Ah bah non. Si vous êtes sur Chromium, vous constatez que cela ne fonctionne pas.
Retour aux masques avec mask-composite
C'est marrant de se marrer, mais moi je veux juste ajouter un coin arrondi sur une bordure contenant une image et que ce soit compatible avec un maximum de navigateurs. Et si possible avec un minimum de code.
Tentons maintenant d'introduire la propriété mask-composite qui va nous permettre d'effectuer une opération de composition entre le masque situé sur la couche et le masque en dessous de notre élément :
Comme nous l'avons évoqué, la propriété mask-composite n'est compatible avec Chromium qu'en utilisant sa version non standard avec préfixe. Cela fonctionne sur Chromium, mais pas sur Firefox. Et toujours ce problème de coin arrondi qui n'est pas présent à l'intérieur de l'élément...
Je ne sais pas vous mais, en ce qui me concerne, je commence à perdre patience.
Heureusement, Firefox supporte le module CSS Masking Level 1. Donc, nous allons conserver les valeurs non-standard pour Chromium (en attendant le support) et ajouter la valeur exclude à la propriété mask-composite pour Firefox :
Mais, car il y a encore un mais, le masque nous empêche de placer du texte à l'intérieur de l'élément, ce qui est plutôt logique dans ce cas-ci. Et une fois de plus, les pseudo-éléments viennent à la rescousse.
Mais (encore une fois), cela ne fonctionne que sur Chromium pour l'instant.
Vous rencontrez un problème avec ce tutoriel ?
Vous avez remarqué une faute, un oubli, un lien mort ? Vous ne comprenez pas un point précis du tutoriel ? Vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux.