Vous n'êtes pas connecté. Connectez-vous ou enregistrez-vous

[ ↓ ]

Voir le sujet précédent Voir le sujet suivant Message [Page 1 sur 1]

Milouze14


Fondateur

Milouze14

Message posté: le Mar 20 Déc 2011 - 8:37
coucou ,

vous pouvez sans javascript créer un bouton qui affichera un contenu au passage
du curseur de la souris hinhin .
Un peu comme ceci:

Goggle Chrome


Une nouvelle version de Google Chrome est disponible en mise à jour,
La procédure:
Cliquez sur la clé en haut à droite puis à propos de Google Chrome,
La nouvelle version se téléchargera et le navigateur vous demandera de redémarrer le navigateur.
Le lien direct pour une première installation:
https://www.google.com/chrome?hl=fr


La procédure est simple les ami(e)s hinhin .

Tout d'abord il vous faudra bien comprendre que l'affichage peut être différent
sur un topic ou dans une page web.
Il faudra alors jouer sur deux valeurs clin oeil .
Les valeurs qui devront être paramétrées sont notifiées dans la feuille de style clin oeil .

Tu veux la même apparence?
Dans ta feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Colle ceci:

Code:

.bloc  /* correspond au bloc complet*/
{
display: block;
overflow: hidden;
width: 600px; /* largeur du bloc*/
height: 44px; /* hauteur du bouton*/
transition: 1s all;
-webkit-transition: 1s all;
-moz-transition: 1s all;
-o-transition: 1s all;
-ktm-transition: 1s all;
margin: 0px 4px;
cursor: pointer;
}
.bloc_ferme /* correspond au bouton*/

{
background-color:#121212;
display: inline-block;
height:25px;
width:100px;
padding: 2px;
font: smallcaps  13px arial;
text-align: center;
color: #20aec8;
  -webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom: none;
border:1px solid #20aec8;
}
.bloc:hover /* correspond à l'ouverture du bloc*/
{
height: 210px;
transition: height 1s linear;
-webkit-transition: height 1s linear;
-moz-transition: height 1s linear;
-o-transition: height 1s linear;
-ktm-transition: height 1s linear;
}
.bloc_ouvert /* correspond à l'affichage du contenu */
{
  background: url(http://r29.imgfast.net/users/3413/73/38/67/smiles/831888.gif)no-repeat center center;
background-color:#141414;
display: inline-block;
width: auto;
font: 12px arial;
text-align: justify;
padding: 4px;
padding-left:5px;
padding-right:5px;
margin-top: 0;
color: #20aec8;
-webkit-border-radius: 8px;
-webkit-border-top-left-radius: 0;
-moz-border-radius: 8px;
-moz-border-radius-topleft: 0;
border-radius: 8px;
border-top-left-radius: 0;
border:1px solid #20aec8;
border-top:none;
}
.bloc_ouvert a /* correspond à la couleur de lien dans le contenu*/

{color: #ffffff;}
/* fin bloc message*/

Le code H.T.M.L :
Code:

<div class="bloc">
<p class="bloc_ferme">Le titre du bouton</p>
<div class="bloc_ouvert">
Le texte /Image/Lien bref tout de que vous voulez
</div></div>
coucou



Dernière édition par Milouze14 le Sam 29 Sep 2012 - 8:29, édité 1 fois





Fondateur des forums Milouze14

- Contact par MP -



Milouze14


Fondateur

Milouze14

Message posté: le Lun 3 Sep 2012 - 6:22
coucou ,
petite erreur dans la css, corrigée ce jour clin oeil .





Fondateur des forums Milouze14

- Contact par MP -



Voir le sujet précédent Voir le sujet suivant Message [Page 1 sur 1]

[ ↑ ]

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum

  
  • © PunBB | Signaler un abus