FR | EN
Installer
Documentation

Documentation - Effects.

Découvrez Marssel : un framework CSS intelligent, configuration minimale, conçu pour des interfaces rapides et une expérience développeur simplifiée.

Démarrage

Concepts de base

Utilitaires

Composants

Effects

Les effets CSS permettent d'ajouter de la profondeur, du mouvement et de l'interactivité à vos interfaces. Marssel offre une syntaxe simple pour appliquer des ombres, des transformations, des opacités et d'autres effets visuels. Ces propriétés peuvent être combinées avec des pseudo-classes :hover, :focus et des breakpoints pour créer des expériences utilisateur dynamiques et responsive.

Ombres simples

Aperçu
Ombre légère
Ombre moyenne
Ombre prononcée
Ombre forte 
<div class="shadow-[0_2px_4px_rgba(0,0,0,0.1)] p-[20px] bg-[fff]">
    Ombre légère
</div>

<div class="shadow-[0_4px_8px_rgba(0,0,0,0.15)] p-[20px] bg-[fff]">
    Ombre moyenne
</div>

<div class="shadow-[0_8px_16px_rgba(0,0,0,0.2)] p-[20px] bg-[fff]">
    Ombre prononcée
</div>

<div class="shadow-[0_12px_24px_rgba(0,0,0,0.25)] p-[20px] bg-[fff]">
    Ombre forte
</div>

Ombres colorées

Aperçu
Ombre bleue
Ombre verte
Ombre rouge 
<div class="shadow-[0_4px_12px_rgba(59,130,246,0.3)] p-[20px] bg-[fff]">
    Ombre bleue
</div>
<div class="shadow-[0_4px_12px_rgba(16,185,129,0.3)] p-[20px] bg-[fff]">
    Ombre verte
</div>
<div class="shadow-[0_4px_12px_rgba(239,68,68,0.3)] p-[20px] bg-[fff]">
    Ombre rouge
</div>

Ombres avec spread

Aperçu
Ombre diffuse
Ombre interne 
<div class="shadow-[0_4px_20px_8px_rgba(0,0,0,0.1)] p-[20px] bg-[fff]">
    Ombre diffuse
</div>
<div class="shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)] p-[20px] bg-[f5f5f5]">
    Ombre interne
</div>

Ombres multiples

Aperçu
Ombres multiples 
<div class="shadow-[0_2px_4px_rgba(0,0,0,0.1),0_8px_16px_rgba(0,0,0,0.1)] p-[20px] bg-[fff]">
    Ombres multiples
</div>

Ombres au hover

Aperçu
Survolez-moi
Ombre au survol 
<div class="shadow-[0_2px_4px_rgba(0,0,0,0.1)] shadow-[0_8px_16px_rgba(0,0,0,0.2)]:hover transition-[all_0.3s] p-[20px] bg-[fff] cursor-[pointer]">
    Survolez-moi
</div>

<div class="shadow-[none] shadow-[0_4px_12px_rgba(0,0,0,0.15)]:hover transition-[box-shadow_0.3s] p-[20px] bg-[fff] cursor-[pointer]">
    Ombre au survol
</div>

Opacity (Opacité)

Aperçu
Opacité 100%
Opacité 75%
Opacité 50%
Opacité 25% 
<div class="opacity-[1] bg-[0B63F3] p-[20px] mb-[10px] c-[fff]">
    Opacité 100%
</div>

<div class="opacity-[0.75] bg-[0B63F3] p-[20px] mb-[10px] c-[fff]">
    Opacité 75%
</div>

<div class="opacity-[0.5] bg-[0B63F3] p-[20px] mb-[10px] c-[fff]">
    Opacité 50%
</div>

<div class="opacity-[0.25] bg-[0B63F3] p-[20px] c-[fff]">
    Opacité 25%
</div>

Opacité au hover

Aperçu
Fondu au survol
Apparition au survol 
<div class="opacity-[1] opacity-[0.7]:hover transition-[opacity_0.3s] bg-[0B63F3] p-[20px] c-[fff] cursor-[pointer]">
    Fondu au survol
</div>

