Introduction

En tant que développeur Webflow, vous savez que la plateforme offre une multitude de possibilités pour créer des sites web déjà très avancés. Cependant, il arrive parfois que vous ayez besoin d'aller au-delà des fonctionnalités natives du Designer Webflow pour donner vie à vos idées de conception. C'est là qu'intervient le code CSS personnalisé.

Le code personnalisé dans Webflow ouvre une porte vers l'infini en termes de personnalisation et d'optimisation de vos projets. Que vous cherchiez à intervenir sur la mise en page, la typographie ou encore les animations, le code CSS personnalisé peut être un excellent allié dans Webflow.

Dans cet article, on va donc explorer une sélection de snippets de code CSS simples mais soigneusement choisis pour élever vos projets. Chacun de ces snippets sert un but précis, vous permettant de faire quelque chose qui n’est pas faisable nativement dans le Designer Webflow. C’est parti !

7 codes CSS personnalisés pour vos projets Webflow

Mise en page, typographie, interactions dynamiques en CSS…

Empêchez le scroll horizontal (avec du sticky)

L'un des problèmes assez courants en matière de mise en page est de gérer le débordement horizontal indésirable. Parfois, le contenu d'une section peut être plus large que la fenêtre du navigateur, provoquant un scroll horizontal gênant.

Pour résoudre ce problème, vous pouvez ajouter {overflow: hidden;} à la section ou au page-wrapper, mais il y a un inconvénient. L’utilisation de {overflow: hidden;} rend la propriété CSS {position: sticky;} inutilisable sur tout élément enfant (ce qui n’est pas très pratique).

Pour remédier à ça, vous pouvez simplement ajouter la propriété suivante à la place (typiquement, sur la classe page-wrapper) :

<style>
.page-wrapper {overflow: clip;} 
</style>

L'ajout de {overflow: clip;} à un élément empêchera le scroll horizontal tout en laissant possible l’utilisation de {position: sticky;} sur les éléments enfants.

Exemple d’utilisation : Cette propriété CSS peut être systématiquement appliquée au page-wrapper pour prévenir le scroll horizontal non voulu.

Ecrasez les styles par défaut de Webflow

Par défaut, Webflow applique des styles de base à certains éléments HTML comme les liens, les champs de formulaire ou encore les liens de la barre de navigation. Ça permet, par exemple pour les liens, de les rendre bien évidents même si vous oubliez de les styliser.

Cependant, il peut arriver que vous souhaitiez avoir davantage la main sur ces éléments et leur faire hériter le CSS de leur parent. Par exemple, si vous créez un card personnalisée avec un Link Block, vous n’aurez sûrement pas envie que les textes enfants soient soulignés (ce qui sera le cas avec les styles par défaut de Webflow).

Le snippet suivant vous permet donc d'écraser les valeurs par défaut des éléments mentionnés et de leur faire hériter le CSS de leur parent :

<style>

a, /* Cible les liens */
.w-input, /* Cible les input de formulaires */ 
.w-select, /* Cible les selecteurs de formulaires */ 
.w-tab-link, /* Cible les liens d'éléments tab */ 
.w-nav-link, /* Cible les liens de navigation */ 
.w-dropdown-btn, /* Cible les dropdowns */ 
.w-dropdown-toggle, /* Cible les boutons de dropdowns */ 
.w-dropdown-link /* Cible les liens de dropdowns */ { 
  color: inherit; 
  font-size: inherit;
  text-decoration: inherit; 
}

</style>

En ajoutant ce snippet de code CSS, issu des styles globaux de Client-First (cliquez ici pour voir la documentation), vous ferez en sorte que les styles (couleur, taille, soulignement,…) soient hérités du parent. Et si vous voulez appliquer un style particulier, non hérité, vous pouvez toujours l'ajouter directement à l’élément.

Exemple d'application : Ce snippet est particulièrement utile si vous souhaitez supprimer les styles CSS par défaut de Webflow et gérer les éléments ciblés de façon plus globale.

Évitez les mots (ou les ponctuations) solitaires

Petite entorse ici : il ne s’agit pas d’un snippet CSS, mais plutôt d’un raccourci clavier bien utile pour insérer un caractère spécial.

Lorsque vous éditez des textes, c’est parfois frustrant de voir un tout petit mot (ou un symbole de ponctuation) isolé sur la dernière ligne. Vous savez, le “?” tout seul sur sa ligne.

Pour éviter cela, vous pouvez ajouter un espace insécable avec Shift + Espace pour que les mots entourant cet espace reste toujours sur la même ligne.

Exemple d'application : C’est particulièrement utile d’en ajouter juste avant une ponctuation “?” ou “!” comme dans une FAQ par exemple.

Équilibrez les différentes lignes d’un texte

Particulièrement pour des titres, dans la même veine que la situation précédente, vous pouvez parfois vous retrouver avec des textes sur deux lignes dont la répartition du contenu n’est pas idéalement équilibrée, ce qui peut-être frustrant.

