Annonce

Faites la différence entre le service WordPress.com et l'application libre WordPress.

Mettez-vous à jour ! WordPress 3.3.2 est disponible en français.

Annonce 1 : Le Codex en français a besoin de vous pour avancer !
Annonce 2 : Avant de poster, n'oubliez pas de faire une petite recherche et de lire les règles de ce forum.
Annonce 3 : Lisez notre blog, il regorge de bonnes informations.
Annonce 4 : Rejoignez-nous sur Facebook, Google + et sur Twitter

#1 07-02-2012 17:04:09

Hedo
Bavard WP
Date d'inscription: 06-02-2012
Messages: 129
Site web

Opacity en h1 et h2

Salut à tous,

Ma configuration WP actuelle
- Version de WordPress : 3.1.4
- Version de PHP/MySQL : 5.1.3RC
- Thème utilisé : Dot-B
- Extensions en place : Askinet et TinyMCE
- Nom de l'hebergeur : free.fr
- Adresse du site : http://hedonisteep.free.fr

Problème(s) rencontré(s) :
J'aimerais pouvoir faire en sorte que mes titres h1 et h2 dans mes pages et articles aient le même effet d'opacité progressive que le titre principale de mon site.

Pour mieux comprendre, je vous conseil d'aller sur mon site et de passer votre curseur sur le titre du site, puis sur le titre de la page principale par exemple.
Pour ceux qui connaissent, inspecté l'élément : j'observe que pour le titre principal l'opacité varie de 0 à 1, et j'aimerais la même chose pour les titres h1 et h2 de mes pages.

J'espère avec été assez précis, merci d'avance à tous!

Hedo


><((((°>  Tour Du Monde à pied  <º))))><

Hors ligne

 

#2 08-02-2012 12:30:13

wasicu
Blogodépendant
Lieu: Bretagne
Date d'inscription: 09-07-2008
Messages: 2786
Site web

Re: Opacity en h1 et h2

<a rel="home" title="" style="opacity: 1;">TDM en Routard</a>

C'est le code pour ton titre.

http://www.zonecss.fr/style_css/feuille … acity.html

C'est la propriété opacity en css (avec le code qui permet d'obtenir le même effet sur IE)

À inclure donc dans le style.css pour les balises h1 et h2 de tes pages


Wasicu c'est du lakota et signifie "Le blanc" - Merci à oOYOo pour la conception de cet avatar. - Ici je suis webmestre : Morisse et compagnie théâtre de marionnettes

Hors ligne

 

#3 08-02-2012 15:15:59

Hedo
Bavard WP
Date d'inscription: 06-02-2012
Messages: 129
Site web

Re: Opacity en h1 et h2

Merci bien,
Le soucis c'est que le titre "TDM en Routard" est bien comme je le souhaiterais au niveau du dégradé progressif de l'opacité, mais j'aimerais pouvoir faire la même chose maintenant avec mes titres h1 et h2 sur toutes mes pages du site...

J'ai bien inclus le code que tu m'as donné dans mon css, mais ça ne change rien : lorsque je passe la souris sur un titre h1 ou h2, eh bien l'opacité s'effectue d'un seul coup sans progression de dégradée.

Voici mon css :

Code: html

h1, h2{color:#2089cc; line-height:1.1em; margin:0.3em 0; padding:0}
h3, h4, h5, h6{color:#333; line-height:1.1em; margin:0.3em 0; padding:0}
h1:hover{-khtml-opacity: 0.6; filter: alpha(opacity=60); -moz-opacity:0.6; opacity:0.6); text-decoration: none; color:#06c}
h2:hover{-khtml-opacity: 0.6; filter: alpha(opacity=60); -moz-opacity:0.6; opacity:0.6); text-decoration: none; color:#06c}
h1, h2, h3, h4, h5, h6{font-weight:normal}
h1{font-size:200%}
h2{font-size:183%}
h3{font-size:166%}
h4{font-size:150%}
h5{font-size:133%}
h6{font-size:116%}

Ya un truc qui cloche?


><((((°>  Tour Du Monde à pied  <º))))><

Hors ligne

 

#4 09-02-2012 09:52:14

wasicu
Blogodépendant
Lieu: Bretagne
Date d'inscription: 09-07-2008
Messages: 2786
Site web

Re: Opacity en h1 et h2

Bonne question. Je pense que normalement tu devrais mettre une opacity à 1 dans les h1 et h2 mais dans tous les tutos vus sur le web, le :hover est brutal.

Utilise alors la transition css3 : http://debray.jerome.free.fr/index.php? … transition

là tu as les préfixes propriétaires et là : http://www.greywyvern.com/?post=337

Comment traiter ton opacity.

Note que l'opacity est donnée au départ et à l'arrivée.


Wasicu c'est du lakota et signifie "Le blanc" - Merci à oOYOo pour la conception de cet avatar. - Ici je suis webmestre : Morisse et compagnie théâtre de marionnettes

Hors ligne

 

Pied de page des forums

Propulsé par PunBB 1.2.23
© Copyright 2005-2006 WordPress France

[ Generated in 0.025 seconds, 11 queries executed ]