Effets Colonnes

Effets CSS Colonnes

Utilisation du symbole magique .$

Le symbole magique .$ permet d’appliquer du code CSS sur un composant de WA-Fusion.
! On peut appliquer plusiers codes CSS au même bouton
Exemple: ombre + zoom + movement, etc

Faites un Copier-Coller des codes CSS dans vos projets

Adapter à votre besoin : taillle (px), couleurs (#320126) , scale (1;1)...

< Cliquez sur l'image pour l'agrandir

Tutoriel vidéo

play

CHANGE COULEUR

Fond de colonne Change de couleur dégradé automatiquement

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (Colonne)

.$ {
                                        background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
                                        background-size: 400% 400%;
                                        animation: gradient 15s ease infinite;
                                    }
                                    
                                    @keyframes gradient {
                                        0% {
                                            background-position: 0% 50%;
                                        }
                                        50% {
                                            background-position: 100% 50%;
                                        }
                                        100% {
                                            background-position: 0% 50%;
                                        }
                                    }

CHANGE MULTI COULEUR

Changement dégradé de couleur au survol d'une colonne

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (Colonne)

.$:hover{
                            background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
                            background-size: 400% 400%;
                            animation: gradient 15s ease infinite;
                        }
                        
                        @keyframes gradient {
                            0% {
                                background-position: 0% 50%;
                            }
                            50% {
                                background-position: 100% 50%;
                            }
                            100% {
                                background-position: 0% 50%;
                            }
                        }

"Effet 3D"

Effet 3D
Avec ombre multicouleur au survol d'une colonne

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (Colonne)

.$:hover{
                                    -webkit-transform: rotate(-5deg);}
                                    .${
                                      --c: #1095c1; /* the color */
                                      --b: .1em;    /* border length*/
                                      --d: 20px;    /* the cube depth */
                                      
                                      --_s: calc(var(--d) + var(--b));
                                      
                                      color: var(--c);
                                      border: solid #0000;
                                      border-width: var(--b) var(--b) var(--_s) var(--_s);
                                      background:
                                        conic-gradient(at left var(--d)  bottom var(--d),
                                          #0000 90deg, rgb(255 255 255 /0.3) 0 225deg,rgb(255 255 255 /0.6) 0) border-box,
                                        conic-gradient(at left var(--_s) bottom var(--_s),
                                          #0000 90deg,var(--c) 0) 0 100%/calc(100% - var(--b)) calc(100% - var(--b))  border-box;
                                      transform: translate(calc(var(--d)/-1),var(--d));
                                      clip-path: 
                                        polygon(
                                         var(--d) 0%, 
                                         var(--d) 0%, 
                                         100% 0%, 
                                         100% calc(100% - var(--d)),
                                         100% calc(100% - var(--d)),
                                         var(--d) calc(100% - var(--d))
                                        );
                                      transition: 0.5s;
                                    }
                                    .$:hover {
                                      transform: translate(0,0);
                                      clip-path: 
                                        polygon(
                                         0% var(--d), 
                                         var(--d) 0%, 
                                         100% 0%, 
                                         100% calc(100% - var(--d)), 
                                         calc(100% - var(--d)) 100%, 
                                         0% 100%
                                       );
                                    }

CHANGE COULEUR

Changement Couleur au survol d'une colonne

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (Colonne)

.$ :hover {background-color: #e6eeff;}

Soutenez mon travail.

Si vous appréciez mon travail, que vous voulez l'encourager, vous pouvez faire un don ici.
Tout don, aussi petit soit-il, peut faire la différence !

Merci pour votre soutien !

FAIRE UN DON

Réalisé avec WebAcappella Fusion - 2023 wa-fusion.fr

Effets CSS Colonnes

Tutoriel vidéo

OMBRE COLONNE

BORD POINTILLÉE

BORD TIRÉTS

BORD DOUBLE

MULTI BORD

EFFET PULSION

OMBRES MULTI

OMBRE PULSS

COULEUR

FLASH HALO

SHAKE COLONNE

ZOOM SURVOL

DEZOOM SURVOL

INCLINE GAUCHE

INCLINE DROITE

BOUGE VERTICAL

OMBRE PULSS

CHANGE COULEUR

CHANGE MULTI COULEUR

"Effet 3D"

CHANGE COULEUR

Soutenez mon travail.