<div class="opacity-[0.5] opacity-[1]:hover transition-[opacity_0.3s] bg-[0B63F3] p-[20px] c-[fff] cursor-[pointer]">
    Apparition au survol
</div>

Scale (Échelle)

Aperçu
Scale 0.5
Scale 1
Scale 1.5 
<!-- Réduction -->
<div class="transform-[scale(0.5)] bg-[e2e2e2] p-[20px] mb-[10px]">
    Scale 0.5
</div>

<!-- Taille normale -->
<div class="transform-[scale(1)] bg-[e2e2e2] p-[20px] mb-[10px]">
    Scale 1
</div>

<!-- Agrandissement -->
<div class="transform-[scale(1.5)] bg-[e2e2e2] p-[20px]">
    Scale 1.5
</div>

Scale au hover

Aperçu
Zoom au survol
Réduction au survol 
<!-- Zoom au survol -->
<div class="transform-[scale(1)] transform-[scale(1.1)]:hover transition-[transform_0.3s] bg-[0B63F3] p-[20px] c-[fff] cursor-[pointer]">
    Zoom au survol
</div>

<!-- Réduction au survol -->
<div class="transform-[scale(1)] transform-[scale(0.95)]:hover transition-[transform_0.3s] bg-[0B63F3] p-[20px] c-[fff] cursor-[pointer]">
    Réduction au survol
</div>

Rotate (Rotation)

Aperçu
Rotation 2°
Rotation 15°
Rotation -5° 
<!-- Rotation légère -->
<div class="transform-[rotate(2deg)] bg-[e2e2e2] p-[20px] mb-[10px]">
    Rotation 2°
</div>

<!-- Rotation moyenne -->
<div class="transform-[rotate(15deg)] bg-[e2e2e2] p-[20px] mb-[10px]">
    Rotation 15°
</div>

<!-- Rotation négative -->
<div class="transform-[rotate(-5deg)] bg-[e2e2e2] p-[20px]">
    Rotation -5°
</div>

Rotate au hover

Aperçu
Rotation au survol
Rotation 360° 
<!-- Rotation au survol -->
<div class="transform-[rotate(0deg)] transform-[rotate(5deg)]:hover transition-[transform_0.3s] bg-[0B63F3] p-[20px] c-[fff] cursor-[pointer]">
    Rotation au survol
</div>

<!-- Rotation complète -->
<div class="transform-[rotate(0deg)] transform-[rotate(360deg)]:hover transition-[transform_1s] bg-[0B63F3] p-[20px] c-[fff] cursor-[pointer]">
    Rotation 360°
</div>

Translate (Déplacement)

Aperçu
Déplacement X
Déplacement Y
Déplacement X et Y 
<!-- Déplacement horizontal -->
<div class="transform-[translateX(20px)] bg-[e2e2e2] p-[20px] mb-[10px]">
    Déplacement X
</div>

<!-- Déplacement vertical -->
<div class="transform-[translateY(20px)] bg-[e2e2e2] p-[20px] mb-[10px]">
    Déplacement Y
</div>

<!-- Déplacement combiné -->
<div class="transform-[translate(20px_20px)] bg-[e2e2e2] p-[20px]">
    Déplacement X et Y
</div>

Translate au hover

Aperçu
Glissement haut
Glissement droite 
<!-- Glissement vers le haut -->
<div class="transform-[translateY(0)] transform-[translateY(-5px)]:hover transition-[transform_0.3s] bg-[0B63F3] p-[20px] c-[fff] cursor-[pointer]">
    Glissement haut
</div>

<!-- Glissement vers la droite -->
<div class="transform-[translateX(0)] transform-[translateX(10px)]:hover transition-[transform_0.3s] bg-[0B63F3] p-[20px] c-[fff] cursor-[pointer]">
    Glissement droite
</div>

Transformations combinées

Aperçu
Scale + Rotation
Déplacement + Rotation
Transformation complexe 
<div class="transform-[scale(1)_rotate(0deg)] transform-[scale(1.1)_rotate(5deg)]:hover transition-[transform_0.3s] bg-[0B63F3] p-[20px] c-[fff] cursor-[pointer]">
    Scale + Rotation
