Styles en CSS

[makeu]

Concernant la popup qui s'affiche quand tu vas sur un lien, est-ce que tu peux faire un fond transparent ?

Je trouve perturbant le fait de ne plus voir les autres liens.

[shark]

j'ai cherché! ça me dérange aussi, pour l'instant pas de piste.

j'intègre un span dans la balise < a > , ca appelle la feuille css qui contient:

Code : Tout sélectionner

a:hover span { /* définition de la balise <span> au survol */
display: inline;
position: absolute;
width: 230px;
height: 100px;
background: #d2dbf4;
text-align: center;
color: black;
border: solid 2px #066d98;
}

[shark]

ok j'ai trouvé grâce à opacity

de plus j'etudie un tuto sur les transformations css3, ca pète! j'arrive à animer les infobulles

[makeu]

et avec ca :

background-color: rgba(0, 0, 255, 0.5); /* un arrière plan bleu à 50% de transparence */

C'est du Css3 par contre.

J'avais fait un truc comme ca pour une maquette de site, avec un effet de transparence sur un logo.


edit : arf, devancé de peu

[shark]

c'est ça, du css3

voilà mon tuto:
http://www.css3create.com/Infobulle-ave ... ce-en-CSS#

[shark]

du coup j'ai fait évoluer le site, voilà le code (passer la souris sur les liens player youtube ou calendrier pour voir les effets)

Code : Tout sélectionner

a{
   color: #4E6E8F;
   text-decoration: none;   
   -webkit-border-radius:3px;
      -moz-border-radius:3px;
         border-radius:3px;

}

a:active, a:visited {
   color: #4E6E8F;
   text-decoration: none;
}


a:hover,a:focus{
    color: #F44600;
   /*background:rgba(0,0,0,.4); */
   box-shadow
   -webkit-box-shadow:0 1px 0 rgba(73,71,89,.4);
      -moz-box-shadow:0 1px 0 rgba(73,71,89,.4);
         box-shadow:0 1px 0 rgba(73,71,89,.4);
   outline:none;
}

a span { /* définition de la balise <span2> inclue dans <a> */
   position:absolute;
padding:15px;
margin-top:23px;
margin-left:-35px;
background:rgba(73,71,89,.9);  /* background:rgba(67,67,70,.9); */
opacity:0;
color:#F3F2EE;   /* color:#E9B356; */
/*transform*/
-webkit-transform:scale(0) rotateZ(-32deg);
   -moz-transform:scale(0) rotate(-32deg);
    -ms-transform:scale(0) rotateZ(-32deg);
     -o-transform:scale(0) rotate(-32deg);
        transform:scale(0) rotateZ(-32deg);
/*transition*/
-webkit-transition:all .40s;
   -moz-transition:all .40s;
    -ms-transition:all .40s;
     -o-transition:all .40s;
        transition:all .40s;
/*border-radius*/
-webkit-border-radius:6px;
   -moz-border-radius:6px;
        border-radius:6px;
/*box-shadow*/
-webkit-box-shadow:0 0 2px rgba(0,0,0,.5);
   -moz-box-shadow:0 0 2px rgba(0,0,0,.5);
        box-shadow:0 0 2px rgba(0,0,0,.5);
      
}

a:hover span, a:focus span { /* définition de la balise <span> au survol */
   opacity:1;
/*transform*/
-webkit-transform:scale(1) rotateZ(0);
   -moz-transform:scale(1) rotate(0);
    -ms-transform:scale(1) rotateZ(0);
     -o-transform:scale(1) rotate(0);
        transform:scale(1) rotateZ(0);
}

a span::before{
content:'';
position:absolute;
top:-6px;
left:10px;
width:0;
height:0;
border-bottom:6px solid rgba(0,0,0,.9);
border-left:6px solid transparent;
border-right:6px solid transparent;
}

[makeu]

C'est bien plus lisible je trouve.

Par contre (oui je suis chiant je sais) :
la petite flèche qui pointe vers le haut est inutile à mon gout.
La bulle passe en dessous de la video youtube. (va sur le dimanche 11 novembre)
Tu as d'autre effets ? agrandissement, autre rotation ? Pour voir ce qui peut être fait.

[shark]

héhé, je suis en train de regarder pour la flèche car elle se place mal (oui moi aussi je suis tatillon) voir le a span::before{


pour la bulle sous l'Iframe de youtube, jpense pas pouvoir faire grand chose
pour les effets je sais pas tout ce qui existe, doit y'avoir d'autres tutos