Pour remédier à ça, vous pouvez utiliser la propriété CSS suivante pour que la répartition du texte s’équilibre sur toutes les lignes. La situation étant très spécifique, cela fait moins sens d’appliquer cette propriété à une classe spécifique, mais plutôt à un attribut personnalisé qui pourra être donné à un élément en particulier.

<style>
[data-balance] {text-wrap: balance;}
</style>

Exemple d'application : Cette propriété CSS peut être particulièrement utile pour équilibrer la répartition de certains titres, afin de garder un design qui soit le mieux équilibré possible.

Modifier la couleur de sélection

Lorsque les utilisateurs sélectionnent du texte sur votre site, il peut être intéressant de personnaliser la couleur de la sélection pour correspondre à l’identité de marque et faire la différence.

Pour le faire, vous pouvez utiliser le snippet de code CSS suivant :

<style>

::selection {
  /* Modifie la couleur du background de la sélection */ 
  background-color: #000000; 
  /* Modifie la couleur du texte de la sélection */ 
  color: #ffffff; 
}

</style>

Ce bout de code CSS vous permet de spécifier la couleur de fond et la couleur du texte lorsque du texte est sélectionné par l'utilisateur.

Exemple d'application : Ce snippet peut être utile pour refléter l’identité de marque d’un site et faire en sorte de corresponde à son esthétique générale.

Styliser un élément au survol de son parent

Dans le panneau de style, vous pouvez modifier les propriétés d’un élément lorsqu’il est survolé. Cependant, vous pouvez parfois avoir besoin de modifier les propriétés d’un élément enfant lorsqu’un élément parent est survolé.

Dans ce cas, vous pouvez passer par le panneau d’interaction de Webflow. Cependant, cela implique d’intégrer du code Javascript à votre projet, beaucoup plus lourd que quelques lignes de CSS, plus adaptées pour de petites interactions.

Pour styliser un élément lorsque son parent est survolé, vous pouvez donc ajouter un snippet CSS comme suit :

<style>

.parent:hover 
.children {
	/* styles */ 
}


</style>

L’indication :hover indique que l’animation aura lieu au survol de l’élément parent, et le sélecteur children qui le suit immédiatement (sans virgule) indique que c’est lui qui sera stylisé.

Exemple d'application : Imaginons que, au hover d’un bouton personnalisé, vous vouliez passer le soulignement (créé avec un Div Block) de 0% à 100% de width, vous pouvez gérer l’animation de survol en ajoutant le snippet CSS suivant.

<style>

/* Vous pouvez appliquez la width de 0% directement dans le Designer */ 
.button-underline {width: 0%;} 

.button:hover 
.button-underline {
	width: 100%; 
}

/* N'oubliez pas d'ajouter une transition à l'élément .button-underline dans le Designer */

</style>

Styliser un item spécifique d'une collection

Lorsque vous travaillez avec des collections dans Webflow, il peut être utile de styliser un élément spécifique différemment des autres. Voici un snippet pour y parvenir :

<style>

.collection-item:nth-child(3) 
.collection-item-child {
	/* styles */ 
}


</style>

Ce code CSS permet de cibler un élément particulier d'une collection (dans cet exemple, le troisième item) et d'appliquer des styles spécifiques à cet élément seulement (ou comme dans l’exemple, à un de ces enfants).

Alternativement, pour cibler plusieurs éléments à intervalles réguliers, vous pouvez adapter le snippet suivant :

<style>

.collection-item:nth-child(4n+2) 
.collection-item-child {
	/* styles */ 
}


</style>

Partie un peu technique : le premier chiffre définit l’intervalle et le second définit la position de l’élément cible dans cet intervalle. Le code CSS précédent cible donc le second item de chaque interval de quatre : 2 (4*0 + 2), 6 (4*1 +2), 10 (4*2 +2), etc.

Exemple d'application : Ce snippet de code CSS peut être utile si vous avez une longue collection CMS à laquelle vous voudriez ajouter un peu de variation.

En ajoutant ces snippets de code CSS personnalisé, vous pouvez personnaliser en profondeur l'apparence ou le comportement de certains éléments de votre site Webflow. Ces astuces vous permettent d’avoir une flexibilité totale pour répondre à vos besoins de conception.

Conclusion

Avec ces snippets de code CSS personnalisé à votre disposition, vous avez maintenant la possibilité d'élargir vos horizons en matière de conception sur Webflow. N’hésitez pas à les expérimenter pour découvrir comment ils peuvent enrichir vos projets.

Pour aller plus loin sur le sujet, découvrez aussi les articles suivants :

• Comment modifier le soulignement par défaut de Webflow
• Utiliser le Fluid Responsive dans Webflow grâce à Finsweet
• Comment personnaliser facilement la scrollbar de votre site