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

Lorem ipsum.
Dolor sit amet, consectetur
adipiscing elit, sed do .

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 COULEUR

Lorem ipsum.
Dolor sit amet, consectetur
adipiscing elit, sed do .

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"

Lorem ipsum.
Dolor sit amet, consectetur
adipiscing elit, sed do .

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%
                                       );
                                    }

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 COULEUR

"Effet 3D"

Soutenez mon travail.