comment ajouter un effet d’ombre portée dans Squarespace

J’aime beaucoup les effets d’ombre portée, car ils permettent de mettre en valeur un contenu ou un bloc sur son site, de façon subtile et minimaliste. Dans le tutoriel associé, nous allons voir comment ajouter un effet d’ombre portée ; d’abord en no-code, comme sur les formes ; puis en appliquant du code CSS, pour ajouter un effet d’ombre à (presque) n’importe quel type de bloc : FAQ, newsletter, etc.

On va reprendre la table de prix réalisée dans ce tutoriel et venir jouer avec les ombres portées pour mettre en avant l’offre centrale - et principale !

Pour réaliser ce tuto, j’utilise l’extension Chrome Squarespace ID Finder, que vous pouvez retrouver et installer ici. 

AVANT DE DÉMARRER… RÉCUPÈRE TES 5 CODES CSS Squarespace À COPIER-COLLER

Tu as créé ton site Squarespace en autonomie, mais tu sens qu’il y manque un petit quelque chose pour le rendre vraiment unique ? Ce guide offert, simple et facile à utiliser, te permettra de personnaliser en quelques clics et copier-coller ton site Squarespace.

ACCÉDER À TON GUIDE NOTION OFFERT

le code CSS à utiliser :

#block-1234567890 {
  box-shadow: lightgrey 0px 0px 24px;
}