</div>

<div class="transform-[translateX(0)_rotate(0deg)] transform-[translateX(10px)_rotate(-5deg)]:hover transition-[transform_0.3s] bg-[0B63F3] p-[20px] c-[fff] cursor-[pointer]">
    Déplacement + Rotation
</div>

<div class="transform-[translateX(0)_translateY(0)_scale(1)_rotate(0deg)] transform-[translateX(5px)_translateY(-5px)_scale(1.05)_rotate(3deg)]:hover transition-[transform_0.3s] bg-[0B63F3] p-[20px] c-[fff] cursor-[pointer]">
    Transformation complexe
</div>

Blur

Aperçu
Sans flou
Flou léger
Flou moyen 
<div class="filter-[blur(0px)] mb-[10px]">
    <img src="https://placehold.co/300x200" class="w-[100%] rounded-[8px]" alt="Sans flou">
</div>

<div class="filter-[blur(2px)] mb-[10px]">
    <img src="https://placehold.co/300x200" class="w-[100%] rounded-[8px]" alt="Flou léger">
</div>

<div class="filter-[blur(5px)]">
    <img src="https://placehold.co/300x200" class="w-[100%] rounded-[8px]" alt="Flou moyen">
</div>

Brightness

Aperçu
Sombre
Lumineux 
<!-- Luminosité réduite -->
<div class="filter-[brightness(0.4)] mb-[10px]">
    <img src="https://placehold.co/300x200" class="w-[100%] rounded-[8px]" alt="Sombre">
</div>

<!-- Luminosité augmentée -->
<div class="filter-[brightness(1.3)]">
    <img src="https://placehold.co/300x200" class="w-[100%] rounded-[8px]" alt="Lumineux">
</div>

Grayscale

Aperçu
Couleur
Noir et blanc 
<!-- Image en couleur -->
<div class="filter-[grayscale(0)] mb-[10px]">
    <img src="https://picsum.photos/id/13/300/200" class="w-[100%] rounded-[8px]" alt="Couleur">
</div>

<!-- Image en noir et blanc -->
<div class="filter-[grayscale(1)] filter-[grayscale(0)]:hover transition-[filter_0.3s] cursor-[pointer]">
    <img src="https://picsum.photos/id/13/300/200" class="w-[100%] rounded-[8px]" alt="Noir et blanc">
</div>

Filtres combinés

Aperçu
Flou lumineux
Effet vintage 
<!-- Blur + Brightness -->
<div class="filter-[blur(2px)_brightness(1.2)]">
    <img src="https://picsum.photos/id/13/300/200" class="w-[100%] rounded-[8px]" alt="Flou lumineux">
</div>

<!-- Grayscale + Contrast -->
<div class="filter-[grayscale(0.8)_contrast(1.2)] filter-[grayscale(0)_contrast(1)]:hover transition-[filter_0.5s] cursor-[pointer]">
    <img src="https://picsum.photos/id/13/300/200" class="w-[100%] rounded-[8px]" alt="Effet vintage">
</div>

Backdrop Filter

Aperçu
Background

Effet Glass

Texte sur fond flouté

<!-- Effet glass -->
<div class="pos-[relative] h-[300px] overflow-[hidden]">
    <img src="https://placehold.co/600x400" class="w-[100%] h-[100%] object-[cover]" alt="Background">

    <div class="pos-[absolute] top-[50%] left-[50%] transform-[translate(-50%_-50%)] backdrop-filter-[blur(10px)] bg-rgba-[255,255,255,0.3] p-[24px] rounded-[12px] border-[1px_solid_rgba(255,255,255,0.5)]">
        <h3 class="m-[0] mb-[8px]">Effet Glass</h3>
        <p class="m-[0]">Texte sur fond flouté</p>
    </div>
</div>

Animations de transition

Aperçu
Transition rapide (0.2s)
Transition normale (0.3s)
Transition lente (0.6s) 
<div class="bg-[0B63F3] bg-[2563eb]:hover p-[20px] c-[fff] cursor-[pointer] transition-[background-color_0.2s] mb-[10px]">
    Transition rapide (0.2s)
</div>

