communauté francophone de joueurs sims
 
AccueilAccueil  Le site  Chaine You Tube  S'enregistrerS'enregistrer  ConnexionConnexion  FAQFAQ  RechercherRechercher  

Partagez | 
 

 [Apprenti] Effet de colorisation au survol d'une image

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Admin
avatar
Fuyaya
Admin
Féminin Date d'inscription : 29/09/2009
Age : 38
Localisation : Aubais

MessageSujet: [Apprenti] Effet de colorisation au survol d'une image   Mer 30 Avr 2014, 14:12

Bonjour,

Nous allons étudier un petit bout de code qui va modifier l'apparence de vos images. Cela va transformer vos images en noir et blanc. Celle-ci retrouveront leur couleurs au survol de la souris



Il s'agit de CSS3, donc la dernière version de CSS cela signifie que sur des navigateurs dont la version est plus ancienne l'effet n'est pas compris et donc n'apparait pas.

1. Explication et compréhension :

Pour ce cas de figure je vais utiliser une dénomination qui est assez courante sur Tumblr, c'est ce que l'on appelle une charte de nommage. En gros pour s'y retrouver on a tendance à appeler les éléments avec le même nom.

A. Les images sont en gris :

Code:
.photo img {
        -webkit-filter: grayscale(100%);
    }

.photo : c'est une classe qui est associé à notre élément qui contient les images comme une division par exemple

img : c'est une appellation clef qui signifie que l'on désigne tous les éléments de type image.

Le code indique que l'on applique à l'image un gris, celui-ci agit comme un filtre.

Si vous avez une autre division contenant les images s'appelant par exemple .picture, alors l'effet ne s'appliquera pas aux images.

En effet le code CSS ne va s'appliquer qu'aux images contenues dans des divisions .photo


B. Les images en couleur :

Code:
.photo:hover img {
                -webkit-filter: grayscale(0);
    }

.photo:hover : cela signifie que l'action concerne uniquement le moment où la souris se trouve sur l'image

On indique qu'au survol de l'image on ne veut plus appliquer de filtre gris


C. Récap du code à ajouter au css :

Code:
.photo img {
        -webkit-filter: grayscale(100%);
    }
    .photo:hover img {
        -webkit-filter: grayscale(0);
    }


2. Quel est votre cas ?

Ou pour reformuler avez vous du bol ? Allez vous pouvoir utiliser le code tel quel ou il va falloir faire un petit effort de plus...

A. Plan A : vous êtes chanceux

Pour le savoir c'est très simple il vous suffit d'ajouter le code que j'ai donné plus haut dans la partie d'ajout de CSS.
Pour ceux qui ont des blogs et qui souhaitent savoir où s'ajoute le CSS je vous renvoie vers ce tutoriel : [Fiche] Revue de Blog pour savoir où modifier le HTML et le CSS

B. Plan B : allons voir le code

Oups utilisateur de Tumblr vous n'avez pas de chance et le créateur de votre template n'a pas utilisé la classe photo ou il l'a peut être utilisé mais cela entre en conflit avec notre code ajouté...

Bien nous allons prendre les choses en main et créer notre propre classe. Dans la partie css vous allez changer le .photo pour donner un autre nom. Pour l'exemple et parce que je n'ai pas peur du ridicule ce sera .superfu et on va enlever la partie img car c'est à l'image que l'on va donner la classe

Code:
.superfu{
        -webkit-filter: grayscale(100%);
    }
    .superfu:hover{
        -webkit-filter: grayscale(0);
    }

Il nous faut à présent ajouter cette classe dans la partie html pour qu'elle puisse fonctionner. Mais où ?
On va cibler deux choses les photo qui sont les posts comprenant une seule image et les photoset les posts qui ont plusieurs images.

Pour les trouver on va pas se casser la tête on va utiliser le champ de recherche qui se trouve dans l'éditeur de HTML

Pour avoir ce petit champ de recherche on va faire CTRL+F (ou CMD+F) et mettre img


Alors je ne vous cache pas que vous allez avoir plein de img, on s’intéresse nous à la partie HTML et si le code est bien commenté vous aurez une mention comme quoi il s'agit de Photo Posts


On va donc y rajouter notre super classe .superfu


