Johanna ADMIN ∞ i'm your god baby. en savoir plus sur moi ▵ messages : 1240 ▵ arrivé(e) le : 05/03/2008 ▵ avatar : lucy kate hale.
| Sujet: 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> |
|