<div class="bg-[0B63F3] bg-[2563eb]:hover p-[20px] c-[fff] cursor-[pointer] transition-[background-color_0.3s] mb-[10px]">
    Transition normale (0.3s)
</div>

<div class="bg-[0B63F3] bg-[2563eb]:hover p-[20px] c-[fff] cursor-[pointer] transition-[background-color_0.6s]">
    Transition lente (0.6s)
</div>

Transition de plusieurs propriétés

Aperçu
Transition multiple
Transitions ciblées 
<div class="bg-[0B63F3] p-[20px] c-[fff] cursor-[pointer] transition-[all_0.3s] transform-[scale(1)] bg-[2563eb]:hover transform-[scale(1.05)]:hover shadow-[0_8px_16px_rgba(0,0,0,0.2)]:hover">
    Transition multiple
</div>

<div class="bg-[0B63F3] p-[20px] c-[fff] cursor-[pointer] transition-[background-color_0.3s__transform_0.3s__box-shadow_0.3s] transform-[scale(1)] bg-[2563eb]:hover transform-[scale(1.05)]:hover shadow-[0_8px_16px_rgba(0,0,0,0.2)]:hover">
    Transitions ciblées
</div>

Card avec effets

Aperçu

Card interactive

Effet d'élévation au survol avec ombre et déplacement.

<div class="bg-[fff] rounded-[12px] p-[24px] shadow-[0_2px_8px_rgba(0,0,0,0.1)] shadow-[0_12px_24px_rgba(0,0,0,0.15)]:hover transform-[translateY(0)] transform-[translateY(-8px)]:hover transition-[all_0.3s] cursor-[pointer]">
    <h3 class="m-[0] mb-[12px]">Card interactive</h3>
    <p class="m-[0] c-[666]">Effet d'élévation au survol avec ombre et déplacement.</p>
</div>

Bouton avec effets complexes

Aperçu 
<button class="bg-[0B63F3] c-[fff] py-[12px] px-[24px] rounded-[6px] border-[none] cursor-[pointer] shadow-[0_4px_12px_rgba(59,130,246,0.3)] transform-[scale(1)] opacity-[1] transition-[all_0.3s] bg-[2563eb]:hover transform-[scale(1.05)]:hover shadow-[0_6px_20px_rgba(59,130,246,0.4)]:hover opacity-[0.9]:active transform-[scale(0.98)]:active">
    Bouton animé
</button>

Image avec overlay au hover

Aperçu
Image
Voir plus 
<div class="pos-[relative] overflow-[hidden] rounded-[12px] cursor-[pointer]">
    <img src="https://placehold.co/400x300" class="w-[100%] transform-[scale(1)] transition-[transform_0.5s] transform-[scale(1.1)]:hover" alt="Image">

    <div class="pos-[absolute] top-[0] left-[0] w-[100%] h-[100%] bg-rgba-[0,0,0,0]] bg-rgba-[0,0,0,0.5]]:hover d-[flex] items-[center] justify-[center] transition-[background-color_0.3s]">
        <span class="c-[fff] font-size-[18px] font-weight-[600] opacity-[0] opacity-[1]:hover transition-[opacity_0.3s]">
            Voir plus
        </span>
    </div>
</div>

Effets responsive

Aperçu
Effets responsive
Ombre responsive 
<div class="transform-[rotate(0deg)] md--transform-[rotate(5deg)] lg--transform-[scale(1.1)] bg-[0B63F3] p-[20px] c-[fff]">
    Effets responsive
</div>

<div class="shadow-[0_2px_4px_rgba(0,0,0,0.1)] md--shadow-[0_4px_8px_rgba(0,0,0,0.15)] lg--shadow-[0_8px_16px_rgba(0,0,0,0.2)] p-[20px] bg-[fff]">
    Ombre responsive
</div>
← Précédent Dimensions
Suivant → Icônes

Réglages des cookies

Choisissez les données que vous souhaitez partager.

🙏 Les analytics nous aident à prioriser les bonnes fonctionnalités — données en Suisse, jamais revendues.

Essentiels Requis

Nécessaires au fonctionnement (session, sécurité).