Blog d'aide de Blog4ever

Blog d'aide de Blog4ever

effet transition

1576 appréciations
Hors-ligne

J'ai bricolé le menu et le contenu avec un jeu de couleurs en mode "transition"

transition: background-color 2s;

C'est un jeu de réglage de couleur en dégradé :
background-image: linear-gradient( white, rgba(255,255,255,0));

une couleur de départ:
background-color: pink;
On ajoute ensuite un hover à la partie concernée.
article:hover{
background-color: blue;
}
http://test-dizperso2.blog4ever.com/

Il y a d'autres méthodes mais j'ai trouvé ça sur le net et après quelques essais j'ai eu envie de le partager avec vous.


1872 appréciations
Hors-ligne
:b2: :sim:







1872 appréciations
Hors-ligne
:sim:
tu peux nous montrer en capture où sont les jeux de couleurs pour que l'on voit où cela se produit stp ?
:b2:
Mon autre blog : LIEN

2 appréciations
Hors-ligne
Bonjour à tous
Soleilvie comme tu as photo filtre ,tu peux peut être t'accommoder de ce logiciel très simple et gratuit ,
pour faire des dégradés de couleur, il est parfait : GetRGBColor 2.0
doux Dimanche , bises Monyka


1576 appréciations
Hors-ligne
Christine
Il s'agit de créer un effet de transition couleurs au survol.
Donc tu pourrais mettre en essai: ligne 2020
Mettre ce code:

.menu_bloc:hover{
background:#0F9;
background-image:linear-gradient(#00C, rgba(255,255,255,0))!important;
transition: background-color 4s;
}


Tu verras qu'en 4 secondes les couleurs du menu vont faire un dégradé qui prend sa source en (background:#0F9; avec le dégradé #00C, )



1872 appréciations
Hors-ligne
:sim:
ah ok ! Merci je ferai un essai plus tard.

Mon autre blog : LIEN

1872 appréciations
Hors-ligne
:sim:
j'ai mis le code que tu m'as fourni mais je voudrai savoir comment faire pour trouver la bonne couleur car le fluo bleu j'aime pas trop.
Mon autre blog : LIEN

1576 appréciations
Hors-ligne
.menu_bloc:hover {
background-attachment: scroll;
background-clip: border-box;
background-color: #0f9; /* vert*/
background-image: linear-gradient(#00c, rgba(255, 255, 255, 0)) !important; /* bleu */
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
transition: background-color 4s ease 0s;
}

Donc ta couleur ira du bleu en haut jusqu'au vert en bas avec une transition de 4 secondes.
Tu peux changer le code couleur du haut par #004et dégradé bas #259
comme ça:
background-color: #259;
background-image: linear-gradient(#004, rgba(255, 255, 255, 0)) !important;



1872 appréciations
Hors-ligne
:sim:
j'ai mis ton code et changé une couleur mais elle ne me convient pas encore tout à fait mais c'est mieux que l'autre. Je ferai d'autres essais de couleurs un autre jour, car là il faut que je termine le design de ma maman avant que je sois couper de internet.
:b2: :b2: :b2: tu es vraiment un CHEF et toujours au service des autres.
Mon autre blog : LIEN

1576 appréciations
Hors-ligne


Ravi que ça te plaise.


Tu peux mettre une teinte qui se rapproche du fond de page.

.menu_bloc:hover {
background-attachment: scroll;
background-clip: border-box;
background-color: brown; /*marron*/
background-image: linear-gradient(#004, rgba(255, 255, 255, 0)) !important;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
transition: background-color 4s ease 0s;
}



1872 appréciations
Hors-ligne
ok j'essaierai :b2:
Mon autre blog : LIEN

1872 appréciations
Hors-ligne
:sim:
voilà c'est fait ! C'est génial !
:b2: :b2: :b2:
Mon autre blog : LIEN

1576 appréciations
Hors-ligne
....
Génial ! tu es sure du mot ? moi je dirai fantastique !!

Tiens si tu veux essayer j'ai un truc pour tes commentaires.
Tu verras c'est magique.

Après la ligne 158: tu colles ce code css

#article_commentaires dl dd.commentaire_message:hover, #photo_commentaires dl dd.commentaire_message:hover {
background-image: linear-gradient(#004, rgba(255, 255, 255, 0)) !important;
transition: background-color 3s ease 0s;
background-color:#005;
}

Pas obligé de le garder mais c'est ma période "transition"......je lance une mode.


1872 appréciations
Hors-ligne
:sim:
et ta mode est fantastique
je l'ai mis
Mon autre blog : LIEN

1279 appréciations
Hors-ligne
:sim:
J'ai vu le résultat de tes codes sur le blog de Soleilvie
tu as raison : c'est fantastique !!!
Je crois que j'essaierai ton truc pour mes commentaires parce que c'est trop bien
:b2: pour tous tes petits trucs qui embellissent autant nos designs
YOU ARE THE BEST
Par contre, je n'utilise pas les mêmes codes couleurs que ceux que tu affiches.
Est-il possible d'en mettre d'autres (comme ceux que j'utilise dans mon CSS ?)
Si oui, dès que j'ai un peu de temps je vais tester sur mon blog test afin de trouver les bonnes couleurs.


1576 appréciations
Hors-ligne

Par contre, je n'utilise pas les mêmes codes couleurs que ceux que tu affiches.

On peut mettre les codes couleurs que l'on veut ça n'a pas d'importance.



1279 appréciations
Hors-ligne
:b2: :sim:

Ce sujet est fermé, vous ne pouvez pas y répondre
Vous ne disposez pas des permissions nécessaires pour répondre à un sujet de la catégorie VOS BLOGS.

Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 5879 autres membres