AccueilAccueil  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

Partagez | .
 

 PA DE JU POUR JUIN

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
ADMIN ∞ i'm your god baby.
avatar
ADMIN ∞ i'm your god baby.

en savoir plus sur moi
▵ messages : 1228
▵ arrivé(e) le : 05/03/2008
▵ avatar : lucy kate hale.

MessageSujet: PA DE JU POUR JUIN Lun 25 Mai - 20:55

CODE CSS

Code:
/*NEW PA JU*/
  a:link,a:active,a:visited {
        color : #47403E;
        text-decoration: none !important;
        }
    a:hover{
        text-decoration: none !important;
        color : #b39A75;
        }

/* gestion des dimensions et débordement du conteneur */
#slideshow .container {
   position:relative;
   width: 200px;
   height: 150px;
   overflow: hidden;
}
   
/* on prévoit un petit espace gris pour la timeline */
#slideshow .container:after {
   position:absolute;
   bottom: 0; left:0;
   content: " ";
   width: 100%;
   height: 1px;
   background: #000;
}
/*
  le conteneur des slides
  en largeur il fait 100% x le nombre de slides
*/
#slideshow .slider {
   position: absolute;
   left:0; top:0;
   width: 500%;
   height: 150px;
}

/* annulation des marges sur figure */
#slideshow figure {
   position:relative;
   display:inline-block;
   padding:0; margin:0;
}
/* petit effet de vignette sur les images */
#slideshow figure:after {
   position: absolute;
   display:block;
   content: " ";
   top:0; left:0;
   width: 100%; height: 100%;
   box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;

           
}

/* styles de nos légendes */
#slideshow figcaption {
   position:absolute;
   left:0; right:0; bottom: 5px;
   padding: 20px;
   margin:0;
   border-top: 1px solid rgb(225,225,225);
   text-align:center;
   letter-spacing: 0.05em;
   word-spacing: 0.05em;
   font-family: Georgia, Times, serif;
   background: #fff;
   background: rgba(255,255,255,0.7);
   color: #555;
   text-shadow: -1px -1px 0 rgba(255,255,255,0.3);
}

/* fonction d'animation, n'oubliez pas de prefixer ! */
@keyframes slider {
   0%, 20%, 100%   { left: 0 }
   25%, 45%      { left: -100% }
   50%, 70%      { left: -200% }
   75%, 95%      { left: -300% }
}

/* complétez le sélecteur : */
#slideshow .slider {
   /* ... avec la propriété animation */
   animation: slider 20s infinite;
}

#timeline {
   position: absolute;
   background: indianred;
   bottom: 15px;
   left: 15px;
   height: 1px;
   background: rgb(214,98,13);
   background: rgba(214,98,13,.8);
   width: 0;
   /* fonction d'animation */
   animation: timeliner 32s infinite;
}

.play_commands {
   /* positionnement en haut à droite */
   position: absolute;
   top: 25px; right: 25px;
   z-index: 10;
   /* dimensionnement des icônes */
   width: 22px;
   height: 22px;
   text-indent: -9999px;
   border:0 none;
   /* placez l'opacité à 1 si vous souhaitez voir les commandes */
   opacity: 0;
   /* préparation de transition sur opacicty et right */
   transition: opacity 1s, right 1s;
}
/* on décale play légèrement sur la gauche */
.play { right: 55px; cursor: default; }
 
/* création de l'icône pause avec 2 pseudos éléments */
.pause:after,
.pause:before {
   position: absolute;
   display: block;
   content: " ";
   top:0;
   width:38%;
   height: 22px;
   background: #fff;
   background: rgba(255,255,255,0.5);
}
.pause:after { right:0; }
.pause:before {   left:0; }
 
/* création de l'icône play avec des bordures */
.play {
   width: 1px;
   height: 1px;
   /* les transparentes forment la flèche */
   border-top: 10px solid transparent;
   border-bottom: 10px solid transparent;
   border-left: 20px solid #fff;
   border-left: 20px solid rgba(255,255,255,0.5);
   /* renseignez 1 pour voir l'icône de suite */
   opacity: 0;
}
 
/* apparition du bouton pause au survole */
/* apparition des boutons au focus */
#slideshow:hover .pause,
.play_commands:focus {
   opacity: 1;
   outline: none;
}

CODE PA :

Code:
<center>
                             <strong> </strong>                         
   <div style="text-align: center; color: rgb(160, 131, 93); text-transform: lowercase; font-family:;" -40px;"="" 55px;="" cursive;="" delafield",="" saint="" mrs="">
                                ALWAYS LOVE                         
   </div><strong></strong>
</center><br />+ <a href="http://www.always-love.com/f19-stereo-love">stéréo</a> + <a href="http://www.always-love.com/t19-reglement-notre-forum-et-ses-lois">rules</a> + <a href="http://www.always-love.com/t27-bottin-des-avatars-les-jolies-petites-tetes#92">bottin</a> + <a href="http://www.always-love.com/t20-groupes-tout-le-monde-n-est-pas-pareil">groupes</a> + <a href="http://www.always-love.com/f144-the-one-you-want">scénarios</a> + <a href="http://www.always-love.com/f11-show-room">invités</a> + <a href="http://ask.fm/MmeAlma">ask to alma</a>  <section id="slideshow"></section>
<div class="container">
                              
   <div class="c_slider">
           
   </div>
                                      
   <div class="slider">
                    <figure> <img style="width: 200px; height: 150px;" alt="" src="http://img11.hostingpics.net/pics/406460blue.png" /> <figcaption>The mirror of soul</figcaption> </figure>             
      <!--             
                       --><figure> <img style="width: 200px; height: 150px;" alt="" src="http://img11.hostingpics.net/pics/782614clem.png" /> <figcaption>Let's cross that bridge </figcaption> </figure>             
      <!--             
                       --><figure> <img style="width: 200px; height: 150px;" alt="" src="http://img11.hostingpics.net/pics/293688juliet.png" /> <figcaption>Sushi<em>(do)</em> time</figcaption> </figure>             
      <!--             
                       --><figure> <img style="width: 200px; height: 150px;" alt="" src="http://img11.hostingpics.net/pics/601084luna.png" /> <figcaption>Waking Life</figcaption> </figure>             
      <!--             
                       --><figure> <img style="width: 200px; height: 150px;" alt="" src="http://img11.hostingpics.net/pics/601084luna.png" /> <figcaption>Waking Life</figcaption> </figure>         
   </div>
                
</div><section id="slideshow"><span id="timeline"></span></section>
Revenir en haut Aller en bas
Voir le profil de l'utilisateur

PA DE JU POUR JUIN

Voir le sujet précédent Voir le sujet suivant Revenir en haut
Page 1 sur 1

Sujets similaires

-
» Le 09 juin... En route pour les plaquettes...
» Lundi 20 juin
» Argentine: ouverture d'un nouveau procès pour crimes de guerre lors de la dicta
» SOS POUR NOUNOURS Border Collié (57) Sarrebourg
» BADMOONZ 3000 pts pour tournoi Haguenau 2010

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Always love test :: corbeille.-