Voilà on a fait notre possible pour cette étape

C. Plan C : on aura le dernier mot !

Vous avez suivi le plan B à la lettre mais cela ne fonctionne pas. J'ai expérimenté un template trouvé par Nat et c'est le cas de celui-ci   

Ne baissez pas les bras on aura le dernier mot !
Nous allons faire deux choses : modifier légérement le code poour ajouter à la fin !important
En gros cela indique que cet ordre prend le pas sur n'importe quel autre ordre

Code:
.superfu{
        -webkit-filter: grayscale(100%)!important;
    }
    .superfu:hover{
        -webkit-filter: grayscale(0)!important;
    }

La seconde chose nous allons déplacer notre code css, car visiblement là ou il est placé le thème fait la sourde oreille... On ne touche pas à ce que l'on a ajouté au HTML on en a besoin !

Nous allons donc chercher dans le code la partie ou le créateur a rajouté du css. Et on le rajoute à la fin juste avant {custom_css} qui est la partie ou se rajoute le code CSS que l'on met dans la personnalisation. Oui tout à fait là où on avait mis notre code avant mais il s'en fichait.


En théorie du moins en pratique sur le template casse bonbon trouvé par Nat cela fonctionne.
Si ce n'est pas le cas et bien je n'ai pas de plan D mais votre thème est sacrément tordu donc ouvrez une aide ou changez le Wink

MODE D'EMPLOI

N'hésitez pas à remercier l'auteur de ce tutoriel ou à faire partager votre expérience personnelle. Si vous avez créé quelque chose en suivant le tuto pourquoi pas la poster afin de la montrer à l'auteur

-----------------------------------------

Pour d'éventuelles questions, c'est par ici et si vous souhaitez en apprendre plus sur le sujet, rendez-vous dans la salle travaux pratiques

Bonne journée



Spoiler:
 


Dernière édition par Fuyaya le Mer 02 Juil 2014, 14:14, édité 6 fois
Revenir en haut Aller en bas
http://fuyaya.tumblr.com/
Illustre illustrateur
avatar
Free-Spirit
Illustre illustrateur
Féminin Date d'inscription : 23/09/2013
Age : 24
Localisation : Strasbourg

MessageSujet: Re: [Apprenti] Effet de colorisation au survol d'une image   Mer 30 Avr 2014, 14:45

Je t'aime ! Merci pour ce tuto Very Happy
Revenir en haut Aller en bas
Grand artiste du pinceau
avatar
Natsynchro
Grand artiste du pinceau
Féminin Date d'inscription : 09/11/2012
Age : 25
Localisation : Au pays imaginaire ~

MessageSujet: Re: [Apprenti] Effet de colorisation au survol d'une image   Mer 30 Avr 2014, 15:09

merci Fu
Revenir en haut Aller en bas
http://le-naufrage-mysterieux.blogspot.fr
Admin
avatar
Bloup
Admin
Féminin Date d'inscription : 27/11/2012
Age : 30
Localisation : Plein Sud !

MessageSujet: Re: [Apprenti] Effet de colorisation au survol d'une image   Mer 30 Avr 2014, 15:24

Merci ! Le résultat est chouette !!
Revenir en haut Aller en bas
http://www.sims-artists.fr/
Grand artiste du pinceau
avatar
Lehanna
Grand artiste du pinceau
Féminin Date d'inscription : 07/10/2011
Age : 21
Localisation : Nord (59)

MessageSujet: Re: [Apprenti] Effet de colorisation au survol d'une image   Lun 09 Juin 2014, 13:21

Merci Fu pour le tuto ! (j'aime l'image que tu utilises I love you)
Revenir en haut Aller en bas
http://lesharpburn.canalblog.com
Contenu sponsorisé


MessageSujet: Re: [Apprenti] Effet de colorisation au survol d'une image   

Revenir en haut Aller en bas
 
[Apprenti] Effet de colorisation au survol d'une image
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» HOSPITTLER - Apprenti Chapelain (F - N)
» Un apprenti panda...
» [Tutoriel] Colorisation
» [ABANDON] Un jeune apprenti .
» Effet Psychologue

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Sims Artists :: Apprentissage :: Informatique et Internet :: HTML / CSS-
Sauter vers: