Ajouter un effet sur une image

[Plümpheit]

Détails techniques

Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://testseregraph.forumactif.com/

Description du problème

Bonsoir

Voilà, j'ai mis le lien de mon forum test. Je voudrais crée un effet sur une image de la page d’accueil. Sur l'onglet 2. Sur les images des prédéfinis. Je souhaitais que quand je passe mon curseur dessus il y'ait une sorte de rétrécissement de l'image (comme s'il s'agissait d'un border-radius.

Code:

.predef{
  text-align:center;
}

.predef:hover{
border-radius: 10px;
  z-index:2;
  position:relative;
}

exemple :
Je voudrais que cela devienne -> Cela  
---------------------->


Voila merci encore pour le coup de pouce

[Neptunia]

Bonjour ^^


Avez-vous essayé d'appliquer le border-radius à l'image (et non à son conteneur) ?

.predef img:hover ou .predef a img:hover

[Plümpheit]

super merci   

et comment je peux faire pour ajouté une transition douce? Que ça ne change pas en une seule seconde mais que ça le réduise doucement?

[Invité]

Hello Plümpheit et Hélène ,

Tu peux tester ceci:

Code:

.predef
{
text-align:center;
 z-index:2;
position:relative;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
   
.predef:hover
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

}

a++

[Plümpheit]

Bonsoir,

je suis désolée, ça ne marche pas du tout. J'ai copié ça :

Code:

predef
{
text-align:center;
 z-index:2;
position:relative;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
 
.predef a img:hover
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
 
}

si j'avais pas mis '.predef a img:hover' il n'y avais même plus de mouvement ... :/

Et puis je ne comprends pas non plus ce que vous avez mis dans le code en css >0< Je ne connais pas toutes ces propriétés.

[Neptunia]

C'est normal que cela ne fonctionne pas.

Dès la première ligne vous ne recopiez pas correctement le code de Milouze. Il manque le point au début de la ligne.
Ceci dit effectivement le border-radius ne fonctionnait pas sur le conteneur mais sur l'image uniquement.

Pour le code css vous aviez demandé une transition, c'est ce que Philippe (Milouze) vous a donné

Propriété transition (Mozilla Developer Network)

Quant aux lignes commençant par -webkit- -moz- ou autre ce sont des prefixes pour des fonctions expérimentales qui ne sont pas obligatoires et ne sont donc pas reconnues de la même façon par tous les navigateurs.
Il faut toujours placer la ligne non prefixée en dernier (après toutes les lignes prefixées)

Désormais ces prefixes sont quasi inutiles sur PC, les navigateurs intégrant la fonctionnalité par défaut (et sans prefixe) depuis de nombreuses années.
En revanche ils ont encore tous leurs sens sur les technologies immatures (tablettes et téléphones)

Si on prend la propriété transition, sur PC les prefixes ne sont plus nécessaires sur Chrome depuis décembre 2011, ni sur Firefox depuis juin 2012. Internet Explorer pour sa part n'a jamais reconnu de préfixe mais ne reconnaît la propriété que depuis sa version 10, ce qui exclut de fait les utilisateurs de XP ou de Vista.

En revanche sur technologies non matures, seuls Opera et Firefox reconnaissent la fonction (ainsi que Edge). Pour les appareils utilisant le navigateur de base que cela soit sous Androïd ou iOS, les préfixes sont toujours nécessaires 5 ans après qu'ils ne le soient plus sur ordinateur.

Les préfixes navigateurs en CSS (alsacréations)

[Invité]

Hello Hélène,

ah tiens donc, je n'avais pas suivi la M.A.J des navigateurs concernant les préfixes.
Merci beaucoup pour ton explication chère amie .

La c.s.s sera donc la suivante (sans rien oublier ):

Code:

.predef
{
text-align:center;
 z-index:2;
position:relative;
border-radius: 0px;
transition: all 0.5s ease-in-out;
}
   
.predef:hover
{
border-radius: 10px;
}


a++

[Neptunia]

ah tiens donc, je n'avais pas suivi la M.A.J des navigateurs concernant les préfixes.
Merci beaucoup pour ton explication chère amie .

Attention Philippe ce n'est pas au niveau des préfixes qu'il y a un changement côté navigateur mais au niveau de chaque propriété css qui n'est pas encore un standard, donc susceptible d'être non reconnue par certains navigateurs, reconnue de façon variable par d'autres.

La prise en charge d'une nouvelle propriété CSS va se dérouler en plusieurs étapes.

1. Un navigateur va gérer une propriété avant tout le monde (exemple image-orientation supportée seulement par Firefox) -> la propriété ne fonctionnera que sur ce navigateur.
   
2. D'autres navigateurs vont éventuellement suivre et reconnaître la propriété à condition qu'elle soit préfixée.
   
3. Au fil du temps ces suiveurs vont accepter la version non préfixée tout en acceptant aussi la version préfixée par souci de rétro-compatibilité
   
4. Ces navigateurs vont finir par abandonner le support de la version non préfixée
   
5. Si la propriété devient un standard, tous les navigateurs devront la gérer sans préfixe et sans délai (pour les trainards)
   

Prenons l'exemple de la propriété border-radius

Firefox l'a reconnue dès sa première version, à condition d'avoir le préfixe -moz-
De la version 4 à la version 12, la propriété est gérée sans préfixe mais tolérée avec.
A partir de la version 13, la version préfixée n'est plus prise en charge.

Autrement dit, depuis le 1^er février 2012, tout internaute ayant un Firefox à jour ne reconnait plus la propriété -moz-border-radius (et ses dérivées top-left, top-right, bottom-right et bottom-left). D'où la nécessité de toujours proposer aussi la version non préfixée (même quand celle-ci n'est disponible que sur des navigateurs "anecdotiques" au moment où l'on code le truc).

Personnellement, je mets un point d'honneur à ce que je propose soit compatible au maximum, mais il y a tout de même des limites. Si ce n'était pas la question des navigateurs mobiles qui sont à la traîne, ça fait belle lurette que j'aurai abandonné les préfixes sur certaines propriétés. Excepté pour Internet Explorer où ce n'est pas l'utilisateur qui choisit sa version mais avant tout son système d'exploitation. Je n'ai aucun scrupule à demander à un internaute sous Firefox 30 (juin 2014) à se mettre à la page parce que rien ne l'en empêche, alors que dans le cas d'un utilisateur sous XP avec Internet Explorer 8, je me vois assez mal lui dire de mettre à jour son navigateur puisque c'est impossible. Mais je lui conseillerais tout de même de tester d'autres navigateurs pour qu'il puisse goûter aux joies du web d'aujourd'hui sans devoir changer son Windows, voire son ordinateur complet.

[Plümpheit]

Je tiens à vous remercier tous les deux pour ses explications. C'est important pour moi d'essayer de comprendre pour être ensuite capable de le faire par moi même. C'est très sympas à vous deux (bisous virtuel !)

Sinon je vous confirme que j'avais bien mis le point. J'avais oublié de le recopier quand j'ai voulu vous montrer le CSS (qui à dit blonde? ^^)

Cependant le code qui m'a été donné ne semble pas vouloir fonctionner. Si je surf avec chrome mes membres ont d'autres navigateurs. C'est vrai qu'il serait bien que cela soit compatible sur tous.

Je vais me pencher sur les liens que Neptunia m'a passé, pour voir si j'y arrive, ce soir quand je rentre du travail...

Cependant j'ai une question: les préfixes sont-ils indispensables?

[Neptunia]

Cependant j'ai une question: les préfixes sont-ils indispensables?

Et bien comme j'avais tenté de l'expliquer dans mon dernier message, ça dépend de la propriété CSS et de son état d'avancement dans la prise en charge des navigateurs.

Reprenons l'exemple de border-radius (mon lien du message précédent mène directement au tableau de compatibilité.
Je vais m'occuper uniquement du support simple et non des options qui sont gérées de manière très variable, voire pas gérées du tout.

Sur ordinateur :

Firefox n'a plus besoin du préfixe -moz- depuis sa version 4 (22 mars 2011)
Chrome se passe de préfixe -webkit- depuis sa version 4 (25 janvier 2010)
Internet Explorer n'a jamais utilisé de préfixe pour cette propriété qui exige toutefois une version 9 et donc au minimum Windows Vista (qui aurait tôt fait de faire regretter 2000 et XP tellement cette version de Windows est pourrie)
Safari depuis sa version 5 (7 juin 2010) -> sur PC navigateur plus mis à jour depuis 2012 / Sur Mac la version 11 est sortie hier.

-> Techniquement plus aucun grand navigateur de bureau ne nécessite de préfixe depuis 2010/2011, on peut donc considérer que c'est inutile d'y songer


Sur technologies non matures :

Firefox n'a jamais eu besoin de préfixe en version mobile et ...

... c'est bien le seul ! Si on excepte Edge qui représente une part infime sur les appareils mobiles. D'ailleurs Firefox de son côté devient lui même marginal (moins de 10% de parts de marché tous supports confondus).

Préfixes obligatoires pour les navigateurs de base Androïd (Navigateur) Safari (iOS)
Quant à Opera, pas de support du tout ni en version mini, ni en version mobile alors que la version bureau reconnaît la propriété et de suite sans préfixe depuis mars 2010.
Les mêmes opérateurs mais 7 ans de retard et davantage sur leurs versions de bureau (voilà pourquoi je parle de technologies non matures, même si ce n'est pas ma seule raison)

Donc pour cette propriété (et uniquement pour celle-ci), les préfixes sont archaïques sur ordinateur mais indispensables sur dispositifs mobiles qui accusent un retard colossal.
Il y a 10 ans en arrière, le traînard c'était Internet Explorer, maintenant les retardataires sont des appareils qui ont le culot de s'autoproclamer à la pointe de la technologie.

---

P.S. Les dates de sortie des versions de navigateurs sont tirées de Wikipédia.

[Plümpheit]

Je suis scotchée par tant de connaissance !

Question encore: la transition se met sur la balise de css .predef ou bien sûr .predef a img:hover ?
Parce que la 1ère est la balise de base. Ce n'est pas elle qui subit une modification non ?

*je suis quand même une grosse bille en code*

[Neptunia]

Bah j'ai vraiment pas l'habitude d'utiliser les transitions (essentiellement parce que je tiens à un rendu similaire pour tout le monde et qu'Internet Explorer a trop tardé pour combler son retard)

Maintenant que les derniers internautes sous XP semblent se faire très rares, je vais peut-être revoir mes habitudes.

En tout cas chaque fois que j'ai vu cette propriété utilisée je l'ai toujours vue sur l'élément de base et non sa version :hover. Mais la transition fonctionne dans les deux sens

Je suis scotchée par tant de connaissance !

Je ne connais pas de tête la prise en charge de chaque propriété CSS sur chaque navigateur. Ce sont des connaissances que je viens tout juste d'acquérir parce que je sais où aller les chercher (Mozilla developer Network)

Dans le même genre je peux vous proposer Can I use ?

---

Edité :

Question encore: la transition se met sur la balise de css .predef ou bien sûr .predef a img:hover ?

Et bien il me semble que le border-radius ne fonctionnait que sur l'image et non son conteneur

Du coup si le border-radius s'applique à .predef a img:hover j'appliquerais la transition à .predef a img

[Plümpheit]

Merci beaucoup Neptunia !
Grâce à toi ça fonctionne parfaitement. Il fallait en effet appliquer la transition à .predef a img:hover

Merci beaucoup pour tout. Grâce à vous je vais pouvoir faire tout plein de transition ^^

Bisous virtuels à tous les deux