CSS effects

Stop Horizontal scroll Body

html, body {
max-width: 100%;
overflow-x: hidden;
}

Blend mode
Objectif
Reproduire les mélanges de calques, que l'on peut trouver par exemple sur Photoshop.
👉 Intégrez le code suivant dans la partie Head Code de votre projet Webflow ou dans un embed placé avant le contenu modifié.
<style>
/* Ajouter un blend mode */
.classe {
mix-blend-mode: darken;
}
</style>
: 4.8/5 -
Search
1
normal
screen
darken
color-dodge
difference
hue
color
2
multiply
overlay
lighten
color-burn
exclusion
saturation
luminosity
There are no rows in this table






Background blur
Objectif
Ajouter un flou sur l'arrière-plan d'un élément.
👉 Intégrez le code suivant dans la partie Head Code de votre projet Webflow ou dans un embed placé avant le contenu modifié.
<style>
/* Ajouter un flou sur l'arrière-plan */
.classe {
opacity: 80%;
-webkit-backdrop-filter: saturate(1.8) blur(20px);
}
</style>

Check webflow baground feature
: 4/5 (ne fonctionne pas sur firefox ou IE)-



CSS Gap Flex
// CSS
// Si mon parent est en flex
.parent {
gap: 30px 40px;
}

// Si mon parent est en display block
.parent > * + * {
margin-top: 30px;
margin-left: 40px;
}

Custom slider button
.w-slider-dot.w-active { background-color: rgba(30, 30, 30, 1); background: none; width: 24px; height: 12px;}
.w-slider-dot { background-color: rgba(30, 30, 30, 0.25); width: 12px; height: 12px; border-radius: 999px; }


Animation SVG

Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.