AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


17 résultats trouvés pour css3

Nasträlya

Signature ptits triangles - Ven 10 Avr 2020 - 21:09





Signature: les ptits triangles



Bonjour :friends:

Je vous propose une petite signature que j'ai faite exprès pour qu'elle passe sans iframe  :cow: (et que j'utilise actuellement sur mon forum :bwaha: )

Tag css3 sur Never Utopia - graphisme, codage et game design Screen40

Il suffit juste de mettre ce code dans la partie signature de votre profil:

Code:
<div style="background-color:transparent; width:363px; margin:auto; height:80px;"><!-- images 1--><img src="https://zupimages.net/up/20/15/770e.jpg" style="clip-path:polygon(50% 100%, 100% 0, 0 0); width:80px; height:80px; float:left;"/><!-- image 2--><img src="https://zupimages.net/up/20/15/11qm.jpg" style="clip-path:polygon(50% 0, 0 100%, 100% 100%); width:80px; height:80px; float:left; margin-left:-35px;"/><div style="background-color:transparent; width:150px; color:#585858; text-align:center; margin:auto; margin-left: 95px;padding:10px; position:absolute; font-size:12px;"><!-- votre citation -->"Si tu veux être un homme libre, laisse les autres te mépriser."</div><!-- image 3 --><img src="https://zupimages.net/up/20/15/co6t.jpg" style="clip-path:polygon(50% 100%, 100% 0, 0 0); width:80px; height:80px; float:right; margin-left:-35px;"/><!-- image 4 --><img src="https://zupimages.net/up/20/15/0elq.jpg" style="clip-path:polygon(50% 0, 0 100%, 100% 100%); width:80px; height:80px; float:right;"/></div>


les images sont en 80*80. Normalement, elles sont automatiquement redimensionnées.


Et voilà, tout simplement :ange:



Nasträlya

Réseau social type FB (Profil) - Mer 8 Avr 2020 - 10:57






Réseau social type FB



Bonjour :friends:


Je vous propose une page de profil de type réseau social afin d'un peu plus pousser la personnalisation de votre personnage ! Elle a été testé sous chrome, donc elle fonctionne très bien avec celui-ci.

Voici à quoi elle ressemble:

Rendu:


Il suffit simplement de mettre ce code dans votre post:

Code:
 <style> .prayablock {margin:auto; width:700px; height:auto; background-color: #a5a5a5} .profilpraya { float: left; margin-top: -100px; position: relative; margin-left: 31px; border-radius: 50%; border: 3px solid #ffffff; } .barreblanche { background-color: #ffffff; height: 50px; margin-bottom: -21px; } .barrenav_praya { float: right; height: 30px; margin-top: 12px; padding-right: 33px; } .info_praya { background-color: #ffffff; float: left; height: auto; width: 200px; } .publi_praya {background-color:#ffffff; float: left; height:auto; width:478px; } .Idpraya { position: absolute; color: #ffffff; margin-left: 190px; margin-top: -27px; font-size: 20px; font-family: arial; } .Idpost { color: #a4cecc; font-size: 15px; font-family: arial; font-weight: bold; margin-top: 15px; margin-left: 63px; } .date_praya { color: #a5a5a5; margin-left: 62px; font-size: 12px; } .contenant_praya {color: #a5a5a5; font-size: 12px; font-family: arial; margin-top: -30px; float: right; display: flex; } .praya_tiret {padding-left:10px; padding-right:10px; color:#a4cecc;} .citapraya{background-color:transparent; width:200px; margin:auto; text-align:center;} .textcitapraya{color:#191919; font-size:12px; font-family:arial; padding:7px;} .separapraya{margin-left:50px;} .infointro{padding-left:7px;padding-bottom:8px;color:#191919;}    .infointro span{font-size:12px; color:#a5a5a5; padding-right:6px;} .infointro img{margin-right:6px;} .textinfo{padding-bottom:8px; padding-left:6px; float:right; color:#191919;}.etudeinfo{font-size:12px; color:#a5a5a5;float:left; padding-left:6px;} .imgecole{float:left;} .imgpost{border-radius:50%; float:left; padding-right:10px; padding-left:6px; padding-top:5px; width:40px; height:40px;} .fontpublipraya{ background-color:transparent; margin:auto; text-align:center;}.publipraya{color:#191919; font-size:12px; font-family:arial; padding:9px;} .fontjaime{background-color:transparent; float:left; width:200px;} .likepraya{color:#a5a5a5; font-size:14px; font-family:arial; float:left;    padding-left:5px; padding-top:2px;} .imglikepraya{margin-left:7px; margin-bottom:7px; margin-right:5px; float:left;} .nbrcom{color:#a5a5a5; font-size:14px; font-family:arial; float:right; padding-top: 2px; padding-right:7px;} .comentbarre{margin-bottom: 10px;} .fontinfopubli{background-color:transparent; width:700px; height:auto;} .copyright_oceen{background-color:transparent; margin:auto; text-align:center; color:#BDBDBD; font-size:10px; padding:5px;} .blocpublicationP{float:right; background-color:transparent; margin-top:-36px;} .intropad{padding:5px;}
</style>

<!-- le haut de page --><div class="prayablock"><img src="https://zupimages.net/up/20/06/p4qr.png"/>
<!-- l'url de l'image de couverture --><img src="https://zupimages.net/up/20/06/yljn.jpg" alt="image de couverture" /><!-- le nom et prenom --><div class="Idpraya">Lëan Vandorallen</div>
<!-- l'image de profil --><img src="https://zupimages.net/up/20/06/t80b.jpg" alt="image de profil" class="profilpraya"/><div class="barreblanche"><div class="barrenav_praya">

<!-- les liens --><div class="contenant_praya"><a href="URL ICI">Amis</a><div class="praya_tiret">|</div><a href="URL ICI">Photos</a><div class="praya_tiret"> |</div><a href="URL ICI">Plus ▼</a></div></div></div>

<!-- la colonne introduction --><div class = "info_praya"><img src="https://zupimages.net/up/20/06/o8cy.png" alt="symbole intro" class="intropad"/><div class="citapraya"><!-- le texte d'introduction --><div class="textcitapraya">"Si vous voulez dépasser les limites dans lesquelles la société vous cantonne, il faut vous battre."</div></div>
<div class="separapraya"><img src = "https://zupimages.net/up/20/06/43gq.png"/></div>
<div class="infointro"><img src="https://zupimages.net/up/20/06/cd5z.png"/><!-- le métier --> Ingénieur Robotique </div><div class="infointro"><img src="https://zupimages.net/up/20/06/5fcz.png"/><!-- le lieu d'habitation --> District 2 </div><div class="infointro"> <img src="https://zupimages.net/up/20/06/i96z.png"/><span>A étudié à:</span><!-- l'école où le personnage a étudié --> E.I.R du District 1</div> <div class="infointro"><img src="https://zupimages.net/up/20/06/gu3q.png"/><!-- Situation -->Célibataire </div></div>

<!-- profil et pseudo publication --><div class="blocpublicationP"><div class="publi_praya"><!-- url image de profil --><img src="https://zupimages.net/up/20/10/b7ak.jpg" alt="image de profil" class="imgpost"/><!-- nom prénom --><div class="Idpost">Tom Waller</div><!-- date publication --><div class="date_praya">2 Juin, 23:12</div>

<!--publication--><div class="fontpublipraya"><div class="publipraya"> C'est thème Cyborg à la Fleurette ! Ton cocktail t'attends :coktail:</div></div>

<!-- bas de la publication --><img src="https://zupimages.net/up/20/06/bm14.png" alt="barre séparation"/>
<div class="fontjaime"><img src = "https://zupimages.net/up/20/06/smvg.png" alt="like" class="imglikepraya"/><!-- nombre de likes --><div class="likepraya">32</div></div><!-- nombre de commentaires --><div class="nbrcom">10 commentaires</div>
<img src="https://zupimages.net/up/20/06/bm14.png" alt="barre séparation"/>
<img src="https://zupimages.net/up/20/06/9fy3.png" alt="barre commenter" class="comentbarre"/></div>
</div>

<div class="copyright_oceen">@Nasträlya</div></div>


L'image de couverture fait 700*300, tandis que les images de profils peuvent être mises en 136*136 :omg:

Si vous voulez changer la couleurs (le bleu très clair), il vous faudra changer tous les petits logos ainsi que la barre du haut. La barre du haut est donc aussi une image: c'était pour éviter du code inutile à mes membres, puisque je considère déjà que c'est un code assez long!   :han:


Le crédit est tout petit et d'une couleur sobre qui se fond avec le codage, c'est mon petit bébé vu que je débute en code, alors laissez le s'il vous plaît :lovebomb:



Nasträlya

(Poké)Ball Signature - Mer 8 Avr 2020 - 10:47





(Poké)Ball Signature



Bonjour :friends:


Je vous propose une signature façon ball ! Elle a été testé sous chrome, donc elle fonctionne très bien avec celui-ci.

Voici à quoi elle ressemble:

Rendu:


Dans un premier temps, il faut une page HTML: Modules > Gestion des pages HTML > Création en mode avancé (HTML)

Vous y mettrez ceci:

Code:
<html>
     <head>
       <meta charset="utf-8" />
<style type="text/css"> .tritop{border-bottom:130px solid #3d3d3d; border-left:95px solid transparent; border-right:95px solid transparent; height :0; width:119px; margin:auto; margin-bottom:5px;} .postext{background:transparent; width:120px; padding-top:50px; margin:auto;} .postcitation{font-family:Vollkorn, serif; font-size:12px; color:#a5a5a5; text-align:center} .tribottom{background:transparent; width:310px; margin:auto;} .tri1{clip-path:polygon(50% 100%, 100% 0, 0 0); width:150px; height:150px; float:left;} .tri2{clip-path:polygon(50% 0, 0 100%, 100% 100%); width:150px; height:150px; float:left; margin-left:-70px;} .tri3{clip-path:polygon(50% 100%, 100% 0, 0 0); width:150px; height:150px; float:left; margin-left: 160px; margin-top:-151px;}
       </style>
    </head>
<body>
  <div class="tritop"><div class="postext"><div class="postcitation">"Si tu veux être un homme libre, laisse les autres te mépriser."</div></div></div>
<div class="tribottom"><div class="tri1"><img src ="https://zupimages.net/up/20/15/t88d.jpg" /></div><div class="tri2"><img src ="https://zupimages.net/up/20/15/2vn8.jpg"/></div><div class="tri3"><img src ="https://zupimages.net/up/20/15/5tcc.jpg"/></div> </div>
    </body>
</html>


Vous y mettez alors vos images en 150*150, votre citation et vous enregistrez!   :hehe:

Ensuite, il suffit de mettre l'iframe dans le profil, là où on met normalement la signature:

Code:
<center><iframe src="URL PAGE HTML" name="signa" scrolling="no" frameborder="no" align="center" height = "300px" width = "320px">
</iframe></center>


Le tour est joué, vous avez une (Poké)Ball Signature :pompom:

---

Dans le cas où vous n'auriez pas accès aux pages HTML et que vous voudriez essayer de la mettre directement dans votre profil, ce sera ce code-ci:

Code:
<style type="text/css"> .tritop{border-bottom:130px solid #3d3d3d; border-left:95px solid transparent; border-right:95px solid transparent; height :0; width:119px; margin:auto; margin-bottom:5px;} .postext{background:transparent; width:120px; padding-top:50px; margin:auto;} .postcitation{font-family:Vollkorn, serif; font-size:12px; color:#a5a5a5; text-align:center} .tribottom{background:transparent; width:310px; margin:auto;} .tri1{clip-path:polygon(50% 100%, 100% 0, 0 0); width:150px; height:150px; float:left;} .tri2{clip-path:polygon(50% 0, 0 100%, 100% 100%); width:150px; height:150px; float:left; margin-left:-70px;} .tri3{clip-path:polygon(50% 100%, 100% 0, 0 0); width:150px; height:150px; float:left; margin-left: 160px; margin-top:-151px;}</style>

 <div class="tritop"><div class="postext"><div class="postcitation">"Si tu veux être un homme libre, laisse les autres te mépriser."</div></div></div><div class="tribottom"><div class="tri1"><img src ="https://zupimages.net/up/20/15/t88d.jpg" /></div><div class="tri2"><img src ="https://zupimages.net/up/20/15/2vn8.jpg"/></div><div class="tri3"><img src ="https://zupimages.net/up/20/15/5tcc.jpg"/></div> </div>


Personnellement, elle m'apparaît trop longue pour être validée, mais ne connaissant pas les autres versions, voir même où vous souhaitez la mettre, cela peut, peut être, vous servir :bwaha:


Comment personnaliser l'apparence de la chatbox - Mar 11 Avr 2017 - 22:06



Comment personnaliser l'apparence de la chatbox



Bonjour !

Nous avions précédemment une tonne de petits tutoriels qui donnaient des trucs sur la chatbox et qui, très souvent, se répétaient. Du coup, ce tutoriel a été fait pour but d'être plus complet et de rassembler en un endroit la majorité astuces.

Je vous réfère quand même à plusieurs astuces intéressantes :
- Styliser les messages de connexion / déconnexion (CSS)
- Empêcher les soucis des messages dans la Chatbox ForumActif

Tout les codes donnés ci-bas se mettent dans la feuille de style CSS.




Le bloc de la chatbox


Voilà le bloc qui contient toute la chatbox :
Code:
/*Contient toute la CB*/
body.chatbox {
}



En-tête de la chatbox


Voilà l'en-tête de la chat-box :
Code:
/*Barre de titre*/
#chatbox_header .catBottom {
  border: none; /*Enlève la bordure*/
  background-image: none; /*Enlève image de fond*/
  background-color: transparent; /*Enlève couleur de fond*/
  height: 30px;
}

/*Titre normal */
#chatbox_header .catBottom .cattitle {
}
/*Titre normal au survol*/
#chatbox_header .catBottom .cattitle:hover {
}

/*Liens de droite de la barre de titre*/
#chatbox_header .catBottom .chatbox-options a {
}
/*Liens de droite de la barre de titre au survol*/
#chatbox_header .catBottom .chatbox-options a:hover {
}



Pour remplacer le texte dans l'en-tête de la chatbox :
Code:
/*Pour cacher le titre normal*/
#chatbox_header .cattitle strong {
  font-size: 0px;
}
/*Titre Personnalisé*/
#chatbox_header .cattitle:before {
  content: "NOM"; /* Modifiez NOM par le titre que vous désirez */
  font-size: 12px;
}

/*Pour cacher le lien pour accéder aux archives normal*/
#chatbox_option_with_archives a {
  font-size: 0;
}
/*Lien pour accéder aux archives Personnalisé*/
#chatbox_option_with_archives a:before {
  content: "HISTORIQUE"; /* Modifiez HISTORIQUE par ce que vous désirez */
  font-size: 12px;
}

/*Pour cacher le lien pour sortir des archives normal*/
#chatbox_option_without_archives a {
  font-size: 0px;
}
/*Lien pour sortir des archives Personnalisé*/
#chatbox_option_without_archives a:before {
  content: "QUITTER HISTORIQUE"; /* Modifiez QUITTER HISTORIQUE par ce que vous désirez */
  font-size: 12px;
}

/*Pour cacher le lien de la connexion*/
#chatbox_option_co strong {
  font-size: 0px;
}
/*Lien de la connexion Personnalisé*/
#chatbox_option_co strong:before {
  content: "ENTRER SUR LA CB"; /* Modifiez ENTRER SUR LA CB par ce que vous désirez */
  font-size: 12px;
}

/*Pour cacher le lien de la déconnexion*/
#chatbox_option_disco {
  font-size: 0px;
}
/*Lien de la déconnexion Personnalisé*/
#chatbox_option_disco:before {
  content: "QUITTER LA CB"; /* Modifiez QUITTER LA CB par ce que vous désirez */
  font-size: 12px;
}





La liste des membres de la chatbox


Voilà la liste des membres de la chat-box :
Code:
/*Bloc de la liste des membres*/
#chatbox_members {
  background-color: transparent; /*Enlève couleur de fond*/
  border-right: 1px solid #000; /*Bordure entre la liste des membres et les messages*/
}

/*Ligne de titre des membres en ligne*/
#chatbox_members .online {
}
/*Liste qui contient les membres en ligne*/
#chatbox_members .online-users {
}
/*Ligne du nom du membre en ligne*/
#chatbox_members .online-users li {
}

/*Ligne de titre des membres absents*/
#chatbox_members .away {
}
/*Liste qui contient les membres absents*/
#chatbox_members .away-users {
}
/*Ligne du nom du membre absent*/
#chatbox_members .away-users li {
}
/* Menu au clic droit des pseudos */
#chatbox_contextmenu {
}



Pour remplacer le texte de "En ligne" et de "Absents" dans la liste des membres
Code:
/*Pour cacher le titre des membres en ligne*/
#chatbox_members .online {
  font-size: 0px;
}
/*Titre des membres en ligne personnalisé*/
#chatbox_members .online:before {
  content: "MEMBRES ACTIFS"; /* Modifiez MEMBRES ACTIFS par ce que vous désirez */
  font-size: 12px;
  color: green; /*Couleur de la police*/
}

/*Pour cacher le titre des membres absents*/
#chatbox_members .away {
  font-size: 0px;
}
/*Titre des membres absents personnalisé*/
#chatbox_members .away:before {
  content: "PROIES DE TIMMY"; /* Modifiez PROIES DE TIMMY par ce que vous désirez */
  font-size: 12px;
  color: darkred; /*Couleur de la police*/
}





L'intérieur de la chatbox où il y a les messages


Voilà l'intérieur où il y a les messages :
Code:
/*Partie centrale de la chatbox où il y a les messages*/
#chatbox {
}

/*Lignes des message impairs*/
#chatbox .chatbox_row_1 {
  margin: 0px;
}
/*Lignes de messages pairs*/
#chatbox .chatbox_row_2 {
  margin: 0px;
}

/*Empêcher le bug des textes trop longs*/
#chatbox .msg{word-wrap: break-word;}
#chatbox .user, #chatbox .date-and-time{white-space: nowrap;}

/* Mise en forme de la date */
#chatbox .date-and-time {
}

/*Bloc du pseudo du membre incluant le @ des modos et admins*/
#chatbox .user {
}
/*Pseudo du membre*/
#chatbox .chatbox-message-username {
}

/*Le message du membre*/
#chatbox .msg {
}



Les avatars de la chatbox :
Code:
/*Bloc avatar du membre*/
#chatbox .cb-avatar {
  padding: 1px!important; /*Padding*/
  border: 1px solid #d5d5d5!important; /*Bordure*/
  width:30px!important; /*Largeur*/
  height:30px!important; /*Hauteur*/
  overflow:hidden; /*Cache ce qui dépasse*/
  box-shadow: 0 2px 2px rgba(0,0,0,0.1)!important; /*Ombre du bloc*/
  transform: translateZ(0); /* empeche bug Chrome */
}
/*Avatar du membre*/
#chatbox .cb-avatar > img {
  width:30px!important;
  height:30px!important;
}





Barre de bas du forum


Voilà la barre du bas du forum :
Code:
/*Pour arranger la hauteur de la barre du bas*/
#chatbox_footer {
  height: 29px!important;
}
/*Barre du bas*/
#chatbox_footer .catBottom {
  border: none; /*Enlève la bordure*/
  background-image: none; /*Enlève image de fond*/
  background-color: transparent; /*Enlève couleur de fond*/
  height: 29px;
}

/*Bouton Aide tout à gauche*/
#chatbox_footer #help-button {
}

/*Bouton Gras*/
#chatbox_footer .text-styles label[title="Gras"] {
  background-color: pink;
}
/*Bouton Italique*/
#chatbox_footer .text-styles label[title="Ital."] {
}
/*Bouton Surligné*/
#chatbox_footer .text-styles label[title="Soulig."] {
}
/*Bouton Barré*/
#chatbox_footer .text-styles label[title="Barré"] {
}
/*Bouton Couleur de police*/
#chatbox_footer #divcolor {
}
/*Bouton Smiley*/
#chatbox_footer #divsmilies {
}

/*Texte avant le message*/
#chatbox_footer label[for="message"] {
}
/*Champ texte pour le message*/
#chatbox_footer #message {
}
/*Bouton pour envoyer le message*/
#chatbox_footer #submit_button {
}





C'est tout! Si jamais vous avez des problèmes avec ce tutoriel, n'hésitez pas à passer dans "Problème avec mon code".

À plus !

Invité

Chatbox personnalisée kaki - Mer 1 Mar 2017 - 23:32

{#}css{/#} {#}css3{/#} {#}chatbox{/#} {#}auteur_Shaneliae{/#} {#}phpBB2{/#}

Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Cette section est là pour vous, je ne répondrai à aucune question par MP ou posée à la suite du sujet.

Shoki

Animations simples en CSS3 - Sam 27 Aoû 2016 - 13:19



Animations simples en CSS3


Bien le bonjour, cher curieux ! Je poste mon premier tutoriel de codage pour... parler d'animations. Et attention, j'ai dit "animations", pas "transition" ou "transformations". D'ailleurs, vous n'aurez pas besoin de ces derniers pour comprendre ce tutoriel, je ne vais parler que des animations.

 
Tu peux pas donner un exemple au lieu de parler d'"animations" ?


En effet, ça serait plus pratique. Voici donc un petit exemple d'animation : clique ! N'est-ce pas magnifique ? En général, les animations se font avec des langages comme le JavaScript, mais ici nous allons en réaliser des simples rien qu'avec le CSS3 ! Tu veux faire la même chose ? Dans ce cas, il te suffit de suivre ce tutoriel !

 
Je précise que j'ai déjà fait ce tutoriel sur un autre forum, même si je vais remanier mes explications pour ici.
Au passage, je m'excuse s'il y avait déjà un tutoriel sur ça x:


 
Ne fonctionne pas sur les versions d'Internet Explorer (Microsoft Edge) antérieures à la 10 ! Bien veiller à mettre des préfixes. Tutoriel sur les préfixe : ici.


Comment ça marche ?


Reprenons notre petite animation de plus haut, à savoir celle-ci. Mais que se cache donc derrière ce carré qui change de couleur ? Regardons de plus près le CSS, ainsi que le HTML (il faut bien intégrer votre code quelque part, tout de même) :
Code:
/***CSS***/
/*Firefox 5.0*/
-moz-@keyframes nuxemple {
  0% {background: blue;}
  25% {background: red;}
  75% {background: yellow;}
  100% {background: green;}
}
/*Safari 4.0, Opera 15.0, Chrome 4.0*/
-webkit-@keyframes nuxemple {
  0% {background: blue;}
  25% {background: red;}
  75% {background: yellow;}
  100% {background: green;}
}
/*Opera 12.0*/
-o-@keyframes nuxemple {
  0% {background: blue;}
  25% {background: red;}
  75% {background: yellow;}
  100% {background: green;}
}
/*Standard*/
@keyframes nuxemple {
  0% {background: blue;}
  25% {background: red;}
  75% {background: yellow;}
  100% {background: green;}
}
div {
   width: 300px;
   height: 300px;
  /*Syntaxe avec super-propriété "animation"*/
  -moz-animation: nuxemple 3s linear 0s infinite alternate;
  -webkit-animation: nuxemple 3s linear 0s infinite alternate;
  -o-animation: nuxemple 3s linear 0s infinite alternate;
  animation: nuxemple 3s linear 0s infinite alternate;
}


<!-- HTML -->
<div></div>


Pourquoi je n'ai aucune class (ou id) dans mon HTML ? Tout simplement parce que j'ai sélectionné toutes les divs de mon code, donc ici la seule div que j'ai. Mais passons au CSS. Vous remarquerez qu'un drôle d'élément a fait son apparition et que la fin du CSS est incompréhensible. Mais pas de panique, je la décortique pour vous !

Partie avec le @keyframes


Je vais m'attarder ici uniquement sur la syntaxe "standard", tout simplement parce que c'est exactement la même chose pour les syntaxes préfixées (avec le préfixe en plus). Observons donc ceci :
Code:
@keyframes nuxemple {
  0% {background: blue;}
  25% {background: red;}
  75% {background: yellow;}
  100% {background: green;}
}

Ma propriété ici est @keyframes, suivit du nom de l'animation (ici, nuxemple, mais vous pouvez lui donner n'importe quel nom, du moment que vous mettez exactement le même -à la lettre près- partout). Jusque-là, pas vraiment de problèmes. C'est la suite qui se complique. Ici, notre bloc changera quatre fois de couleur. C'est vrai, c'est évident, mais je suis sûr que les deux messieurs au fond sont en train de se demander comment ça se passe.
Imaginons, la durée de mon animation est de 100%. A 0%, donc au début, mon carré est bleu. A 25% de l'animation, il devient rouge. Puis à 25%, sa couleur vire au jaune et à 100% (à la fin donc), je me retrouve avec un carré vert. Simple, non ? Sachez tout de même que si vous ne spécifiez pas le nombre de fois où l'animation se répète, vous vous retrouverez avec un carré vert à la fin, puis de nouveau bleu et... et c'est tout. Par chance, il existe quelques astuces pour contrer cela, mais nous verrons ceci plus tard.

Vous organisez comme vous le sentez vos nombre de changement de couleur et pourcentages, en sachant que lorsque vous ne voulez que deux couleurs, il faut coder ceci :
Code:
@keyframes nuxemple {
from { background: red; }
to { background: yellow; }
}

Ici, mon élément passera de rouge à jaune, ce qui vous donne quelque chose de ce genre. Bien sûr, ici j'ai usé de ma petite tactique de triche pour ne pas que ça s'arrête brusquement.

 
J'ai pas envie de me contenter de changer uniquement la couleur de fond...

Justement, j'allai en venir à ce point-ci : on peut aussi faire bouger notre carré, comme ceci ! J'avoue avoir utilisé ma petite technique pour ne pas avoir un arrêt brutal. Et voici le petit code pour arriver à ce petit miracle :

Code:
/*Standard*/
@keyframes nuxemple {
  0% {background: blue; left: 0px; top: 0px;}
  25% {background: red; left: 100px; top: 0px;}
  75% {background: yellow; left: 100px; top: 100px;}
  100% {background: green; left: 0px; top: 0px;}
}

div {
   width: 300px;
   height: 300px;
      position: relative; /*PENSEZ A METTRE VOTRE ELEMENT EN POSITION RELATIVE, FIXE OU ABSOLUE SI VOUS VOULEZ QUELQUE CHOSE QUI BOUGE*/
  /*Syntaxe avec super-propriété "animation"*/
  animation: nuxemple 3s linear 0s infinite;
}


En plus de la propriété background, j'ai ajouté une des propriété pour déterminer une position (top, left, right, bottom). Puis j'ai mis mon petit carré en position relative (très important si vous souhaitez que votre bloc bouge, mais ça marche aussi en fixe et en absolue), et j'ai laissé la magie opérer !

 
Ouais, c'est joli ton truc, mais la second partie du code, c'est quoi ?

Justement, je vais l'expliquer de ce pas ~

Partie avec la (super)propriété animation


 
Je vais tout d'abord expliquer ce que j'appelle une super-propriété : c'est une propriété... qui réunit d'autres propriétés en une seule ! Exemple flagrant : margin. Au lieu de taper :
Code:
margin-top: 10px;
margin-right: 50px;
margin-bottom: 20px;
margin-left: 45px;

ce qui peut s'avérer barbant à la longue, on réunit ces quatre propriétés en une seule, margin, et on obtient ceci :
Code:
margin: 10px 50px 20px 45px; /*traduction : margin: haut droite bas gauche*/

Pratique pour économiser des lignes, non ? Il existes d'autres super-propriétés, comme background, padding et... animation.


Voici donc la seconde partie de notre CSS
Code:
animation: nuxemple 3s linear 0s infinite alternate;

Vu comme ça, c'est vraiment du charabia, n'est-ce pas ? Mais chaque valeur correspond à une propriété. Je vais donc remplacer toutes ces valeurs par leurs propriétés correspondantes :
Code:
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction


Ça fait beaucoup à retenir, surtout que certaines on un nom assez obscure... Mais pas de panique, je vais vous expliquer à quoi correspond chaque propriété !

  1. animation-name :Ici, pas très compliqué à comprendre : le nom de l'animation (ici nuxemple)

  2. animation-duration : Là non plus, pas trop de difficultés : la durée de l'animation (5s, 700ms... valeur par défaut: 0). A DÉFINIR ABSOLUMENT. (ici 3s, soit 3 secondes)

  3. animation-timing-function : Là, c'est un peu plus obscure : il s'agit de la "vitesse" de l'animation (linear, ease... par défaut : ease. Plus de détails plus bas.) (ici linear)

  4. animation-delay : Là, pas vraiment difficile à comprendre non plus, c'est le délai de l'animation ; si elle commence au bout de 5s, 400ms... Valeur par défaut : 0s. (ici 0s, donc la valeur par défaut)

  5. animation-iteration-count : Un nom compliqué pour définir une chose simple : ceci définit le nombre de fois où l'animation va se "répéter" ; une fois ce nombre écoulé, l'animation s'arrête (si vous mettez "3", l'animation va se répéter 3 fois avant de s'arrêter). Par défaut, c'est une fois. Possibilité de mettre infinite en valeur pour qu'elle se déroule indéfiniment. (ici infinite)

  6. animation-direction : Un nom un peu flou ; cette propriété a deux valeurs : reverse et alternate. reverse va "inverser" l'animation (par exemple, mon bloc doit d'abord être bleu, puis rouge puis vert ; là il va d'abord être vert, puis rouge et enfin bleu) et alternate va "alterner" l'animation, grosso-modo la faire dans l'ordre défini (par exemple rouge, vert, bleu) puis inverser (bleu, vert, rouge si je reprends mon exemple) et ce, durant tout le temps de l'animation. Attention, si tu as, par exemple, définit que l'animation se déroulera trois fois, la première fois sera "normale", la seconde "alternée" et la dernière normale. (ici alternate)


Voici donc notre fameux code avec toutes ces propriétés :
Code:
div {
/*...*/
animation-name: nuxemple;
animation-duration: 3s;
animation-timing-function: linear;
animation-delay: 0s; /*Je pouvais carrément enlever cette partie, car la valeur par défaut est 0*/
animation-iteration-count: infinite;
animation-direction: alternate
}

La super-propriété raccourci bien le code, n'est-ce pas ? Néanmoins, sachez que ce code plutôt long a le même effet que la super-propriété.

   
C'est quoi les valeurs de "animation-timing-function" ? Avec des détails si possible.

Avant d'expliquer cela, il faut savoir qu'on retrouve ces timing-function dans les transitions
ease : Début rapide, ralenti sur la fin. Valeur par défaut.
linear : Vitesse constante sur toute la transition.
ease-in : Début lent, s'accélère de plus en plus.
ease-out : Début rapide, ralenti de plus en plus.
ease-in-out : Début et fin de la transition lents.


Après la théorie, la pratique !


Après une séance de décorticage, nous passons maintenant à... bah, la pratique. Mais soyez sans crainte, je vais vous aider pas à pas ~

Ce que nous allons donc faire, c'est un rond normalement violet qui va devenir rouge, rose jaune et orange. Et parce que j'aime bien compliquer les choses, notre rond va bouger. Dit comme ça, ça à l'air simple, mais attendez voir...

Je n'utilise pas les préfixes pour cet exemple, mais n'oubliez pas de les mettre !


Pour commencer, ouvrez votre feuille de style CSS ou de tout autre endroit où vous pourrez mettre le CSS. Une fois fait, nous allons ouvrir notre... aller, on a vu ça plus haut... ah, la dame du deuxième rang... Oui ! Exactement ! Nous allons donc introduire notre CSS par notre fameux @keyframes ! Mais pas que. Il vous faut aussi quelque chose d'important... Mais si, vous savez quoi. C'est pas suffisant le @keyframes, il faut... nommer l'animation ! Vous l'appelez comme vous le souhaitez, moi je vais l'appeler... nu-exo. On ne me juge pas, s'il vous plaît. Donc, notre CSS ressemble à ceci.

Code:
@keyframes nu-exo {

}


Je laisse un espace exprès pour pouvoir mettre la suite du code. Une fois ceci fait, il nous faut mettre des propriétés à l'intérieur. Rappelez-vous, nous (enfin, je) voulons un rond violet qui devient successivement rouge, rose, jaune et orange. Nous allons donc utiliser... les pourcentages vus au début.
Code:
@keyframes nu-exo {
0% {background: #A93A8C;}
32% {background: #E80101;}
64% {background: #F476A9;}
76% {background: yellow;}
100% {background: #F6620C;}
}

Comme vous pouvez le voir, j'ai mit un peu ce que je voulais dans les pourcentages, mais sachez que vous devez obligatoirement avoir 0% au départ et 100% à la fin. Si vous préférez avoir 3 couleurs, 6 couleurs ou même une dizaine, adaptez les pourcentages en fonction de ce que vous souhaitez. Rappelez-vous que pour deux couleurs, le code est le suivant :
Code:
@keyframes nu-exo {
from {propriété: valeur;}
to {propriété: valeur;}
}


Je veux pas mettre du rose, c'est pas viril...

Pas de problème ! Si vous souhaitez avoir d'autres couleurs, vous avez deux choix : soit utiliser les noms de couleurs anglais (red, yellow, green, blue...) ou, beaucoup moins limité, les couleurs hexadécimales. Comme il est impossible de savoir à vu de nez ce que fera #56AEBC par exemple, vous pouvez aller sur ce site et choisir vos couleur en toute tranquillité ~ Vous pourrez également constater que les couleurs que j'ai prise pour cet exemple sont effectivement du violet, du rouge, du rose et du orange, et que la couleur que j'ai "composé" totalement au hasard (à savoir #56AEBC) correspond à du bleu.
Mais revenons. Dans la fameuse seconde partie du code, nous allons donner une class à notre rond (pour moi, ça sera "rond". Effectivement, je ne vais pas chercher très loin xD) et nous allons lui mettre des propriétés :

Code:
.rond {
width: 150px;
height: 150px;
border-radius: 150px; /*arrondi les bords et forme ici un rond*/
background: #A93A8C; /*important si vous ne voulez pas vous retrouver avec un rond invisible à la fin de l'animation*/
animation-name: nu-exo;
animation-duration: 3s; /*vous pouvez mettre plus longtemps. Sachez qu'il est important de définir une durée !*/

Il ne reste plus qu'à intégrer tout ça dans le HTML...

Code:
<div class="rond"></div>
<!-- Si ça vous chante, vous pouvez écrire un mot d'amour dans votre cercle ~ -->


Pour le moment, nous avons ceci. Vous pouvez constater que, effectivement, l'animation s'arrête au bout d'un moment.  Niveau code, nous avons cela :
Code:
/*CSS*/
@keyframes nu-exo {
0% {background: #A93A8C;}
32% {background: #E80101;}
64% {background: #F476A9;}
76% {background: yellow;}
100% {background: #F6620C;}
}

.rond {
width: 150px;
height: 150px;
border-radius: 150px;
background: #A93A8C;
animation-name: nu-exo;
animation-duration: 3s;

<!-- HTML -->
<div class="rond"></div>


... Dites, on n'aurait pas oublié quelque chose, par hasard ? ... Mais oui, notre rond doit bouger ! Pour cela, il nous suffit de mettre notre élément en position relative (ou absolute ou fixe) si vous voulez que ça bouge ~  Ensuite, nous retournons dans notre CSS et nous allons donner du mouvement au bloc. Pour cela, rien de plus simple, il suffit d'utiliser les propriétés top, bottom, left ou right suivi d'une valeur en pixels. Un peu comme ici :

Code:
@keyframes nu-exo {
0% {background: #A93A8C; top: 0px; left: 0px;}
32% {background: #E80101; top: 0px; left: 200px;}
64% {background: #F476A9; top: 200px; left: 200px;}
76% {background: yellow; top: 200px; left: 0px;}      
100% {background: #F6620C; top: 0px; left: 0px;}
}

.rond {
      position: relative;
   width: 150px;
   height: 150px;
      border-radius: 150px;
      background: #A93A8C;
  animation-name: nu-exo;
  animation-duration: 3s;
}


Et nous avons ceci ! Pas mal, non ? ... Comment ça, il y a un détail qui gêne ? L'arrêt brutal ? Nous allons donc masquer cela en utilisant certaines propriétés précédemment vues ! Pour plus de clarté, je vais utiliser la super-propriété puis montrer ce que ça donne avec les propriétés séparées. Nous avons donc une première astuce qui s'ouvre à nous : utiliser infinite. Ce qui nous donnerait :
Code:
animation: nu-exo 3s ease-in-out 0s infinite;
/*OU*/
animation-name: nu-exo;
animation-duration: 3s;
animation-timing-duration: ease-in-out;
animation-delay: 0s;
animation-iteration-count: infinite;


Ce qui donne ça. Si ça ne vous va toujours pas, vous pouvez toujours taper ceci :
Code:
animation: nu-exo 3s ease-in-out 0s infinite alternate;
/*OU*/
animation-name: nu-exo;
animation-duration: 3s;
animation-timing-duration: ease-in-out;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;


Et pourquoi à un endroit ça va plus vite qu'un autre ? Je vais expliquer ça en donnant un exemple tout bête. Imaginez que votre animation soit un facteur qui doit livrer ses courriers/colis/lettres dans un temps limite, ici 1 minute, soit 100%. Il commence donc à 0%, soit au début, et dépose son premier colis à 32% du temps. Bon, il a le temps, ça va. Le second paquet, il a pris plus de temps et du coup, il le livre quand il est à 64% du temps. Du coup, il va accélérer et à 76% du temps, il a livré le troisième colis. Lui restant plus de temps que prévu, notre facteur va livrer son quatrième et dernier colis pile à la fin du temps limite ; il a donc rempli sa mission de tout livrer en une minute. L'animation, c'est pareil. L'élément a un certains temps que vous définissez pour compléter l'animation en entier. Et suivant les pourcentages que vous lui attribuez, elle va aller plus ou moins vite par endroit.

Et voilà, notre animation est finie ! Rien ne vous empêche cependant de rajouter quelques petites touches personnelles. Personnellement, en rajoutant tous les préfixes et tout le tralala, j'ai obtenu ceci :

Code:
/*CSS*/
/*Firefox 5.0*/
-moz-@keyframes nu-exo {
0% {background: #A93A8C; top: 0px; left: 0px;}
32% {background: #E80101; top: 0px; left: 200px;}
64% {background: #F476A9; top: 200px; left: 200px;}
76% {background: yellow; top: 200px; left: 0px;}      
100% {background: #F6620C; top: 0px; left: 0px;}
}
      
/*Safari 4.0, Opera 15.0, Chrome 4.0*/
-webkit-@keyframes nu-exo {
0% {background: #A93A8C; top: 0px; left: 0px;}
32% {background: #E80101; top: 0px; left: 200px;}
64% {background: #F476A9; top: 200px; left: 200px;}
76% {background: yellow; top: 200px; left: 0px;}      
100% {background: #F6620C; top: 0px; left: 0px;}
}
      
/*Opera 12.0*/
-o-@keyframes nu-exo {
0% {background: #A93A8C; top: 0px; left: 0px;}
32% {background: #E80101; top: 0px; left: 200px;}
64% {background: #F476A9; top: 200px; left: 200px;}
76% {background: yellow; top: 200px; left: 0px;}
100% {background: #F6620C; top: 0px; left: 0px;}
}
      
/*Standard*/
@keyframes nu-exo {
0% {background: #A93A8C; top: 0px; left: 0px;}
32% {background: #E80101; top: 0px; left: 200px;}
64% {background: #F476A9; top: 200px; left: 200px;}
76% {background: yellow; top: 200px; left: 0px;}      
100% {background: #F6620C; top: 0px; left: 0px;}
}
      
.rond {
      position: relative;
   width: 150px;
   height: 150px;
      border-radius: 150px;
      background: #A93A8C;
      -moz-animation: nu-exo 3s ease-in-out 0s infinite alternate;
      -webkit-animation: nu-exo 3s ease-in-out 0s infinite alternate;
      -o-animation: nu-exo 3s ease-in-out 0s infinite alternate;
  animation: nu-exo 3s ease-in-out 0s infinite alternate;
}


<!-- HTML -->
<div class="rond"></div>


C'est donc la fin de ce tutoriel. Je ne vous ai ici appris que les bases, mais sachez qu'en creusant un peu, vous pourrez faire de belles choses ! Attention toutefois à ne pas en abuser, vous pourrez faire mal aux yeux de ceux qui regarde votre carré magique ~ Néanmoins, voici les différents points importants à retenir :

• N'oubliez pas de donner un nom à votre animation ;
• Peut importe le nombre de % que vous mettez, une animation doit toujours commencer par 0% et finir par 100% ;
• Pour une animation ne comprenant que deux couleurs (ou autre), écrire
Code:
@keyframes nomAnimation {
from {propriété: valeur;}
to {propriété: valeur;}
}

• Si vous voulez que votre élément bouge durant l'animation, n'oubliez pas de le mettre en position relative, absolue ou fixe ;
• Suivant vos %, l'animation n'ira pas forcément à la même vitesse d'un endroit à l'autre ;
• Arrivé à sa fin, l'animation s'arrête brutalement. Si vous voulez contrer ça, utilisez des méthodes telles que
Code:
animation-iteration-count: infinite;

• Si vous voulez raccourcir au maximum votre code, utilisez la super-propriété animation, qui s'écrit :
Code:
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;

(remplacer les propriétés par des valeurs)

A vous de jouer maintenant !

[Invision & PHPBB2] Coder un cadre autour du forum en images - Ven 2 Jan 2015 - 12:58



[Invision & PHPBB2] Coder un cadre autour du forum en images



Je comprends rien à ton titre...

Oui, le titre n'est pas le plus clair du monde, mais grâce à la gentillesse extrême de Gravity et Hismé, laissez-moi vous expliquer ce dont je veux parler! Ou plutôt même: vous montrer. En effet, voici donc ce que je vais vous apprendre à faire. Imaginez que Gravity vous fasse une superbe maquette comme pour la commande de Hismé pour Heiwa et que GASP! Mais il y a un cadre autour du forum! Voyez seulement:
Tag css3 sur Never Utopia - graphisme, codage et game design 1413738489-maquette1

Et là, vous vous demandez comment vous allez faire, parce qu'il y a un haut, un bas, et surtout, un motif de pierres qui doit se répéter... et si le motif ne se répète pas à la bonne hauteur, vous faite comment? Et là il faut toucher aux templates et tout ça, et ça va pa bien s'adapter à l'écran des gens avec une taille fixe, et ça va pas le faire et... FAUX!
En réalité, c'est très facile.

Bref, c'est peut-être un peu difficile de voir comment faire, c'est pourquoi j'écris... ce tuto! YOUPI! =D

Cependant, je vous conseille de lire le tuto sur les sélecteurs de Manumanu qui vous sera utile, vu que nous utilisons des :before et :after. Sinon, tout le reste sera expliqué.


Pour le PHPBB2


On commence tout de suite avec la plateforme la plus utilisée: le PHPBB2. Vous verrez, c'est aussi la plus "simple" des deux Wink

Le HTML


Il n'y a pas de HTML à faire. Vraiment, rien, nada. C'est pour ça que c'est si facile! Cependant, il y a quelques trucs que vous pouvez faire, simplement pour vous faciliter la vie par la suite. La plupart de ces choses n'ont même pas besoin de toucher du HTML.

La première: mettre une image transparente dans Affichage -> Images et Couleurs -> Gestion des images -> Mode Avancé -> Logo du forum. Peu importe sa taille, suffit qu'elle soit transparente, vu que la taille est modifiable dans le CSS Wink

La seconde: Centre le logo et la barre de navigation en allant dans Affichage -> Page d'accueil -> En-tête & Navigation et cocher "Centré" à Position du logo ET Position du menu.

Mettez également la bonne couleur de fond à votre forum, la même que celle qui sera autour de votre cadre, optimalement.

Maintenant, une autre chose que vous pouvez faire pour retirer des break intempestif, c'est de toucher aux templates.
Là vous allez sous Affichage -> Templates -> Général -> overall_header et vous suprimez ce petit bout de code:
Code:
                     <div class="maintitle">{MAIN_SITENAME}</div>
                     <br />
                     <span class="gen">{SITE_DESCRIPTION}<br />  </span>


À la limite, vous pouvez également simplement supprimer les balises br dans ce code, mais si de toute façon vous ne voulez pas afficher la description et le nom du forum, autant les retirer complètement Wink


Le CSS


Là c'est le plus long! Évidemment, vous devez avoir les images à disposition pour le haut, le bas et le centre qui se répète.

Mais d'abord, commençons par le commencement. Première ligne du CSS:
Code:
/* Pour l'adaptivité du design par rapport à l'écran. */
.bodylinewidth {
  width: 100%;
}


Comme je l'ai écrit dans mon petit commentaire, cette ligne très simple permet de faire en sorte que l'intérieur du forum va s'adapter à la taille de l'écran, en prenant simplement toute la largeur du forum. Normalement, le bodylinewidth prend la largeur que vous lui avez indiqué dans Général -> Forum -> Configuration -> Largeur du forum (nombre ou %) :. Mais là, en gros, on lui dit de ne pas le rendre en compte.

Bon là, forcément, votre forum ressemble à plus grand chose, du coup on va redonner la largeur que l'on veut au forum en ajoutant ceci:
Code:
/* Permet que l'intérieur du corps de page soit plus petit que le cadre */
#page-body .three-col {
  margin: auto;
  width: 890px;
}

En gros, on redonne une taille "normale" à tout ce qui doit se trouver dans le cadre et on le centre.

Bon, tout ça c'est super, mais maintenant, il est temps de mettre en place la bannière et le forum. Voici donc le code très important:
Code:
/* Permettra de placer la bannière et le footer correctement. */
.bodyline {
  position: relative;
  z-index: 2;
  padding: 0px;
}

/* Met en place la bannière. Le width: 100% permet de rendre ça adaptif à a taille de l'écran */
.bodyline:before {
  content: "";
  display: block;
  height: 992px;
  width: 100%;
  margin: auto;
  z-index: 1;
  background-image: url("http://img110.xooimage.com/files/8/9/e/header4-487e0dc.jpg");
  background-position: center;
  background-repeat: no-repeat;
}

/* Met en place le footer. Le width: 100% permet de rendre ça adaptif à a taille de l'écran */
.bodyline:after {
  content: "";
  display: block;
  height: 700px;
  width: 100%;
  margin: auto;
  background-image: url("http://img110.xooimage.com/files/b/0/1/footer3-4875eec.jpg");
  background-position: center;
  background-repeat: no-repeat;
}


Expliquons donc ce code, parce que sinon, vous n'allez rien comprendre. (Enfin peut-être que si, mais avec explications c'est plus sympas x) )

Tout premièrement, on met en position: relative et un z-index plus haut ce sur quoi on applique le before et after. Cela va nous permettre après de le placer correctement (bien qu'on utilise pas d'absolute), surtout pour pouvoir faire passer le corps de page au-dessus du before et after sans trop de peine, notamment le logo.

Ensuite, vous remarquerez que le :before et :after ont tous deux un width: 100%; C'est tout simplement pour faire ne sorte que cela s'adapte à l'écran. Pas beaucoup de surprise non plus au niveau du height, qui est simplement la hauteur de l'image de votre haut, respectivement bas du cadre du forum. Ne prenez donc pas les valeur que j'ai mise mais mettez celle de vos images, sinon ça ne va évidemment pas marcher!

Vous vous dites probablement que le content: '' et le display block ne sont pas important. Mais c'est tout le contraire. Un :before u un :after ne s'affichera tout simplement pas s'il n'y a pas de "content: '' " et le display block nous permet de le faire agir comme un div. Sinon, encore une fois, impossible de le voir s'afficher ainsi. Ils sont donc très importants, et à garder!


Cependant, vous verrez tout de suite un problème, notamment par rapport à la partie du haut de votre cadre... eh bien le logo transparent n'est tout simplement pas dessus! Pas de panique, on va encore s'occuper de ça, mais d'abord, mettons en place le corps de page!

Code:
/* Le cadre du corps de page. */
#page-body {
  margin: auto;
  width: 100%;
  background-image: url('http://img110.xooimage.com/files/6/3/e/bg2-4875f11.jpg');
  background-repeat: repeat-y;
  background-position: center;
}


Vous voyez donc que l'on change d'élément sur lequel on applique, mais en gros, on entoure le corps, on met un width: 100%; (pour s'adapter à toute largeur d'écran), et on fait se répéter le background seulement sur l'axe des y (donc verticalement). Maintenant, votre forum ressemble déjà un peu plus à l'encadrement que vous devriez avoir! Cependant, bien sûr, la bannière est encore au-dessus du logo, et le bas de votre forum ne touche pas le milieu. Embêtant, mais facilement corrigeable à l'aide des margin!

Cependant, avant de nous amuser avec les margin, changeons la taille du logo pour qu'il ait la bonne hauteur et largeur (toute la hauteur de la bannière donc).

Chez moi, ça donne ça:
Code:
/* Taille du logo "fictif" pour rendre la bannière clickable */
#i_logo {
  height: 933px;
}


Bien sûr, chez vous la taille peut être différente.

Il faut le faire avant de jouer avec les margin, car la hauteur du logo détermine aussi la taille de la margin: plus le logo est grand, plus le margin le sera aussi.


Reprenons donc le code que nous avions avant, et ajoutons-y des margin (les miennes sont tout à la fin de chacun des deux bouts de code):
Code:

/* Met en place la bannière. Le width: 100% permet de rendre ça adaptif à a taille de l'écran */
.bodyline:before {
  content: "";
  display: block;
  height: 992px;
  width: 100%;
  margin: auto;
  z-index: 1;
  background-image: url("http://img110.xooimage.com/files/8/9/e/header4-487e0dc.jpg");
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: -955px;
}

/* Met en place le footer. Le width: 100% permet de rendre ça adaptif à a taille de l'écran */
.bodyline:after {
  content: "";
  display: block;
  height: 700px;
  width: 100%;
  margin: auto;
  background-image: url("http://img110.xooimage.com/files/b/0/1/footer3-4875eec.jpg");
  background-position: center;
  background-repeat: no-repeat;
  margin-top: -46px;
}


Mettez toujours les margin-top, margin-bottom, margin-left ou margin-right après les margin: tout court. En effet, sinon, votre margin-top/bottom/left/right ne sera pas prit en compte!


Ert voilà, votre forum est dans un joli cadre! =D

Cependant, si vous n'avez pas retiré la couleur du cadre de bodyline, vous remarquerez que le cadre n'arrive pas vraiment jusqu'au bout de votre page de navigateur... C'est normal, parce que le body a une marge, et le bodyline a un cadre!

On peut donc retirer tout ça en mettant ceci dans le CSS:
Code:
body {
  margin: 0px;
}

.bodyline {
  border: 0px solid;
}



Le Javascript


Bon c'est bien beau tout ça, vous avez un joli cadre et tout, mais... Le centre ne se répète pas correctement!

Et si par malheur vous n'avez pas la bonne taille à l'intérieur du cadre, eh bien ça peut mal se répéter et mal "fusionner" avec le footer, et vous donner un truc comme ça:
Tag css3 sur Never Utopia - graphisme, codage et game design 1420199588-untitled
Pas génial hein?

Eh bien avec ce script, ce n'est plus un problème!

Allez sous Modules -> HTML & JAVASCRIPT -> Gestion des codes Javascript -> Créer un Nouveau Javascript,nommez-le quelque chose comme "Multiplication en taille du page-body" cochez sur toutes les pages.

Puis vous y mettez:
Code:
$(function() {
    $div = $('#page-body');
    var remainder = $div.height() % 201;
    var newHeight = $div.height() + (201-remainder);
    $div.css('height', newHeight);
});

Ici, le 201 correspond à la hauteur de mon image qui se répète au centre. Donc, si votre image ne fait que 100px, replacez le 201 par 100!


En gros, voilà ce que ce code dit, ligne par ligne.
- Prendre la div du nom de page-body.
- Calculer ce qui reste de la division entre la hauteur de ce div et 201 (qui est la hauteur de mon image de répétition).
- Ensuite, créer une nouvelle hauteur en prenant la hauteur actuelle de page-body, et en y ajoutant la différence entre 201 et le reste que je viens de calculer.
- Appliquer cette nouvelle hauteur à page-body.

Et tadaaa! ça se répète tout bien! =D

Et voilà qui est fait et tout simple pour PHPBB2!



Pour Invision


Invision est une des plateformes que j'utilise personnellement le plus, parce qu'il n'y a pas vraiment de tableaux. Du coup c'est la deuxième version que je vais vous montrer, et je ne vais pas vous montrer pour les autres versions. Désolée!

Le HTML


Ici, c'est légèrement plus difficile que pour le PHPBB2, car il y a deux templates sur lesquels on va devoir modifier quelque chose. En réalité, on ajoute une seule et même div, cependant, vu que la div s'ouvre sur overall_header, il faut la fermer sur overall_footer_begin !

Cherchez dans votre template overall_header ceci:
Code:
</div>
<div id="submenu">


Il vous suffit alors d'ouvrir une div entre deux en lui donnant une class, comme par exemple:
Code:
</div>
<div id="contour_forum">
   <div id="submenu">


Maintenant, dans overall_footer_begin, tout à la fin du template, vous avez ceci:
Code:
</div>
<!-- END html_validation -->


Rajoutez-y simplement une div fermante, comme ceci:
Code:
</div>
</div>
<!-- END html_validation -->


Et voilà qui est terminé pour la partie compliquée!

Pour la partie simple, nous avons pareil pour que le PHPBB2, donc je vous le remets ici:

La première: mettre une image transparente dans Affichage -> Images et Couleurs -> Gestion des images -> Mode Avancé -> Logo du forum. Peu importe sa taille, suffit qu'elle soit transparente, vu que la taille est modifiable dans le CSS Wink

La seconde: Centre le logo et la barre de navigation en allant dans Affichage -> Page d'accueil -> En-tête & Navigation et cocher "Centré" à Position du logo ET Position du menu.

Mettez également la bonne couleur de fond à votre forum, la même que celle qui sera autour de votre cadre, optimalement.

Maintenant, une autre chose que vous pouvez faire pour retirer des break intempestif, c'est de toucher aux templates. Je vous laisse jouer avec Razz


Le CSS


Plus compliqué tout de même que le HTML, le code reste cependant assez simple et similaire à sa version du PHPBB2, à quelque changements près!

Commençons tout de suite par mettre les images de bannière et de footer du forum:
Code:
/* Permettra de placer la bannière et le footer correctement. */
.container_IE {
  position: relative;
  z-index: 2;
  padding: 0px;
  background-color: #A5C9E9;
}

/* Met en place la bannière. Le width: 100% permet de rendre ça adaptif à a taille de l'écran */
.container_IE:before {
  z-index: 1;
  background-image: url("http://img110.xooimage.com/files/8/9/e/header4-487e0dc.jpg");
  background-position: center;
  background-repeat: no-repeat;
  content: "";
  display: block;
  height: 992px;
  width: 100%;
  margin: auto;
}

/* Met en place le footer. Le width: 100% permet de rendre ça adaptif à a taille de l'écran */
.container_IE:after {
  background-image: url("http://img110.xooimage.com/files/b/0/1/footer3-4875eec.jpg");
  background-position: center;
  background-repeat: no-repeat;
  content: "";
  display: block;
  height: 700px;
  width: 100%;
  margin: auto;
}


Expliquons donc ce code, parce que sinon, vous n'allez rien comprendre. (Enfin peut-être que si, mais avec explications c'est plus sympas x) )

Tout premièrement, on met en position: relative et un z-index plus haut ce sur quoi on applique le before et after. Cela va nous permettre après de le placer correctement (bien qu'on utilise pas d'absolute), surtout pour pouvoir faire passer le corps de page au-dessus du before et after sans trop de peine, notamment le logo.

Ensuite, vous remarquerez que le :before et :after ont tous deux un width: 100%; C'est tout simplement pour faire en sorte que cela s'adapte à l'écran. Pas beaucoup de surprise non plus au niveau du height, qui est simplement la hauteur de l'image de votre haut, respectivement bas du cadre du forum. Ne prenez donc pas les valeur que j'ai mise mais mettez celle de vos images, sinon ça ne va évidemment pas marcher!

Vous vous dites probablement que le content: '' et le display block ne sont pas important. Mais c'est tout le contraire. Un :before u un :after ne s'affichera tout simplement pas s'il n'y a pas de "content: '' " et le display block nous permet de le faire agir comme un div. Sinon, encore une fois, impossible de le voir s'afficher ainsi. Ils sont donc très importants, et à garder!


Cependant, vous verrez tout de suite un problème, notamment par rapport à la partie du haut de votre cadre... eh bien le logo transparent a un fond, tout d'abord, et il ne se met pas au-dessus de l'image de bannière!

On va donc tout de suite régler notre premier problème:
Code:
/* On met la bannière é la bonne largeur et au bon endroit */
#logostrip {
  max-width: 797px;
  margin: auto;
  height: 568px;
  background: none !important;
}

#logostrip img {
  width: 797px;
  height: 600px;
}

div#logostrip #logo {
  margin: 0px;
}


Expliquons rapidement son code. Sur Invision, le logo est dans deux div: #logostrip et #logo. #logo a une marge qui est mise automatiquement, une marge que je retire dans le CSS, et #logostrip doit être mit au centre (avec margin-auto). Je mets aussi une largeur et une hauteur à notre image du logo (pour qu'elle prenne toute la hauteur de la bannière et une bonne largeur. Et enfin, je retire la couleur de fond à notre logo, avec le background:none!

Maintenant, occupons-nous du corps du forum!
Code:
/* Mettre le fond au reste */
#ipbwrapper {
  margin: auto;
  width: 100%;
  padding: 0px;
}

/* On met le centre en place */
#contour_forum {
  width: 100%;
  background-image: url('http://img110.xooimage.com/files/6/3/e/bg2-4875f11.jpg');
  background-repeat: repeat-y;
  background-position: center;
  margin-top: 100px;
}


Ici c'est simple, on met un width: 100% à ipbwrapper pour qu'il s'adapte à la taille de l'écran et on retire tout padding, ensuite, on utilise la div qu'on a créée pour mettre l'image de fond qui se répète verticalement, en mettant un width de 100% pour qu'elle s'adapte à toute taille d'écran.

Maintenant, vraiment, on n'a plus qu'un seul problème: tout ce qui est à l'intérieur prend toute la largeur... vraiment pas pratique, et pas franchement ce qu'on veut!

Du coup, une seule solution: mettre une largeur max à tout ce qu'il y a à l'intérieur et un joli margin: auto pour que ça se centre:
Code:
/* On force le reste à être plus petit et rentrer dans le cadre. */
#submenu, #userlinks, #clearfix, #gfooter, p.center, #emptyidcc {
  position: relative;
  max-width: 790px;
  margin: auto;
  left: 3px;
}


Le left: 3px est mit parce qu'en réalité, sur Invision, tout est un tout petit peu décalé. Rien de bien grave donc, qui ne peut être corrigé avec un petit position: relative!

Et à présent, vient donc le moment de retirer tout trou béant entre le header et notre corps,ou le footer et notre corps. Dans mon cas, le footer est déjà collé au corps, donc je n'y touche pas (mais vous pourriez simplement ajouter un margintop négatif à .container_IE:after ), alors il me suffit de changer le .container_IE:before.

Cela donne donc ceci :
Code:
/* Met en place la bannière. Le width: 100% permet de rendre ça adaptif à a taille de l'écran */
.container_IE:before {
  z-index: 1;
  background-image: url("http://img110.xooimage.com/files/8/9/e/header4-487e0dc.jpg");
  background-position: center;
  background-repeat: no-repeat;
  content: "";
  display: block;
  height: 992px;
  width: 100%;
  margin: auto;
  margin-bottom: -711px;
}


Et voilà le CSS qui est terminé!


Le Javascript


Le Javascript pour Invision est le même que celui de PHPBB2 à un détail près: il s'applique sur #contour_forum ! Du coup, je copie-colle juste ce qu'il y a plus haut en changeant ce détail (parce que j'ai la flemme =P)

Bon c'est bien beau tout ça, vous avez un joli cadre et tout, mais... Le centre ne se répète pas correctement! Et si par malheur vous n'avez pas la bonne taille à l'intérieur du cadre, eh bien ça peut mal se répéter et mal "fusionner" avec le footer, et vous donner un truc comme ça:
Tag css3 sur Never Utopia - graphisme, codage et game design 1420199588-untitled
Pas génial hein?

Eh bien avec ce script, ce n'est plus un problème!

Allez sous Modules -> HTML & JAVASCRIPT -> Gestion des codes Javascript -> Créer un Nouveau Javascript, nommez-le quelque chose comme "Multiplication en taille du contour_forum " cochez sur toutes les pages.

Puis vous y mettez:
Code:
$(function() {
    $div = $('#contour_forum');
    var remainder = $div.height() % 201;
    var newHeight = $div.height() + (201-remainder);
    $div.css('height', newHeight);
});

Ici, le 201 correspond à la hauteur de mon image qui se répète au centre. Donc, si votre image ne fait que 100px, replacez le 201 par 100!


En gros, voilà ce que ce code dit, ligne par ligne.
- Prendre la div du nom de contour_forum.
- Calculer ce qui reste de la division entre la hauteur de ce div et 201 (qui est la hauteur de mon image de répétition).
- Ensuite, créer une nouvelle hauteur en prenant la hauteur actuelle de contour_forum, et en y ajoutant la différence entre 201 et le reste que je viens de calculer.
- Appliquer cette nouvelle hauteur à contour_forum.

Et tadaaa! ça se répète tout bien! =D

Et voilà qui sonne la fin de ce tuto! ^w^

Fangs

Menu déroulant moderne (HTML & CSS3) - Lun 10 Nov 2014 - 22:41






Menu déroulant moderne

(HTML & CSS3)


Bonjour à tous ! :gentleman:

Alors, comme son nom l'indique, dans ce ls, je vais vous ai réalisé un petit menu déroulant très moderne pour vos forums et vos pages web. Il est uniquement fait à partir de HTML et de CSS3, la dernière version du CSS qui propose beaucoup de possibilités.

Ce ls est donc divisé en deux parties:

- Le codage HTML
- Le codage CSS

Sachez que ce menu déroulant, qui peut servir de barre de navigation, est totalement personnalisable ! Il suffit de changer les textes dans le HTML et de changer des paramètres dans le CSS, et pour les plus à l'aise en codage, modifier cette barre à l'infini et selon leurs envies !
Attention
Je vous rappelle que les codeurs qui créent les ls et les tutoriels font ça bénévolement, il est donc normal que nous attention un crédit de Never Utopia sur vos forums. Merci :toto:

Assez parlé, passons aux choses sérieuses.

Aperçu de la barre de navigation

Aperçu
Voici donc un petit aperçu de ce que cela donne:
barre de navigation ; barre au survol

Codage: HTML


Voici donc le code que vous pouvez disposer où vous voulez: dans une page web, une template ou dans un message. (Si vous publiez ce code dans une template, n'oubliez pas de la publier par la suite).

Code:

<center>
        
   <div class="barre_nav">
               
      <div class="nav_1">
                          
         <div class="nav_txt">
                    Titre 1<br /><br />       
         </div><br /><a href="#">  Lien 1</a><br /><a href="#">  Lien 2</a><br /><a href="#">  Lien 3</a><br /><a href="#">  Lien 4</a><br />     
      </div>
               
      <div class="nav_2">
                          
         <div class="nav_txt">
                    Titre 2<br /><br />       
         </div><br /><a href="#">  Lien 1</a><br /><a href="#">  Lien 2</a><br /><a href="#">  Lien 3</a><br /><a href="#">  Lien 4</a><br />   
      </div>
               
      <div class="nav_3">
                          
         <div class="nav_txt">
                    Titre 3<br /><br />       
         </div><br /><a href="#">  Lien 1</a><br /><a href="#">  Lien 2</a><br /><a href="#">  Lien 3</a><br /><a href="#">  Lien 4</a><br />
      </div>
               
      <div class="nav_4">
                          
         <div class="nav_txt">
                    Titre 4<br /><br />       
         </div><br /><a href="#">  Lien 1</a><br /><a href="#">  Lien 2</a><br /><a href="#">  Lien 3</a><br /><a href="#">  Lien 4</a><br /> 
      </div>
               
      <div class="nav_5">
                          
         <div class="nav_txt">
                    Titre 5<br /><br />       
         </div><br /><a href="#">  Lien 1</a><br /><a href="#">  Lien 2</a><br /><a href="#">  Lien 3</a><br /><a href="#">  Lien 4</a><br />   
      </div>
           
   </div>
</center>


Codage: CSS


Et voici donc le code CSS qui en découle ! :)

Code:

/* DEBUT BARRE DE NAVIGATION */
.nav_txt {
  text-align: center;
  font-variant: small-caps;
  font-family: Gerogia;
  color: #e6e7e7;
  background: #091016;
  font-size: 20px;
  height: 25px;
  text-shadow:1px 1px 2px #000000;
  border-bottom: 1px solid #091016;
  box-shadow: 0px 0px 3px #000000;
}
.barre_nav a{
  text-align: center;
  font-variant: small-caps;
  font-family: Gerogia;
  color: #e6e7e7;
  font-size: 15px;
  margin-left: 5px;
  text-decoration: none !important;
  -moz-transition:  0.2s all;
  -webkit-transition:  0.2s all;
  -o-transition:  0.2s all;
  -ms-transition:  0.2s all;
  -khtml-transition:  0.2s all;
  transition:  0.2s all;
}
.barre_nav a:hover {
  text-decoration: none !important;
  letter-spacing: 2px;
  -moz-transition:  0.2s all;
  -webkit-transition:  0.2s all;
  -o-transition:  0.2s all;
  -ms-transition:  0.2s all;
  -khtml-transition:    0.2s all;
  transition:    0.2s all;
}
.barre_nav {
  width:960px; /* à adapter selon la largeur de votre forum */
  height:175px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: 100px; /* à adapter selon les éléments présents au dessus de votre barre */
  overflow: hidden;
  z-index: 10;
  border-top: 1px solid #e6e7e7;
}
.nav_1 {
  width:190px;
  height:25px;
  background: #080e13;
  float: left;
  border: 1px solid #091016;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
  overflow: hidden;
}
.nav_2 {
  width:190px;
  height:25px; 
  background: #080e13; 
  float: left;
  border: 1px solid #091016;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
  overflow: hidden;
}
.nav_3 {
  width:190px;
  height:25px;
  background: #080e13; 
  float: left;
  border: 1px solid #091016;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
  overflow: hidden;
}
.nav_4 {
  width:190px;
  height:25px;
  background: #080e13;
  float: left;
  border: 1px solid #091016;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
  overflow: hidden;
}
.nav_5 {
  width:190px;
  height:25px; 
  background: #080e13;
  float: left;
  border: 1px solid #091016;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
  overflow: hidden;
}
.nav_1:hover {
  width:190px;
  height:125px;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
}
.nav_2:hover {
  width:190px;
  height:125px; 
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
}
.nav_3:hover {
  width:190px;
  height:140px;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
}
.nav_4:hover {
  width:190px;
  height:125px;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
}
.nav_5:hover {
  width:190px;
  height:125px; 
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
}

/* FIN BARRE DE NAVIGATION */


Question ?

Si vous avez une question, je vous rappelle que cette section est disponible !

Voilà, voilà, je vous remercie. :)


Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^

Widgets dans un volet latéral ouvrant "onclick" (CSS avec target) - Mer 1 Oct 2014 - 14:24


Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Lien pour comprendre pourquoi le contenu n'est pas sous hide


Widgets FA dans un volet coulissant



Présentation



Les Widgets sont des éléments pratiques pour mettre à disposition des informations aux membres directement sur la page d'accueil, malheureusement ils sont aussi assez encombrants et possèdent un inconvénient majeur : ils réduisent la largeur du contenu du forum, qui est tout de même plus important qu'eux en terme d'intérêt.
Du coup, ce LS va vous permettre d'afficher les Widgets de votre forum FA dans un onglet à ouvrir, à gauche du forum. Vous verrez en fin de LS comment le modifier pour afficher les Widgets à droite.

Exemple en images :




L'installation de ce code nécessite l'accès et la modification des Templates, et donc l'utilisation du compte fondateur.
Ce LS est prévu pour la version phpBB2.


Afficher les Widgets



Il faut bien sûr commencer par aller activer les Widgets. Pour cela allez dans l'onglet "Modules" de votre Panneau d'administration. Dans la première partie de liens de la colonne de gauche, dans "Portail & Widgets", cliquez sur "Gestion des Widgets du forum".
Pour "Afficher les widgets du forum" mettez bien sûr "oui".
Le LS utilise les widgets de gauche, dans un premier temps, donc mettez 200 dans la largeur du widget gauche et laissez 0 dans celui de droite.
Enregistrez.
Sur la même page pensez ensuite à personnaliser les widgets que vous souhaitez voir apparaitre. Vous avez tout les widgets FA en bas, il suffit de cliquer sur l'un, maintenir le clic et le faire glisser dans la colonne de gauche sur le schéma au-dessus. Pensez bien à enregistrer à chaque fois !

Vous pouvez modifier certains widgets indépendamment en cliquant sur Tag css3 sur Never Utopia - graphisme, codage et game design Editer, ce n'est pas possible pour tous cependant. Vous pouvez par contre modifier les permissions, c'est à dire le statut permettant de voir le widget (invité, membre, modérateur, etc...).
Vous avez également la possibilité de créer vos widgets personnalisés !



Modification du template



Afin de pouvoir inclure proprement le bouton d'ouverture et de fermeture du widget nous allons devoir modifier le template "haut de page", ou "overall_header" de son autre nom.
Voici tout d'abord tout le template, pour ceux qui ne l'auraient pas modifié et souhaiteraient juste un copier/coller :

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
   <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
   <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
   <meta http-equiv="content-script-type" content="text/javascript" />
   <meta http-equiv="content-style-type" content="text/css" />
   <!-- BEGIN switch_compat_meta -->
   <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
   <!-- END switch_compat_meta -->
   <!-- BEGIN switch_canonical_url -->
   <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
   <!-- END switch_canonical_url -->
   {META_FAVICO}
   {META}
   {META_FB_LIKE}
   <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
   {T_HEAD_STYLESHEET}
   {CSS}
   <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
   <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
   <script src="{JQUERY_PATH}" type="text/javascript"></script>
   <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>

   <!-- BEGIN switch_fb_login -->
   <script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
   <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
   <!-- END switch_fb_login -->

   <!-- BEGIN switch_ticker -->
   <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />
   <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
   <!-- END switch_ticker -->

   <!-- BEGIN switch_ticker_new -->
   <script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
   <script type="text/javascript">//<![CDATA[
      /* Definir le sens de direction en fonction du panneau admin */
      var tickerDirParam = "{switch_ticker.DIRECTION}";
      var slid_vert = false;
      var auto_dir = 'next';
      var h_perso = parseInt({switch_ticker.HEIGHT});

      switch( tickerDirParam )
      {
         case 'top' :
            slid_vert = true;
            break;

         case 'left':
            break;

         case 'bottom':
            slid_vert = true;
            auto_dir = 'prev';
            break;

         case 'right':
            auto_dir = 'prev';
            break;

         default:
            slid_vert = true;
      }

      $(document).ready(function() {
         var w_cont = $('#fa_ticker_container').width();

         if (w_cont > 0)
         {
            $('#fa_ticker_container').width(w_cont);

            /* Affichage de la liste */
            $('#fa_ticker_content').css('display','block');

            /* Calcul des dimensions du conteneur et des elements */
            var width_max = $('ul#fa_ticker_content').width();
            var width_item = Math.floor(width_max / {switch_ticker.SIZE});
            var height_max = h_perso;

            /* Calcul de la hauteur maximale du conteneur en fonction des elements et de la hauteur personnalisee dans l'admin */
            $('ul#fa_ticker_content li').each( function () {
               if ($(this).height() > height_max)
               {
                  height_max = $(this).height();
               }
            } );

            /* Redimensionnement des elements et des images trop larges */
            $('ul#fa_ticker_content li').width(width_item).height(height_max).find('img').each(function () {
               if ($(this).width() > width_item)
               {
               var ratio      = $(this).width() / width_item;
               var new_height = Math.round($(this).height() / ratio);
               $(this).height(new_height).width(width_item);
               }
            });

            /* Redimensionnement et centrage du conteneur en mode vertical */
            if (slid_vert)
            {
               $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
            }

            /* Initialisation du caroussel */
            $('#fa_ticker_content').jcarousel({
                  vertical: slid_vert,
               wrap: 'circular',
               auto: {switch_ticker.STOP_TIME},
               auto_direction: auto_dir,
            scroll: 1,
            size: {switch_ticker.SIZE},
            height_max: height_max,
            animation: {switch_ticker.SPEED}
            });
         }
         else
         {
            $('ul#fa_ticker_content li:not(:first)').css('display','none');
            $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
         }
      });
   //]]>
   </script>
   <!-- END switch_ticker_new -->

   <script type="text/javascript">//<![CDATA[
   $(document).ready(function(){
      <!-- BEGIN switch_enable_pm_popup -->
         pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
         if(pm != null) { pm.focus(); }
      <!-- END switch_enable_pm_popup -->
      <!-- BEGIN switch_report_popup -->
         report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
         if(report != null) { report.focus(); }
      <!-- END switch_report_popup -->
      <!-- BEGIN switch_ticker -->
         $(document).ready(function() {            
            Ticker.start({
               height : {switch_ticker.HEIGHT},
               spacing : {switch_ticker.SPACING},
               speed : {switch_ticker.SPEED},
               direction : '{switch_ticker.DIRECTION}',
               pause : {switch_ticker.STOP_TIME}
            });
         });
      <!-- END switch_ticker -->
   });

   <!-- BEGIN switch_login_popup -->
      var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
   <!-- END switch_login_popup -->

   <!-- BEGIN switch_login_popup -->
   $(document).ready( function() {
      $(window).resize(function() {
         var windowWidth = document.documentElement.clientWidth;
         var popupWidth = $("#login_popup").width();
         var mypopup = $("#login_popup");

         $("#login_popup").css({
         "left": windowWidth/2 - popupWidth/2
            });
      });
   });
   <!-- END switch_login_popup -->
   //]]>
   </script>
   {GREETING_POPUP}
   <!-- BEGIN switch_ticker_new -->
   <style>
   .jcarousel-skin-tango .jcarousel-item {
      text-align:center;
      width: 10px;
   }

   .jcarousel-skin-tango .jcarousel-item-horizontal {
      margin-right: {switch_ticker.SPACING}px;
   }

   .jcarousel-skin-tango .jcarousel-item-vertical {
      margin-bottom: {switch_ticker.SPACING}px;
   }
   </style>
   <!-- END switch_ticker_new -->
   {HOSTING_JS}
   <!-- BEGIN google_analytics_code -->
   <script type="text/javascript">
   //<![CDATA[
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
    _gaq.push(['_trackPageview']);
   _gaq.push(['_trackPageLoadTime']);

   <!-- BEGIN google_analytics_code_bis -->
   _gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
   _gaq.push(['b._trackPageview']);
   <!-- END google_analytics_code_bis -->

    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
   //]]>
   </script>
   <!-- END google_analytics_code -->
</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
   <!-- BEGIN hitskin_preview -->
   <div id="hitskin_preview" style="display: block;">
      <h1><img src="http://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> Hit<em>skin</em>.com</h1>
      <div class="content">
         <p>
            {hitskin_preview.L_THEME_SITE_PREVIEW}
            <br />
            <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
         </p>
      </div>
   </div>
   <!-- END hitskin_preview -->

   <!-- BEGIN switch_login_popup -->
   <div id="login_popup">
      <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0">
         <tr height="25">
            <td class="catLeft">
               <span class="genmed module-title">{SITENAME}</span>
            </td>
         </tr>
         <tr height="{LOGIN_POPUP_MSG_HEIGHT}">
            <td class="row1" align="left" valign="top">
               <div id="login_popup_buttons">
                  <form action="{S_LOGIN_ACTION}" method="get">
                     <input type="submit" class="mainoption" value="{L_LOGIN}" />
                     <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
                     <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
                  </form>
               </div>
               <span class="genmed">{LOGIN_POPUP_MSG}</span>
            </td>
         </tr>
      </table>
   </div>
   <!-- END switch_login_popup -->

   <a name="top"></a>
   {JAVASCRIPT}
 
  <div id="open">

   <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
      <tr>
         <td class="bodyline">
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
               <tr>
                  <!-- BEGIN switch_logo_left -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_left -->
                  <td align="center" width="100%" valign="middle">
                     <!-- BEGIN switch_logo_center -->
                     <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                     <br />
                     <!-- END switch_logo_center -->
                     <div class="maintitle">{MAIN_SITENAME}</div>
                     <br />
                     <span class="gen">{SITE_DESCRIPTION}<br />  </span>
                  </td>
                  <!-- BEGIN switch_logo_right -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_right -->
               </tr>
            </table>

            <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
               <tr>
                  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
               </tr>
            </table>

            <div style="clear: both;"></div>

            <!-- BEGIN switch_ticker_new -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
               <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                     <td align="left" class="row1">
                        <div id="fa_ticker_container">
                           <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">
                              <!-- BEGIN ticker_row -->
                              <li>{switch_ticker.ticker_row.ELEMENT}</li>
                              <!-- END ticker_row -->
                           </ul>
                        </div>
                     </td>
                  </tr>
               </table>
            </div>
            <!-- END switch_ticker_new -->

            <!-- BEGIN switch_ticker -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
               <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                     <td align="left" class="row1">
                        <div id="fa_ticker_container">
                           <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                              <div class="fa_ticker_content">
                                 <!-- BEGIN ticker_row -->
                                 <div>{switch_ticker.ticker_row.ELEMENT}</div>
                                 <!-- END ticker_row -->
                              </div>
                           </div>
                        </div>
                     </td>
                  </tr>
               </table>
            </div>
            <!-- END switch_ticker -->

            <div id="page-body">
               <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
                  <table cellpadding="0" cellspacing="0" width="100%" class="three-col">
                     <tbody>
                        <tr>
                           <td valign="top" width="{C1SIZE}">
                                                                          <div class="button_widgets">
                                                                            <a href="#open" class="open"></a>
                                                                            <a href="#close" class="close"></a>
                                                                            </div>
                              <div id="{ID_LEFT}">
                                 <!-- BEGIN giefmod_index1 -->
                                 {giefmod_index1.MODVAR}
                                    <!-- BEGIN saut -->
                                    <div style="height:{SPACE_ROW}px"></div>
                                    <!-- END saut -->
                                 <!-- END giefmod_index1 -->
                              </div>
                           </td>
                           <td valign="top" width="100%">
<!-- BEGIN html_validation -->
                           </td>
                        </tr>
                     </tbody>
                  </table>
               </div>
            </div>
         </td>
      </tr>
   </table>
</div>
</body>
</html>
<!-- END html_validation -->


Pour ceux qui ont déjà modifié le template pour autre chose, vous devez simplement réaliser les modifications que je vais vous donner ci-dessous. Cela vous permettra de ne pas perdre vos précédentes modif'.
Au passage, je signale que je donne le numéro des lignes selon le template de base, si vous l'avez déjà modifié ces numéros risquent d'avoir changé.


Ligne 249, juste après ce code :
Code:
<a name="top"></a>
   {JAVASCRIPT}

Ajoutez celui-ci :
Code:
<div id="open">


Ligne 345, juste avant la fermeture du body, donc juste avant ceci :
Code:
</body>
</html>
<!-- END html_validation -->

Ajoutez ça :
Code:
</div>


Pour finir, ligne 325, repérez ce code-là (qui est le code d'affichage des Widgets) :
Code:
<div id="{ID_LEFT}">
         <!-- BEGIN giefmod_index1 -->
            {giefmod_index1.MODVAR}
               <!-- BEGIN saut -->
               <div style="height:{SPACE_ROW}px"></div>
               <!-- END saut -->
         <!-- END giefmod_index1 -->
</div>

Et ajoutez juste avant lui ce code :
Code:
<div class="button_widgets">
 <a href="#open" class="open"></a>
 <a href="#close" class="close"></a>
 </div>


N'oubliez pas de valider votre template.


Le CSS



Code:
/* WIDGETS */

#left /* changer par right pour le widget de droite */
{
  position: fixed;
  top: 0;
  left: 0; /* changer par right pour le widget de droite */
  width: 235px !important;
  height: 100%;
  overflow: auto;
  border-right: 20px solid #ae3e2c; /* changer la couleur bordure - changer par border-left pour le widget de droite */
  margin-left: -235px; /* changer par margin-right pour le widget de droite */
  -webkit-transition: 1s;
  transition: 1s;
}
.button_widgets
{
  position: fixed;
  z-index: 999;
  top: 50%;
  left: 0; /* changer par right pour le widget de droite */
  margin-top: -30px;
  margin-left: 0px; /* changer par margin-right pour le widget de droite */
  width: 60px;
  height: 150px;
  background: white; /* mettre ici image du bouton - taille ci-dessus 60par150 */
  -webkit-transition: 1s;
  transition: 1s;
}
.button_widgets a
{
  display: block;
  width: 100%;
  height: 100%;
}
.button_widgets .close
{
  display: none;
/* si vous voulez une autre image pour le close la mettre ici en background - meme taille que image de fond bouton */
}
#open:target #left /* changer par juste left par right pour le widget de droite */
{
  margin-left: 0px; /* changer par margin-right pour le widget de droite */
  -webkit-transition: 1s;
  transition: 1s;
}
#open:target .button_widgets
{
  margin-left: 235px; /* changer par margin-right pour le widget de droite */
  -webkit-transition: 1s;
  transition: 1s;
}
#open:target .close
{
  display: block;
}
#open:target .open
{
  display: none;
}



Modifications



Image bouton - vous devez mettre une image de 60*150px pour votre bouton. Cette image est la même pour ouvrir et fermer, mais si vous souhaitez une image différente pour fermer vous devrez mettre une image en fond dans le bloc ".button_widgets .close", qui soit de la même taille que votre image onglet. Attention car l'image sera par dessus l'autre, donc si elle a de la transparence on risque de voir celle de base.
Si vous voulez du coup un bouton différent pour les deux avec transparence, le plus simple est d'enlever le fond de ".button_widgets" et mettre vos deux images en fond dans : ".button_widgets .open" (que vous devrez ajouter), et ".button_widgets .close", pour respectivement le bouton ouvrir et fermer.

Widgets à droite - si vous souhaitez utiliser ce système pour des widgets à droite, il vous faut tout d'abord activer vos widgets, bien placer vos éléments voulus dans la colonne de droite et indiquer 200px en largeur pour la colonne de droite et 0px pour celle de gauche. Puis, toutes les annotations CSS vont vous aider à modifier le code pour remplacer les "left" par "right" là où il faut, y compris pour les marges.

Widgets gauche ET droite - pour utiliser les deux côtés d'onglets, vous devez donc tout d'abord les activer tout les deux. Puis, là où vous avez mis une ouverture de bloc div id="open" ous devrez ajouter une seconde fois ce code en renommant le bloc, avec "open2" par exemple. Pensez également à mettre une seconde fois la fermeture du bloc en bas, là où vous avez ajouté "/div", il faut qu'il y soit deux fois.
Vous devez également mettre deux fois le code des boutons dans le template (le dernier donné), en changeant les noms là-aussi.
Il vous faut ensuite mettre le CSS de l'onglet gauche, puis une seconde fois ce CSS avec les modifications expliquées pour l'onglet droit.
Attention : dans le CSS de l'onglet droit pensez bien à remplacer le #open:target par un open2, de la même façon, si vous voulez des images de bouton différentes vous devrez les mettre en fond dans les blocs respectifs.


Si vous utilisez ce LS, modifié ou non, merci de mettre un Crédit à Never-Utopia en guise de remerciement Wink

Onyx

Les filtres (CSS3) - Jeu 4 Sep 2014 - 6:21




Tuto - Les filtres (CSS3)


Certains auront peut-être vu le tutoriel d'Alzufen sur comment faire passer une image "noir et blanc" à "couleur" ou ce tutoriel de Sparrow-Style sur l'opacité. Les filtres sont une nouveauté du CSS3 qui appliquent un certain filtre sur une image et peuvent être utilisés pour parvenir aux mêmes résultats que dans ces deux tutoriels. Il existe 10 filtres différents et ce tuto vous permettra d'apprendre à les connaître et les utiliser.

Voici ce que ce tutoriel va contenir :
  • 1. Ce qu'est un filtre et comment s'en servir?
  • 2. Greyscale => Échelle de noir et blanc
  • 3. Blur => Flou
  • 4. Saturate => Saturation
  • 5. Sepia
  • 6. Hue Rotate => Roue des couleurs/teintes
  • 7. Invert => Invertion
  • 8. Brightness => Luminosité
  • 9. Contrast => Contraste
  • 10. Opacity => Opacité
  • 11. Drop Shadow
  • 12. Comment faire pour que l'effet soit progressif?
  • 13. Comment additionner plusieurs filtres

À noter que les filtres fonctionnent avec Chrome, Opéra et Firefox, sauf l'opacité qui est supporté partout.




1. Les filtres (Ce que c'est)


C'est quoi exactement un filtre?
Dites-moi, si vous mettez une paire de lunettes roses, qu'est-ce que vous verrez? Et bien vous verrez la même chose que normalement, mais en rose. Et plus la teinte de vos lunettes sera forte, plus ce que vous verrez semblera rose.
Un filtre fonctionne de la même façon! En appliquant un filtre sur une image, c'est comme de mettre un calque invisible avec un effet spécial sur l'image. Plus vous intensifierez le filtre, plus l'image sera affectée par l'effet spécial.

Mais plus encore, quand on parle de codage, c'est quoi un filtre?
C'est simplement une propriété CSS à laquelle on donne une valeur pour déterminer l'intensité du filtre.

Et comment on l'utilise?
La première des choses est de mettre une image à l'endroit que l'on veut. Après tout, les filtres ne s'appliquent que sur les images. Nous allons donc mettre une image avec une class. Cela donnerait donc :
Code:
<img class="nom_de_la_class" src="url_de_l'image" />


Ensuite, on met le filtre comme une propriété normale dans le CSS. On commence par mettre la propriété "filter" qui indique qu'il y a un filtre. Puis, on détermine un "type" qui nous indique quel effet de filtre est utilisé. Ensuite, entre parenthèses, on indique la valeur qui détermine l'intensité du filtre. Nous aurons donc ceci :
Code:
.nom_de_la_class {
  -webkit-filter: type(valeur);
  filter: type(valeur);
}



2. Greyscale (Noir et blanc)


Premièrement, à quoi sert le filtre Greyscale? Eh bien ce filtre va convertir votre image en nuances de gris (noir et blanc). D'ailleurs, voici un exemple :

L'image n'est plus hébergée, contactez Onyx SVP

Oh, et comment on fait pour déterminer si le filtre est là, pas là ou à moitié là?
> Par défaut, l'image a une valeur de "0", à savoir qu'aucun filtre n'est appliqué et que l'image est en "couleurs".
> La valeur maximale est de "1", à savoir que l'image est complètement en noir et blanc.
> En choisissant une valeur entre "0" et "1", l'image sera de plus en plus dans des tons de noir et blanc au fur et à mesure qu'on se rapproche du "1".

Et comment j'ai fait pour l'appliquer sur mon image dans l'exemple?
1. Eh bien j'ai commencé par mettre une image à l'endroit que je veux en lui donnant une "class".
2. Dans mon CSS, j'ai mis la class de mon image en lui donnant la propriété "filter: grayscale(1);" pour y mettre le filtre en noir et blanc au maximum.
3. Dans mon CSS, j'ai mis la class de mon image avec un "hover" avec la propriété "filter: grayscale(0);" pour qu'au survol, le filtre se dissipe et que l'image apparaisse en couleurs.

Exemple :
Code:
.nom_de_la_class {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}

.nom_de_la_class:hover {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}



3. Blur (Flou)


Premièrement, à quoi sert le filtre Blur? Eh bien ce filtre va mettre un flou sur votre image. D'ailleurs, voici un exemple :

L'image n'est plus hébergée, contactez Onyx SVP

Oh, et comment on fait pour déterminer si le filtre est là, pas là ou à moitié là?
> Par défaut, l'image a une valeur de "0", à savoir qu'aucun filtre n'est appliqué et que l'image reste nette
> Plus on choisit une valeur en px élevée, plus le filtre est appliqué fortement.

Et comment j'ai fait pour l'appliquer sur mon image dans l'exemple?
1. Eh bien j'ai commencé par mettre une image à l'endroit que je veux en lui donnant une "class".
2. Dans mon CSS, j'ai mis la class de mon image en lui donnant la propriété "filter: blur(1px);" pour y mettre le filtre qui rend l'image floue de 1px.
3. Dans mon CSS, j'ai mis la class de mon image avec un "hover" avec la propriété "filter: blur(0);" pour qu'au survol, le filtre se dissipe et que l'image apparaisse sans flou.

Exemple :
Code:
.nom_de_la_class {
  -webkit-filter: blur(1px);
  filter: blur(1px);
}

.nom_de_la_class:hover {
  -webkit-filter: blur(0);
  filter: blur(0);
}



4. Saturate (Saturation)


Premièrement, à quoi sert le filtre Saturate? Eh bien ce filtre va servir à augmenter ou diminuer la saturation de votre image. D'ailleurs, voici un exemple :

L'image n'est plus hébergée, contactez Onyx SVP

Oh, et comment on fait pour déterminer si le filtre est là, pas là ou à moitié là?
> Par défaut, l'image a une valeur de "1", à savoir que la saturation est normale.
> En mettant une valeur de "0", l'image n'aura plus aucune saturation et apparaîtra en noir et blanc.
> Plus on choisit une valeur élevée au-delà de "1", plus l'image sera saturée.

Et comment j'ai fait pour l'appliquer sur mon image dans l'exemple?
1. Eh bien j'ai commencé par mettre une image à l'endroit que je veux en lui donnant une "class".
2. Dans mon CSS, j'ai mis la class de mon image en lui donnant la propriété "filter: saturate(3);" pour augmenter la saturation à 300%.
3. Dans mon CSS, j'ai mis la class de mon image avec un "hover" avec la propriété "filter: saturate(1);" pour qu'au survol, le filtre se dissipe et que l'image reprenne sa saturation normale.

Exemple :
Code:
.nom_de_la_class {
  -webkit-filter: saturate(3);
  filter: saturate(3);
}

.nom_de_la_class:hover {
  -webkit-filter: saturate(1);
  filter: saturate(1);
}



5. Sepia


Premièrement, à quoi sert le filtre Sepia? Eh bien ce filtre va mettre un filtre qui fait ressembler votre image à une vieille photographie. D'ailleurs, voici un exemple :

L'image n'est plus hébergée, contactez Onyx SVP

Oh, et comment on fait pour déterminer si le filtre est là, pas là ou à moitié là?
> Par défaut, l'image a une valeur de sepia de "0", à savoir qu'aucun filtre n'est appliqué et que l'image a ses couleurs normales.
> La valeur maximale est de "1", à savoir que l'image ressemble complètement à une vieille photographie.
> En choisissant une valeur entre "0" et "1", l'image sera de plus en plus semblable à une vieille photographie au fur et à mesure qu'on se rapproche du "1".

Et comment j'ai fait pour l'appliquer sur mon image dans l'exemple?
1. Eh bien j'ai commencé par mettre une image à l'endroit que je veux en lui donnant une "class".
2. Dans mon CSS, j'ai mis la class de mon image en lui donnant la propriété "filter: sepia(1);" pour que l'image ressemble à une vieille photographie.
3. Dans mon CSS, j'ai mis la class de mon image avec un "hover" avec la propriété "filter: sepia(0);" pour qu'au survol, le filtre se dissipe et que l'image reprenne ses couleurs normales.

Exemple :
Code:
.nom_de_la_class {
  -webkit-filter: sepia(1);
  filter: sepia(1);
}

.nom_de_la_class:hover {
  -webkit-filter: sepia(0);
  filter: sepia(0);
}



6. Hue Rotate (Roue de couleurs)


Premièrement, à quoi sert le filtre Hue Rotate? C'est un peu plus dur à expliquer... Si on pense à une roue de couleurs, notre image de base est sur un point de cette roue. En changeant la valeur de Hue Rotate, nous allons modifier les couleurs de l'image Voici un exemple pour illustrer un peu mieux :

L'image n'est plus hébergée, contactez Onyx SVP

Oh, et comment on fait pour déterminer si le filtre est là, pas là ou à moitié là?
> Par défaut, l'image est à "0deg" de la roue.
> Une valeur à "360deg" nous ramène au point de départ sur la roue.
> Il est possible de mettre une valeur entre "0deg" et "360deg" et les couleurs de l'image sont affectés selon l'angle de la roue. Il est dur de voir avec exactitude quel couleur cela nous donnera, alors il est mieux de fonctionner par essai/erreur.

Et comment j'ai fait pour l'appliquer sur mon image dans l'exemple?
1. Eh bien j'ai commencé par mettre une image à l'endroit que je veux en lui donnant une "class".
2. Dans mon CSS, j'ai mis la class de mon image en lui donnant la propriété "filter: hue-rotate(270deg);" pour mettre mon image au 270ème degré de couleur sur la roue des couleurs.
3. Dans mon CSS, j'ai mis la class de mon image avec un "hover" avec la propriété "filter: rotate(0deg);" pour qu'au survol, le filtre se dissipe et que l'image reprenne ses couleurs normales.

Exemple :
Code:
.nom_de_la_class {
  -webkit-filter: hue-rotate(270deg);
  filter: hue-rotate(270deg);
}

.nom_de_la_class:hover {
  -webkit-filter: hue-rotate(0deg);
  filter: hue-rotate(0deg);
}


Petit détail relativement important
Je sais que certains ont tendance à ne pas mettre les "px" ou les "deg" quand la valeur est de 0.
Or, si vous ne mettez pas le "deg" à 0 pour ce filtre, firefox ne le prend pas en considération.
Du coup, assurez-vous de mettre "hue-rotate(0deg)" et non "hue-rotate(0)".
Et en même temps, si vous pouviez essayer de prendre l'habitude de toujours mettre vos "deg" et "px", ce serait parfait puisque c'est la bonne façon de faire ^^



7. Invert


Premièrement, à quoi sert le filtre Invert? Eh bien ce filtre va servir mettre un filtre qui inverse les couleurs et teintes de l'image. Le vert devient rouge, le mauve devient jaune, le orange devient bleu, les couleurs foncées deviennent pâles, le blanc devient noir, etc. D'ailleurs, voici un exemple :

L'image n'est plus hébergée, contactez Onyx SVP

Oh, et comment on fait pour déterminer si le filtre est là, pas là ou à moitié là?
> Par défaut, l'image a une valeur de "0", à savoir qu'aucun filtre n'est appliqué et que l'image a son apparence normale.
> La valeur maximale est de "1", à savoir que les teintes et couleurs de l'image sont complètement inversées.
> En choisissant une valeur entre "0" et "1", les couleurs et teintes de l'image seront de plus en plus inversées au fur et à mesure qu'on se rapproche du "1".

Et comment j'ai fait pour l'appliquer sur mon image dans l'exemple?
1. Eh bien j'ai commencé par mettre une image à l'endroit que je veux en lui donnant une "class".
2. Dans mon CSS, j'ai mis la class de mon image en lui donnant la propriété "filter: invert(1);" pour que les teintes et couleurs de l'image soient inversées.
3. Dans mon CSS, j'ai mis la class de mon image avec un "hover" avec la propriété "filter: invert(0);" pour qu'au survol, le filtre se dissipe et que l'image reprenne son apparence normale.

Exemple :
Code:
.nom_de_la_class {
  -webkit-filter: invert(1);
  filter: invert(1);
}

.nom_de_la_class:hover {
  -webkit-filter: invert(0);
  filter: invert(0);
}



8. Brightness (Luminosité)


Premièrement, à quoi sert le filtre Brightness? Eh bien ce filtre va servir à augmenter ou diminuer la luminosité de votre image. D'ailleurs, voici un exemple :

L'image n'est plus hébergée, contactez Onyx SVP

Oh, et comment on fait pour déterminer si le filtre est là, pas là ou à moitié là?
> Par défaut, l'image a une valeur de "1", à savoir que la luminosité est normale.
> En mettant une valeur de "0", l'image n'aura plus aucune luminosité et sera complètement noire.
> Plus on choisit une valeur élevée au-delà de "1", plus l'image sera lumineuse.

Et comment j'ai fait pour l'appliquer sur mon image dans l'exemple?
1. Eh bien j'ai commencer par mettre une image à l'endroit que je veux en lui donnant une "class".
2. Dans mon CSS, j'ai mis la class de mon image en lui donnant la propriété "filter: brightness(2);" pour augmenter ma luminosité à 200%.
3. Dans mon CSS, j'ai mis la class de mon image avec un "hover" avec la propriété "filter: brightness(1);" pour qu'au survol, le filtre se dissipe et que l'image reprenne sa luminosité normale.

Exemple :
Code:
.nom_de_la_class {
  -webkit-filter: brightness(2);
  filter: brightness(2);
}

.nom_de_la_class:hover {
  -webkit-filter: brightness(1);
  filter: brightness(1);
}



9. Contrast (Contraste)


Premièrement, à quoi sert le filtre Contrast? Eh bien ce filtre va servir à augmenter ou diminuer le contraste de votre image. D'ailleurs, voici un exemple :

L'image n'est plus hébergée, contactez Onyx SVP

Oh, et comment on fait pour déterminer si le filtre est là, pas là ou à moitié là?
> Par défaut, l'image a une valeur de "1", à savoir que le contraste est normal.
> En mettant une valeur de "0", l'image n'aura plus aucun contraste et sera complètement gris.
> Plus on choisit une valeur élevée au-delà de "1", plus l'image sera contrastée.

Et comment j'ai fait pour l'appliquer sur mon image dans l'exemple?
1. Eh bien j'ai commencé par mettre une image à l'endroit que je veux en lui donnant une "class".
2. Dans mon CSS, j'ai mis la class de mon image en lui donnant la propriété "filter: contrast(2);" pour augmenter mon contraste à 200%.
3. Dans mon CSS, j'ai mis la class de mon image avec un "hover" avec la propriété "filter: contrast(1);" pour qu'au survol, le filtre se dissipe et que l'image reprenne son contraste normal à 100%.

Exemple :
Code:
.nom_de_la_class {
  -webkit-filter: contrast(2);
  filter: contrast(2);
}

.nom_de_la_class:hover {
  -webkit-filter: contrast(1);
  filter: contrast(1);
}



10. Opacity (Opacité)


Premièrement, à quoi sert le filtre Opacity? Eh bien ce filtre va servir à augmenter ou diminuer l'opacité de votre image. D'ailleurs, voici un exemple :

L'image n'est plus hébergée, contactez Onyx SVP

Ce filtre est l'exception qui confirme la règle :
Il fonctionne sur tous les navigateurs !
Il peut être utilisé sur d'autres choses que des images (sur des divs par exemple) !
La propriété qu'on met dans le CSS n'a pas le même format que les autres filtres. Vous en verrez un exemple plus bas.

Oh, et comment on fait pour déterminer si le filtre est là, pas là ou à moitié là?
> Par défaut, l'image a une valeur de "1", à savoir que l'image a son opacity normale.
> En mettant une valeur de "0", l'image n'aura plus aucune opacité et sera transparente.
> En choisissant une valeur entre "0" et "1", l'image sera de plus en plus transparente au fur et à mesure qu'on se rapproche du "0".

Et comment j'ai fait pour l'appliquer sur mon image dans l'exemple?
1. Eh bien j'ai commencé par mettre une image à l'endroit que je veux en lui donnant une "class".
2. Dans mon CSS, j'ai mis la class de mon image en lui donnant la propriété "opacity: 0.5;" pour rendre mon image transparente à 50%.
3. Dans mon CSS, j'ai mis la class de mon image avec un "hover" avec la propriété "opacity: 1;" pour qu'au survol, le filtre se dissipe et que l'image reprenne son opacité normale.

Exemple :
Code:
.nom_de_la_class {
  opacity: 0.5;
}

.nom_de_la_class:hover {
  opacity: 1;
}


Hé, mais c'est différent des autres! Pourquoi c'est différent?
Oui oui, j'y venais ^^
Comme ce filtre s'applique ailleurs que sur des images et est plutôt assez utilisé, tous les navigateurs l'ont intégré, sans passer par un filtre normal.
Du coup, à la place du format habituel qui est "filter: type(valeur)", on a simplement "type : valeur".
Cela fonctionne pour Firefox, Safari, Internet Explorer, Chrome et Opéra.




11. Drop-Shadow


Premièrement, à quoi sert le filtre Drop-Shadow? Eh bien, est-ce que vous êtes familiers avec le Box-Shadow? Là où on peut mettre une ombre autour d'une image (ou div)? Eh bien quand on utilise le Box-Shadow sur une image png, cela fait un ombre autour du cadre de l'image. Le Drop-Shadow, lui, sera capable de faire la différence entre le "vide" de l'image et le "contenu" de l'image pour mettre l'ombre juste sur le vrai contenu de l'image.

D'ailleurs, voici un exemple Box-Shadow vs Drop-Shadow :

L'image n'est plus hébergée, contactez Onyx SVP L'image n'est plus hébergée, contactez Onyx SVP


Ça n'a pas l'air d'être des valeurs comme les autres... Cela fonctionne comment?
> Il y a comme d'habitude le "filter" qui est la propriété.
> Ensuite, on a encore le "drop-shadow" qui est le type.
> Dans la valeur entre parenthèse, le premier "#px" correspond au décalage de l'ombre vers le droite.
> Dans la valeur entre parenthèse, le deuxième"#px" correspond au décalage de l'ombre vers le bas.
> Dans la valeur entre parenthèse, le troisième "#px" correspond au flou de l'ombre.
> Dans la valeur entre parenthèse, la couleur à la fin correspond à la couleur de l'ombre.
=> Cela donne "filter: drop-shadow(#px #px #px couleur)"

Et comment j'ai fait pour l'appliquer sur mon image dans l'exemple?
1. Eh bien j'ai commencé par mettre une image à l'endroit que je veux en lui donnant une "class".
2. Dans mon CSS, j'ai mis la class de mon image en lui donnant la propriété "filter: drop-shadow(5px 5px 2px #545454);" pour mettre une ombre de 5px sur la gauche, de 5px vers le bas, d'un flou de 2px et de couleur #545454.
3. Dans mon CSS, j'ai mis la class de mon image avec un "hover" en lui donnant la propriété "filter: drop-shadow(8px 8px 3px #545454);" changer pour que l'ombre soit de 8px sur la gauche, de 8px vers le bas, d'un flou de 3px et de couleur #545454.

Exemple :
Code:
.nom_de_la_class {
  -webkit-filter: drop-shadow(5px 5px 2px #545454);
  filter: drop-shadow(5px 5px 2px #545454);
}

.nom_de_la_class:hover {
  -webkit-filter: drop-shadow(8px 8px 3px #545454);
  filter: drop-shadow(8px 8px 3px #545454);
}



12. Faire un effet progressif


Vous savez maintenant comment utiliser les 10 types de filtres. Vous savez même comment mettre un effet différent lorsqu'on survole l'image à l'aide de la pseudo-class "hover".

Mais comment je fais si je veux que l'effet soit progressif quand je survole l'image?
> Nous allons rajouter la propriété "transition" à la class de notre image dans notre CSS.
> La propriété transition se décompose comme ceci : "transition: #s;".
> Nous avons donc la propriété "transition", puis la valeur en secondes qui indiquent la durée de la transition.

Prenons mon premier filtre comme exemple, à savoir celui Greyscale. Nous avons actuellement le code suivant :
Code:
.nom_de_la_class {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}

.nom_de_la_class:hover {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}



Pour que l'effet soit progressif, on va rajouter la propriété transition comme ceci "transition: 1s;" pour que la durée de la transition soit de 1 seconde. Pour mettre ½ seconde, on aurait mis "transition: 0.5s;" et pour mettre 3 secondes on aurait mis "transition: 3s;".

Résultat avec une transition de 1 seconde :
Code:
.nom_de_la_class {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
  -webkit-transition: 1s;
  transition: 1s;
}

.nom_de_la_class:hover {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}



13. Additionner plusieurs filtres


Maintenant qu'on sait comment utiliser les filtres et comment faire pour que l'effet du filtre se fasse de façon progressive, voyons comment appliquer plusieurs filtres à une même image

D'ailleurs, voici un exemple où on additionne les filtres Brightness (Luminosité) et Sepia :

L'image n'est plus hébergée, contactez Onyx SVP


Et comment j'ai fait pour l'appliquer sur mon image dans l'exemple?
1. Eh bien j'ai commencer par mettre une image à l'endroit que je veux en lui donnant une "class".
2. Dans mon CSS, j'ai mis la class de mon image en lui donnant la propriété "filter: brightness(2) sepia(1);" pour augmenter ma luminosité à 200% et pour que l'image ressemble à une vieille photographie.
3. Dans mon CSS, j'ai mis la class de mon image avec un "hover" avec la propriété "filter: brightness(1) sepia(0);" pour qu'au survol, le filtre se dissipe et que l'image reprenne sa luminosité normale et apparence normale.

Comme vous le constatez, dans ma propriété "filter", j'ai séparé les différents "types" (brightness et sepia) avec un simple espace.

Exemple :
Code:
.nom_de_la_class {
  -webkit-filter: brightness(2) sepia(1);
  filter: brightness(2) sepia(1);
}

.nom_de_la_class:hover {
  -webkit-filter: brightness(1) sepia(0);
  filter: brightness(1) sepia(0);
}



C'est simple comme ça?
Oui, c'est tout simplement cela! Il y a une seule exception, soit l'opacité qui se met dans une propriété à part.




Petit exemple avec l'Opacité ajouté en plus de Brightness et Sepia :

L'image n'est plus hébergée, contactez Onyx SVP


Et comment j'ai fait pour l'appliquer sur mon image dans l'exemple?
1. Eh bien j'ai commencer par mettre une image à l'endroit que je veux en lui donnant une "class".
2. Dans mon CSS, j'ai mis la class de mon image en lui donnant la propriété "filter: brightness(2) sepia(1);" pour augmenter ma luminosité à 200% et pour que l'image ressemble à une vieille photographie. J'ai également mis la propriété "opacity: 0.5;" pour baisser l'opacité de mon image à 50%.
3. Dans mon CSS, j'ai mis la class de mon image avec un "hover" avec la propriété "filter: brightness(1) sepia(0);" pour qu'au survol, le filtre se dissipe et que l'image reprenne sa luminosité normale et apparence normale. J'ai également mis la propriété "opacity: 1;" pour remettre l'opacité de mon image à 100%.

Exemple :
Code:
.nom_de_la_class {
  -webkit-filter: brightness(2) sepia(1);
  filter: brightness(2) sepia(1);
  opacity: 0.5;
}

.nom_de_la_class:hover {
  -webkit-filter: brightness(1) sepia(0);
  filter: brightness(1) sepia(0);
  opacity: 1;
}




Conclusion

  • Un filtre est une propriété où un effet est appliqué à une intensité variable sur une image.

  • Son format est "filter: type(valeur);"

  • Il est possible d'utiliser 10 effets différents : Greyscale, Blur, Saturate, Sepia, Hue Rotate, Invert, Brightness, Contrast, Opacity et Drop Shadow.

  • Presque chaque effet a une "échelle de valeurs" différente, alors il faut s'assurer de les consulter avant d'utiliser les filtres.

  • Il est possible de faire un effet progressif à l'aide des transitions.

  • Vous pouvez additionner plusieurs filtres sur une même image selon en les séparant par un espace "filter: type(valeur) type(valeur) type(valeur);"

Voilà, j'espère que cela a pu vous aider. Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans "Un problème avec un tutoriel".

À plus !

Créer des onglets onclick en full CSS3 (ex: fiche de présentation) - Jeu 17 Juil 2014 - 14:58



Onglets en full CSS3



Mais oui je vous bombarde de tutos! Maintenant, un petit tuto qui fait suite à mon tuto sur le slideshow, bien que je vais prendre tous les points dont j'ai parlé dans le tuto des slideshow. Donc pas de panique: je ne vous demande pas d'avoir lu quoi que ce soit avant de lire ce tuto!


Toutes versions ▬ CSS3 & HTML5


Voici une rapide explication de comment le tuto est découpé: tout d'abord, je vais parler du principe général que j'utilise pour faire les onglets, pour vous expliquer rapidement comment ça marche. Ensuite, je passerais par un exemple pour montrer ce qu'on peut faire. Pour ce faire, je vais créer une fiche de présentation, car en effet, contrairement au Javascript qui n'est pas utilisable dans les messages,  le CSS3, lui, l'est! Du coup je découperais la deuxième partie en deux: la première sur le HTML et la seconde sur le CSS!

J'espère que je serais assez claire dans ce tuto, mais en cas de doute, n'hésitez pas à utiliser la section des problèmes en codage!


Le principe général


Comme vous pouvez vous l'imaginer, mon but était ici de créer des ognlets similaires au Javascript, c'est à dire qu'on a pas à chaque fois un "nouveau lien" pour chaque onglet qu'on ouvre, contrairement aux :target. C'est pour ça qu'en écrivant sur le slideshow à l'aide des input et des labels, j'ai vite eu l'idée de l'adapter au principe des onglets.

Le principe est très simple, et pour cela, il faut que je vous explique deux choses: ce qu'est le sélecteur ~ et ce qu'est la pseudo-élément :checked! (Vous retrouverez la même explication dans mon tuto sur le slideshow, mais ici, elle est "en clair" Wink )

Le pseudo-élément :checked
Le pseudo-élément checked est utilisé dans le CSS pour les formulaires, plus particulièrement pour les input de types radios (les petits ronds pour les votes quand vous ne pouvez voter que pour un choix) ou pour les types choix multiples (quand vous pouvez voter pour plusieurs choix). Ici, dans notre tutoriel, nous utiliserons uniquement des input de type radio (car on ne veut qu'un seul onglet à la fois).
En gros, :checked nous permet de voir si un input a été coché ou non. En somme, si nous avons par exemple ceci:
Code:
<input name="fiche" id="physique" type="radio" />

Si dans mon CSS je mets ceci:
Code:
#physique:checked ~ label {
color: white;
}

Cela veut dire que quand physique est coché, alors tout label frère sera blanc.

"Eh!" me direz-vous "mais je sais pas ce que c'est ce  ~ moi!". Bah oui, mais j'y arrive! =P

Cependant, tout ce que vous avez à retenir de :checked, c'est qu'on regarde lequel a été coché (d'input) et on agit en conséquence.


Le sélecteur ~
Ce sélecteur signifie "l'élément frère le plus proche".
Mais qu'est un élément frère? Eh bien ce sont des éléments qui sont "sur la même ligne verticale" ou plutôt, qui ont la même grandeur d'encapsulation. Cependant, même comme ça, ça ne doit pas vous dire grand chose, alors voici des exemples:

Exemple:
Code:
<div id="un">
 <div id="deux">
 </div>
</div>

Ici, un est l'élément père de deux, et deux est l'élément fils de un.
Code:
<div id="un">
</div>
<div id="deux">
</div>

Ici, un est deux sont des éléments frères.

En somme, si votre code est bien indenté, il est facile de voir quels éléments sont des frères/sœurs, et lesquels sont des parents/enfants les uns des autres. En effet, les frères/sœurs seront sur le même niveau, et les parents/enfants seront sur des niveaux différents!
Il est à noter que seul les deux éléments qui entourent le ~ doivent être des frères! On peut bien sûr faire appel à d'autres classes avant pour l'élément à gauche du sélecteur (par exemple si on veut sélectionner une class mais à un endroit spécifique du code, par exemple dans un id spécifique) ou alors plus bas dans la hiérarchie pour celui à droite du sélecteur. Par exemple .hallow #machin p .important ~.livres #chouette marche, tanr que .important (qui est le fils d'un p qui lui-même est le fils de #machin, qui lui-même est le fils de .hallow) est frère de .livres, le code va marcher, et effectivement s'exécuter sur #chouette qui se trouve dans .livres!


Et voilà, maintenant que vous connaissez ces deux petites choses, on peut commencer avec les choses sérieuses!
Tout d'abord, commençons donc avec une div tout simple, qui va entourer tout notre système d'onglets. C'est important, car cela nous permettra de facilement appeler par le CSS les input, si on ne veut pas mettre une class.
Ensuite, nous allons créer autant de input que nous voulons d'onglet, en leur donnant à chacun un id particulier. Je rappelle qu'un id est UNIQUE, donc ne doit pas se trouver ailleurs sur la page!
Pour vous donner un exemple, j'utilise déjà la fiche de présentation que je vais faire plus tard. Pour elle, j'ai cinq onglets, donc cinq input! Ils seront tous de type radio, et auront le même nom: la seule chose qui les différencie est l'id.

Code:
<div class="fiche"><!-- Ceci est donc la div qui va contenir l'ensemble du système d'onglets. -->
<input checked="" name="fiche" id="informations" type="radio" /> <input name="fiche" id="physique" type="radio" /> <input name="fiche" id="caractere" type="radio" /> <input name="fiche" id="histoire" type="radio" /> <input name="fiche" id="ecran" type="radio" />
</div>



Maintenant: tout ce que vous ajoutez, mais surtout tout ce que vous voulez pouvoir change au click sur l'onglet doit se trouver en dessous des input. En effet, grâce au sélecteur que nous avons vu plus tôt, nous pourrons facilement choisir tout et n'importe quoi qui se trouve à la SUITE des input.
Du coup, je vous conseille toujours mettre les input tout en haut de votre conteneur principal d'onglets, le reste, même s'il ne change pas au gré des onglets, pourra être après: ça ne rajoute pas des lignes de CSS, ce n'est pas plus difficile, etc.

Bref, maintenant que nous avons nos input, nous devrions ajouter nos label. Les labels, ce sont les "boutons" qui vont nous permettre d'aller à un onglet à un autre. En effet, lorsqu'un label qui correspond à un input, est cliqué, eh bien c'est comme si on avait coché l'input correspondant. Cela vous rappelle quelque chose? Eh bien oui! C'est ce qui va nous permettre "d’appeler" le :checked dans le CSS!
Pour faire correspondre un lable à n input, il suffit de mettre dans l'attribut "for" du label, l'id de l'input correspondant.
Cependant, pour la pratique, vous devriez mettre tous les labels dans une seule et meme div d'une certaine classe, notamment si vous voulez leur donner à tous ne même allure lorsqu'ils sont actif, non actifs ou au passage de la souris!

Donc niveau code, on aurait ça:

Code:
<div class="fiche">
<input checked="" name="fiche" id="informations" type="radio" /> <input name="fiche" id="physique" type="radio" /> <input name="fiche" id="caractere" type="radio" /> <input name="fiche" id="histoire" type="radio" /> <input name="fiche" id="ecran" type="radio" />
<div class="boutons"><label for="informations" class="lab infos">Infos</label> <label for="physique" class="lab phys">Physique</label> <label for="caractere" class="lab car">Caractère</label> <label for="histoire" class="lab hist">Histoire</label> <label for="ecran" class="lab ecr">Derrière l'écran</label> </div>
</div>


Vous voyez également que je leur ai donné à chacun deux classes (mettre class="lab hist" par exemple, signifie que l'élément est à la fois de la classe lab ET de la classe hist).

Maintenant, il vous suffit de placer tout ce que vous voulez dans vos onglets avant ou même après les label mais toujours après les input. Je vous conseillerais cependant de toujours mettre un div conteneur de tout les trucs changeant dans vos onglets pur facilement leur donner des position, ou des changements globaux, comme la taille, etc.
Pour mon code futur, j'aurais quelque chose comme ça:

Code:
<div class="fiche">
<input checked="" name="fiche" id="informations" type="radio" /> <input name="fiche" id="physique" type="radio" /> <input name="fiche" id="caractere" type="radio" /> <input name="fiche" id="histoire" type="radio" /> <input name="fiche" id="ecran" type="radio" />
<div class="images"><!--  Ici des images qui changeront à chaque onglet --></div>
<div class="boutons"><label for="informations" class="lab infos">Infos</label> <label for="physique" class="lab phys">Physique</label> <label for="caractere" class="lab car">Caractère</label> <label for="histoire" class="lab hist">Histoire</label> <label for="ecran" class="lab ecr">Derrière l'écran</label> </div>
<div class="contenu_onglet"><!--  Ici des div contenant mes contenus (description physique, infos, etc) --></div>
</div>



Maintenant, parlons rapidement du CSS.
Tout d'abord, il faut savoir que les inut ne nous sont utiles à rien "visuellement" parlant. C'est pru cela que la première chose qu'on va faire, c'est de les "cacher" à l'aide d'un display. Cependant, attention de ne pas le faire sur les input seul, mais uniquement sur les input de votre fiche, ou sinon, vous serez incapable de créer des sujets ou envoyer des messages, vu que les boutons envoyer, prévisualiser et les titres sont TOUS des input.
Donc pour l'instant on a ça:

Code:
.fiche input {
  display: none;
}



Maintenant, pour ce qui est de l'effet lors du click du bouton de l'onglet, c'est ici qu'on va utiliser le sélecteur ~ tout comme :checked. Prenons par exemple, si je veux modifier le label "Infos" quand je clique dessus, pour bien indiquer que c'est sur CE label que je suis (comme l'onglet actif en Javascript) il me suffit d'écrir:

Code:
#informations:checked ~ .boutons .lab.infos { color: red; }


Ici, je dis: lorsque l'élément à id informations et coché (checked) alors le plus proche frère de classe boutons, verra son fils de classe lab ET infos modifié ainsi: sa couleur deviendra rouge.

C'est le même principe avec tout! Imaginons que j'ai une image de class="imag infos" que je veux aussi modifier lorsque #informations:checked, alors j'écris:

Code:
#informations:checked ~ .images .imag.infos { opacity: 1; }



Bien sûr, il faudrait de façon optimale qu'à la "base", c'est à dire que quand le label est non-coché, l'élément qui sera modifié (dans nos deux exemples le label d'informations puis l'image d'informations) ait une autre allure, et si possible, tous la même.  On pourrait par exemple penser à une opacité à 0 pour toutes les images quand l'input correspondant n'est pas coché, ou un display: none pour le contenu des onglets. C'est pour cela que les "double classes" sont utiles: dans mon exemple, j'aurais toutes les images qui seront de classe imag, et chacune des images aura une classe supplémentaire différente: infos, phys, car, hist et ecr. Cela me permettra donc de donner une allure générale à toutes mes images en mettant un:

Code:
.fiche .images .imag {
  opacity: 0;
  transition: all ease 1s;
]


Qui me permet de toutes les rendre invisibles, et le code plus haut me permet de les rendre visible seulement quand le on input est coché.

J'espère donc que tout ceci est assez claire: c'est vraiment la base de ce qu'il faut savoir, et si vous avez compris, l'exemple à la suite ne vous sera pas nécessaire. Cependant, si vous n'avez pas très bien compris, j'espère que l'exemple qui va suivre sera assez compréhensible pour que vous puissiez faire par vous même par la suite!


Exemple: faire une fiche de présentation


Pour cette exemple voilà ce que je vais vous montrer comment faire. Comme vous pouvez le voir, les labels sont donc les différentes parties usuelles d'une présentation (Infos, Physique, Caractère, Histoire et Derrière l'écran) et autant le texte interne que l'image du haut change.
Si vous avez bien lu ce qu'il y a plus haut, vous pouvez vous imaginer plus ou moins comment j'ai fait tout ça mais malgré tout, je vais vous expliquer pas à pas!

Le HTML


Rappelez-vous plus haut, j'ai dit que ma base était ceci:

Code:
<div class="fiche"><input checked="" name="fiche" id="informations" type="radio" /> <input name="fiche" id="physique" type="radio" /> <input name="fiche" id="caractere" type="radio" /> <input name="fiche" id="histoire" type="radio" /> <input name="fiche" id="ecran" type="radio" /><div class="images"></div>
<div class="boutons"><label for="informations" class="lab infos">Infos</label> <label for="physique" class="lab phys">Physique</label> <label for="caractere" class="lab car">Caractère</label> <label for="histoire" class="lab hist">Histoire</label> <label for="ecran" class="lab ecr">Derrière l'écran</label> </div>
<div class="boutons"><label for="informations" class="lab infos">Infos</label> <label for="physique" class="lab phys">Physique</label> <label for="caractere" class="lab car">Caractère</label> <label for="histoire" class="lab hist">Histoire</label> <label for="ecran" class="lab ecr">Derrière l'écran</label> </div>
<div class="interne"></div>
</div>

J'ai juste renommé contenu_onglets par interne.

Vu que je veux en faire une fiche de présentation, je vais tout de suite ajouter deux choses: le Nom et Prénom et une petite citation:

Code:
<h1>Prénom Nom</h1>
<div class="citation">« Une jolie petite citation »</div>


Ce qui donne, sachant que je veux mettre le nom sous l'image et qui "empiète" sur l'image:

Code:
<div class="fiche"><input checked="" name="fiche" id="informations" type="radio" /> <input name="fiche" id="physique" type="radio" /> <input name="fiche" id="caractere" type="radio" /> <input name="fiche" id="histoire" type="radio" /> <input name="fiche" id="ecran" type="radio" /><div class="images"></div>
<h1>Prénom Nom</h1>
<div class="citation">« Une jolie petite citation »</div>
<div class="boutons"><label for="informations" class="lab infos">Infos</label> <label for="physique" class="lab phys">Physique</label> <label for="caractere" class="lab car">Caractère</label> <label for="histoire" class="lab hist">Histoire</label> <label for="ecran" class="lab ecr">Derrière l'écran</label> </div>
<div class="boutons"><label for="informations" class="lab infos">Infos</label> <label for="physique" class="lab phys">Physique</label> <label for="caractere" class="lab car">Caractère</label> <label for="histoire" class="lab hist">Histoire</label> <label for="ecran" class="lab ecr">Derrière l'écran</label> </div>
<div class="interne"></div>
</div>



Maintenant, il est temps de rajouter les images. Je vais créer des div avec deux classes, comme expliqué plus haut: la class imag pour chacune d'entre elle, et leur classe qui leur est "propre" qui va me permettre de la changer au gré de boutons.

Code:
<div class="fiche"><input checked="" name="fiche" id="informations" type="radio" /> <input name="fiche" id="physique" type="radio" /> <input name="fiche" id="caractere" type="radio" /> <input name="fiche" id="histoire" type="radio" /> <input name="fiche" id="ecran" type="radio" /><div class="images">
<div class="imag infos" style="background-image: url('http://38.media.tumblr.com/baa66b83079e0cfb94328d9d721b7acc/tumblr_n8ucrv9CWu1taqwcpo5_500.gif');"></div>
<div class="imag phys" style="background-image: url('http://33.media.tumblr.com/6406227aace1b8d25a5c94c4fae05f04/tumblr_n8ucrv9CWu1taqwcpo6_500.gif');"></div>
<div class="imag car" style="background-image: url('http://33.media.tumblr.com/4cba62a69dc06430c78675a25b783669/tumblr_n8ucrv9CWu1taqwcpo9_500.gif');"></div>
<div class="imag hist" style="background-image: url('http://31.media.tumblr.com/22f282d3778e8ec3811cd6c82fa8977f/tumblr_n8ucrv9CWu1taqwcpo8_400.gif');"></div>
<div class="imag ecr" style="background-image: url('http://media.tumblr.com/tumblr_lnmvmtBDbM1qm00hqo1_500.gif');"></div>
</div>
<h1>Prénom Nom</h1>
<div class="citation">« Une jolie petite citation »</div>
<div class="boutons"><label for="informations" class="lab infos">Infos</label> <label for="physique" class="lab phys">Physique</label> <label for="caractere" class="lab car">Caractère</label> <label for="histoire" class="lab hist">Histoire</label> <label for="ecran" class="lab ecr">Derrière l'écran</label> </div>
<div class="boutons"><label for="informations" class="lab infos">Infos</label> <label for="physique" class="lab phys">Physique</label> <label for="caractere" class="lab car">Caractère</label> <label for="histoire" class="lab hist">Histoire</label> <label for="ecran" class="lab ecr">Derrière l'écran</label> </div>
<div class="interne"></div>


Vous remarquerez que j'ai mit tout de suite dans la balise style l'image de fond. De cette façon, les membres pourront changer les images comme bon leur semble. C'est aussi la raison pour laquelle j'ai mit des balises div et non pas des balises img, car on ne sait jamais la taille des images que vont nous donner les membres. Je redimensionne ici la largeur automatiquement dans le CSS, mais je déteste donner une hauteur et une largeur fixe, qui déformerait alors les images. Je préfère donc mettre une div. C'est donc une préférence personnelle: vous n'êtes pas obligés de faire comme moi.

Maintenant, rajoutons les div qui contiendront nos descriptions physique, mental, l'histoire et les infos (tant RP que joueur). Ce sera le même principe que celui des images: je donne une classe générale à tous mes contenus qui s'appelle justement contenu et une class qui leur est spécifique. Vu que je n'utilise jamais les classes spécifiques aux images ou au contenu seules pour quoi que ce soit, et que j'écris toujours dans CSS leur deux classes (donc par exemple .imag.infos ou .contenu.info et jamais .infos seul) j'ai mit la même classe "spécifique" tant à l'image qu'au contenu correspondant.
J'ai le droit de le faire: une classe n'est pas un id, et donc, n'a pas à être unique! Cependant, faites bien attention de ne PAS spécifier dans le CSS de choses pour els classes communes à des choses qui n'ont rien à voir, mais bien d'utiliser les deux classes qui les décrivent!

Quoiqu'il en soit, voilà tout le HTML maintenant que j'ai ajouté le contenu de chaque onglet:

Code:
<div class="fiche"><input checked="" name="fiche" id="informations" type="radio" /> <input name="fiche" id="physique" type="radio" /> <input name="fiche" id="caractere" type="radio" /> <input name="fiche" id="histoire" type="radio" /> <input name="fiche" id="ecran" type="radio" /><div class="images">
<div class="imag infos" style="background-image: url('http://38.media.tumblr.com/baa66b83079e0cfb94328d9d721b7acc/tumblr_n8ucrv9CWu1taqwcpo5_500.gif');"></div>
<div class="imag phys" style="background-image: url('http://33.media.tumblr.com/6406227aace1b8d25a5c94c4fae05f04/tumblr_n8ucrv9CWu1taqwcpo6_500.gif');"></div>
<div class="imag car" style="background-image: url('http://33.media.tumblr.com/4cba62a69dc06430c78675a25b783669/tumblr_n8ucrv9CWu1taqwcpo9_500.gif');"></div>
<div class="imag hist" style="background-image: url('http://31.media.tumblr.com/22f282d3778e8ec3811cd6c82fa8977f/tumblr_n8ucrv9CWu1taqwcpo8_400.gif');"></div>
<div class="imag ecr" style="background-image: url('http://media.tumblr.com/tumblr_lnmvmtBDbM1qm00hqo1_500.gif');"></div>
</div>
<h1>Prénom Nome</h1>
<div class="citation">« Une toute petite citation »</div>
<div class="boutons"><label for="informations" class="lab infos">Infos</label> <label for="physique" class="lab phys">Physique</label> <label for="caractere" class="lab car">Caractère</label> <label for="histoire" class="lab hist">Histoire</label> <label for="ecran" class="lab ecr">Derrière l'écran</label> </div>
<div class="interne"><div class="contenu infos">Hello, mon nom c'est [b]Mushu[/b] et je suis la [strike]mascotte[/strike] l'esprit animal de la famille Fa. En gros [b]je suis un peu pauvre[/b] parce qu'on m'oblige à m'occuper des vieux esprits de la famille Fa et c'est hyper chiant. Sinon [b]je suis vraiment très vieux[/b], mais genre, super vieux. Et [b]j'adore les pancakes, Mulan et les blagues pas drôles[/b] et je déteste [b]ce satané [strike]Cricket[/strike], les Huns et le faite que je sois si petit[/b].
Sinon [b]j'ai comme signe particulier le faite que je sois un dragon orange et très petit[/b]. Mon plus grand secret [b]ne vous regarde pas[/b]!</div>
<div class="contenu phys">Ici la description physique. </div>
<div class="contenu car">Ici la description du caractère</div>
<div class="contenu hist"> Ici l'histoire</div>
<div class="contenu ecr">Ici les informations joueurs</div></div>
</div>


Il est à noter que j'ai également deux link de polices de Google Fonts qui sont ajoutées à ma présentation, mais vus devriez les mettre dans votre overall_header. Ces deux polices sont Abel et Lobster.


Le CSS


Maintenant, il est temps de passer au CSS de ma fiche!

Tout d'abord, on va mette en forme la fiche de façon tout à fait normale. Du coup, ça ne tient que du CSS dont vous avez l'habitude et de mettre la fiche en forme comme on veut.

Tout d'abord, on va cacher les input en haut de fiche. On ne veut pas qu'ils apparaissent, parce qu'ils sont un peu moche, mais aussi et surtout parce qu'ils ne sont pas utiles. On  a donc ceci:

Code:
/* On cache les input */
.fiche > input { display: none; }



Ensuite, je crée la fiche. Bords arrondis, un fond, une taille, je la centre. Rien de bien compliqué.

Code:
/* On met en place la fiche et son image de fond */
.fiche {
  position: relative;
  width: 500px;
  margin: auto;
  overflow: hidden;
  border-radius: 10px;
  background: url('http://image.noelshack.com/fichiers/2015/53/1451484327-img-thing.jpg');
  background-size: 150px;
}



Maintenant, je vais aussi mettre en forme tous els "invariants" de la fiche. C'est à dire, tout ce qui ne va pas changer au gré des onglets. Pour moi, c'est le titre et la citation. Je les mets donc en forme:

Code:
/* Mise en forme du titre de la fiche */
.fiche > h1 {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0px;
  margin-top: -34px;
  text-align: center;
  font-weight: normal;
  font-family: 'Lobster';
  font-size: 30px;
  color: white;
  text-shadow: 1px 1px 1px black;
}

/* Mise en forme de la citation de la fiche */
.fiche .citation {
  width: 100%;
  padding-bottom: 2px;
  background: #BA2F23;
  text-align: center;
  font-family: 'Abel';
  font-size: 15px;
  font-style: italic;
  line-height: 20px;
  color: white;
  text-shadow: 1px 1px 1px black;
}




Maintenant, on a les labels (qui sont donc nos titre des onglets), ainsi que le contenu à mettre en forme. Là, ça devient un peu plus corsé, parce qu'on veut que ça change.
Cependant, ce n'est pas si compliqué que cela. En effet, on va mettre en forme simplement comme s'il n'y avait pas d'onglets. Donc on va simplement mettre en forme les différents éléments, comme si on faisait une fiche normale.

Je commence par les images. Je vais donc leur donner des tailles (vu qu'elles sont dans des div), ainsi que de mettre une taille pour l'image de fond. Je les place alors toutes au bon endroit.

Petite subtilité ici: j'ai le conteneur "images" que je emts en relative, simplement parce que je veux créer un effet d'apparition en fondu pour les onglets. Du coup, il faut que toutes mes images ("imag") à l'intérieur aient une position absolue et se trouve au même endroit.

Pourquoi? Eh bien tout simplement parce que je devrais ensuite les mettre en opacité 0, mais que cela ne va pas les "effacer". C'est à dire qu'elles feront toujours la même taille, et donc, resteront à la même "place".
Si vous voulez éviter ceci, et que vous ne souhaitez pas forcément d'effet de fondu, vous pouvez tout simplement utiliser à la place de mes opacity et visibility, un display: none; puis un display: block; pour refaire apparaître.

Notez que cela sera pareil pour mes contenus plus bas.


Je mets également tout de suite l'opacité à 0 et la visibilité à invisible. En effet, je ne veux faire apparaître mes images que lorsque le bon onglet est sélectionné. Cependant, si vous voulez voir le résultat pour votre fiche avant d'avoir activé les onglets, juste pour voir à quoi ça ressemble, vous pouvez effacer ces deux lignes.

Code:
/* Mise en place la partie qui contient les images */
.fiche .images {
  position: relative;
  width: 500px;
  height: 220px;
}

/* Mise en place des images. On les cache également de base */
.fiche .images .imag {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 500px;
  height: 220px;
  background-size: 500px;
  opacity: 0;
  visibility: hidden;
  transition: all ease 0.5s;
}



Mettons également les lables, ou les titres d'onglets, en forme. Ici, on les met en forme quand les onglets sont non-sélectionnés, mais aussi lorsqu'on passe la souris sur eux. Je mets également le cursor: pointer;  pour que l'on voie que le label est cliquable, et représente donc un onglet.
Avec l'aide de mon conteneur "boutons" je vais aussi faire en sorte que les labels soient bien centrés.

Code:
/* On met les labels au centre */
.fiche .boutons { text-align: center; }

/* Mise en forme des labels/titre des onglets normal */
.fiche .boutons label {
  margin-left: 6px;
  margin-right: 6px;
  color: white;
  font-size: 23px;
  font-family: 'Abel';
  cursor: pointer;
  text-shadow: 1px 1px 1px black;
  transition: all ease 0.5s;
}

/* Effet au survol des labels */
.fiche .boutons label:hover {
  color: #EAFF05;
  transition: all ease 0.5s;
}



À présent, je vais mettre en place et en forme la partie de la contenue de ma fiche. Tout d'abord, vu que je veux un effet d'apparition en fondu, je dois donner une hauteur à mon contenuer "interne" et le mettre en position relative. Les "contenu" devront également avoir une hauteur prédéfinie et un overflow: auto; pour que le texte ne dépasse pas. Comme pour les images, je les mets tout de suite l'opacité à 0 et la visibilité à invisible, vu que je ne veux faire apparaître mon contenu que lorsque le bon onglet est sélectionné.

Si vous n'aimez pas les barres de navigation/scroll pour les longs contenus, vous pouvez très bien supprimer le positionnement absolu des "contenu" et plutôt que d'utiliser opacity: 0; et visibility: hidden;, vous pouvez utiliser display: none;. Vous n'aurez cependant plus d'apparition en fondu.

Code:

/* On met en place le bloc qui va contenir le contenu de chaque onglet */
.fiche .interne {
  position: relative;
  width: 90%;
  height: 300px;
  margin: auto;
  border-radius: 10px;
  background: white;
  box-shadow: 1px 1px 10px grey inset;
  font-family: 'Abel';
  font-size: 15px;
  color: black;
}

/* On met en place et en forme le contenu de chaque onglet */
.fiche .interne .contenu {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 90%;
  height: 260px;
  padding: 10px;
  margin: auto;
  overflow: auto;
  text-align: justify;
  opacity: 0;
  visibility: hidden;
  transition: all ease 0.5s;
}



Enfin, dernière partie de la mise en forme de base: je vais mettre un petit effet sur ce que je mets en gras dans la fiche. Je veux une autre couleur.

Code:
/* Petit effet sur les b: on change la couleur */
.fiche .interne strong { color: #BA2F23; }



Il est donc temps de modifier selon quel onglet est changé. En fait, c'est très simple à comprendre avec les explications de plus haut. Vu qu'on a bien fait en sorte que les input soient frères aux classes "boutons", "images" et "interne", il suffit pour chaque bon input/onglet (donc ce qu'on a décrit avec une id, qui deviendra donc #informations ) de faire apparaître ou modifier le bon élément.

Ici, vu qu'on a utilisé des classes similaires pour chaque éléments (donc .infos, .phys, .car, .hist et .ecr), on a n'a qu'à changer la classe qui précède. Pour plus de sécurité cependant, j'ai utilisé la "double-classe" comme ceci: .lab.infos. Cependant, au lieu de .fiche #informations:checked ~ .boutons .lab.infos vous auriez pu simplement écrire .fiche #informations:checked ~ .boutons .infos.

Si vous avez décidé d'utiliser le display: none; plutôt que l'opacité et la visibilité, n'oubliez pas ici d'utiliser un display: block; plutôt que le code actuel!


Code:

/* Fait le changement de style sur les labels sélectionnés */
.fiche #informations:checked ~ .boutons .lab.infos,
.fiche #physique:checked ~ .boutons .lab.phys,
.fiche #caractere:checked ~ .boutons .lab.car,
.fiche #histoire:checked ~ .boutons .lab.hist,
.fiche #ecran:checked ~ .boutons .lab.ecr {
  font-family: 'Lobster';
  color: #EAFF05;
}

/* Fait apparaitre l'image de l'onglet sélectionné */
.fiche #informations:checked ~ .images .imag.infos,
.fiche #physique:checked ~ .images .imag.phys,
.fiche #caractere:checked ~ .images .imag.car,
.fiche #histoire:checked ~ .images .imag.hist,
.fiche #ecran:checked ~ .images .imag.ecr {
  opacity: 1;
  visibility: visible;
  transition: all ease 0.5s;
}

/* Fait apparaitre le contenu de l'onglet sélectionné */
.fiche #informations:checked ~ .interne .contenu.infos,
.fiche #physique:checked ~ .interne .contenu.phys,
.fiche #caractere:checked ~ .interne .contenu.car,
.fiche #histoire:checked ~ .interne .contenu.hist,
.fiche #ecran:checked ~ .interne .contenu.ecr {
  opacity: 1;
  visibility: visible;
  transition: all ease 0.5s;
}



Voici donc le CSS complet et commenté:

Code:

    /************************************************ FICHE ************************************************/
/* On met en place la fiche et son image de fond */
.fiche {
  position: relative;
  width: 500px;
  margin: auto;
  overflow: hidden;
  border-radius: 10px;
  background: url('http://image.noelshack.com/fichiers/2015/53/1451484327-img-thing.jpg');
  background-size: 150px;
}

/* On cache les input */
.fiche > input { display: none; }

/* Mise en place la partie qui contient les images */
.fiche .images {
  position: relative;
  width: 500px;
  height: 220px;
}

/* Mise en place des images. On les cache également de base */
.fiche .images .imag {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 500px;
  height: 220px;
  background-size: 500px;
  opacity: 0;
  visibility: hidden;
  transition: all ease 0.5s;
}

/* Mise en forme du titre de la fiche */
.fiche > h1 {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0px;
  margin-top: -34px;
  text-align: center;
  font-weight: normal;
  font-family: 'Lobster';
  font-size: 30px;
  color: white;
  text-shadow: 1px 1px 1px black;
}

/* Mise en forme de la citation de la fiche */
.fiche .citation {
  width: 100%;
  padding-bottom: 2px;
  background: #BA2F23;
  text-align: center;
  font-family: 'Abel';
  font-size: 15px;
  font-style: italic;
  line-height: 20px;
  color: white;
  text-shadow: 1px 1px 1px black;
}

/* On met les labels au centre */
.fiche .boutons { text-align: center; }

/* Mise en forme des labels/titre des onglets normal */
.fiche .boutons label {
  margin-left: 6px;
  margin-right: 6px;
  color: white;
  font-size: 23px;
  font-family: 'Abel';
  cursor: pointer;
  text-shadow: 1px 1px 1px black;
  transition: all ease 0.5s;
}

/* Effet au survol des labels */
.fiche .boutons label:hover {
  color: #EAFF05;
  transition: all ease 0.5s;
}

/* On met en place le bloc qui va contenir le contenu de chaque onglet */
.fiche .interne {
  position: relative;
  width: 90%;
  height: 300px;
  margin: auto;
  border-radius: 10px;
  background: white;
  box-shadow: 1px 1px 10px grey inset;
  font-family: 'Abel';
  font-size: 15px;
  color: black;
}

/* On met en place et en forme le contenu de chaque onglet */
.fiche .interne .contenu {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 90%;
  height: 260px;
  padding: 10px;
  margin: auto;
  overflow: auto;
  text-align: justify;
  opacity: 0;
  visibility: hidden;
  transition: all ease 0.5s;
}

/* Petit effet sur les b: on change la couleur */
.fiche .interne strong { color: #BA2F23; }

/* Fait le changement de style sur les labels sélectionnés */
.fiche #informations:checked ~ .boutons .lab.infos,
.fiche #physique:checked ~ .boutons .lab.phys,
.fiche #caractere:checked ~ .boutons .lab.car,
.fiche #histoire:checked ~ .boutons .lab.hist,
.fiche #ecran:checked ~ .boutons .lab.ecr {
  font-family: 'Lobster';
  color: #EAFF05;
}

/* Fait apparaitre l'image de l'onglet sélectionné */
.fiche #informations:checked ~ .images .imag.infos,
.fiche #physique:checked ~ .images .imag.phys,
.fiche #caractere:checked ~ .images .imag.car,
.fiche #histoire:checked ~ .images .imag.hist,
.fiche #ecran:checked ~ .images .imag.ecr {
  opacity: 1;
  visibility: visible;
  transition: all ease 0.5s;
}

/* Fait apparaitre le contenu de l'onglet sélectionné */
.fiche #informations:checked ~ .interne .contenu.infos,
.fiche #physique:checked ~ .interne .contenu.phys,
.fiche #caractere:checked ~ .interne .contenu.car,
.fiche #histoire:checked ~ .interne .contenu.hist,
.fiche #ecran:checked ~ .interne .contenu.ecr {
  opacity: 1;
  visibility: visible;
  transition: all ease 0.5s;
}

NyoTheNeko

Slideshow full CSS3 sans :target ! - Sam 12 Juil 2014 - 17:27



Slideshow full CSS3





   
Ceci est un tuto, optimal pour une PA, crée suite à la Demande d'SatoruMasao, ici.
Notez, en tant que petit disclaimer, que je ne sors pas tout ça de mon chapeau. Vous trouverez en lien le slideshow que j'ai prit en base, qui montrait comment ne pas utiliser les :target mais plutôt les input et label (ce qui évite de faire comme une "nouvelle page" et permet de cliquer sur le bouton de "précédent" du navigateur pour vraiment aller sur la page précédente et non pas l'id du slide précédent.


Toutes versions ▬ CSS3 & HTML5 ▬ Ce que ça donne


   
Notez que je vais donc vous montrer comment faire autant le slideshow simple, que les personnages avec la petite bulle qui apparait au passage de la souris! Cependant, vous n'êtes pas obliger de mettre forcément des render de personnages et des petits bulles, mais pouvez très bien remplir d'autres choses! En gros, cela dépend fortement de votre imagination et de vos compétences. Le cas échéant, la section des problèmes est là pour vous aider!




Le slideshow de base


Avant de commencer à s'amuser à mettre les petites bulles d'informations sur les personnages ou même quoi que ce soit d'autres, il faudrait tout d'abord commencer à créer le slideshow de base, c'est à dire, le conteneur, les slides (de simples div pour l'instant) et les flèches avec l'animation qui devrait y avoir.

Je vais aller étape par étape, mais tout de même montrer tout le HTML avant de montrer tout le CSS. Cependant, il est à noter que sans le CSS, le HTML risque d'être très moche (et surtout de ne rien faire!).

Le HTML


Alors, tout d'abord, commençons par le commencement!
Nous allons créer notre toute première div qui va contenir tous le slideshow. Vous pouvez l’appeler comme vous le voulez, mais ici, elle sera appelée "slideshow". Elle contiendra alors tout ce qui a un rapport avec le slider: les slides, les boutons pour aller d'un slide à l'autre, etc. Donc la voici:

Code:
<div id="slideshow">
</div>


C'est très simple n'est-ce pas?

Maintenant, nous allons rajouter des balises input de type radio. Ces balises, ce sont normalement ce qu'on utilise dans le formulaires, pour choisir une option ou une autre. Un exemple simple est sur ForumActif, plus précisément sur NeverUtopia: quand vous créez un sujet, sous "Icône de sujet" vous avez à côté de chaque icône un petit rond qu vous pouvez cocher. Eh bien c'est ça les input de type radio d'un formulaire!
Mais pourquoi utiliser ça, mais surtout, à quoi ça sert? Eh bien plutôt que d'utiliser des liens et d'utiliser ensuite le pseudo-élément :target, ici nous allons utiliser les input et leur pseudo-élément :checked, qui regarde si un input est coché ou non. Cela permet donc de ne pas ouvrir un "nouveau lien" à chaque slide, mais bel et bien de toujours avoir le même lien dans la barre de navigation.

Nous allons donc mettre autant d'input que nous voulons de slides, ici 5:

Code:

<input checked name="slideshow" id="slide1" type="radio" />
<input name="slideshow" id="slide2" type="radio" />
<input name="slideshow" id="slide3" type="radio" />
<input name="slideshow" id="slide4" type="radio" />
<input name="slideshow" id="slide5" type="radio" />


   
Si vous ne connaissez pas la balise input, laissez-moi vous expliquer ce qu'est chacun des éléments ici présent. Premièrement, le nom (name)  permet simplement de... donner un nom à l'élément. Normalement, on tente d'en donner un unique à chacun, notamment lorsqu'on  utilise le JavaScript ou alors que l'on utilise ça vraiment comme un formulaire, et non pas pour un slideshow comme ici. Cependant, ici ce n'est pas important et tous nos input s'appellent slideshow.
Ensuite, on a donné un id à chacun de nos éléments, qui correspond au combientième slide on est. Cela est important pour le CSS, pour savoir que input a été coché, alors que le name n'est pas utilisé pour ça.
Le type est ensuite, eh bien, le type de l'input. Ici on a radio, c'est à dire que seul un input peut être coché à la fois, mais il existe beaucoup de différents types d'input (vu que c'est un formulaire: il y a pour du texte, un choix multiple, une barre avec plusieurs choix de mots, etc). Ici cependant, on a besoin du type radio pour notre slideshow.
Enfin, vous aurez pu remarquer que le premier input a le mot clé "checked" ajouté dans la balise. Cela veut dire que par défaut, c'est l'input slide1 qui est coché et donc, celle-ci qui sera affichée à l'ouverture de la page. Cela peut très bien changer! Vous pourriez choisir d'avoir le troisième slide d'affiché à l'ouverture ou même le dernier! En gros, c'est le input qui est checked qui sera vu en premier par les gens naviguant sur votre site!


Pour rester dans le thème des input, parlons tout de suite comment et pourquoi ils seront utilisé: les flèches qui "contrôlent" le slideshow, et décident quel input est checked ou non. Pour cela, nous utilisons des labels.
On va d'ailleurs mettre ces labels dans un id que vous pouvez nommer comme vous le voulez mais que je nomme "controls". Cela nous permettra alors de placer les flèches et de faire certains effets dessus dans le CSS, mais aussi de les sélectionner correctement grâce au CSS (dont je parlerais plus tard)

Code:
<div id="controls">
 <label for="slide1"></label>
 <label for="slide2"></label>
 <label for="slide3"></label>
 <label for="slide4"></label>
 <label for="slide5"></label>
</div>


Comme vous pouvez le constater, chaque slide a son propre label, et c'est l'attribut for qui dit pour quel label est chaque input. En effet, si vous cliquez sur un label qui est for un certain input, alors cet input sera coché. Je suppose donc que vous comprenez à présent un peu mieux comment ça marche: on clique sur une flèche qui est en fait un label pour un certain input d'un slide, et ce slide sera alors coché, ce qui permettra, grâce au CSS, à aller au slide correspondant!
Remarquez cependant que le for doit avoir le même nom que l'id de l'input correspondant.

Donc jusqu'à présent, on a ça:

Code:
<div id="slideshow">
 <input checked name="slideshow" id="slide1" type="radio" />
 <input name="slideshow" id="slide2" type="radio" />
 <input name="slideshow" id="slide3" type="radio" />
 <input name="slideshow" id="slide4" type="radio" />
 <input name="slideshow" id="slide5" type="radio" />
 <div id="controls">
 <label for="slide1"></label>
 <label for="slide2"></label>
 <label for="slide3"></label>
 <label for="slide4"></label>
 <label for="slide5"></label>
 </div>
</div>


Ce n'est pour l'instant pas grand chose, cependant: c'est le plus important. en effet, bien que vous n'avez pas encore les slides à proprement parler, vous avez déjà la plus grosse partir du HTML, et ce qui va faire marcher tout le slideshow. Cependant, vu qu'un slideshow n'est rien sans slides, il nous faut les ajouter!

Nous allons donc créer une div qui va contenir tous nos slides, que l'on mettra entre les inputs et les controls (l'importance de ceci est expliquée plus tard) qui sera de la taille de tous les slides additionnés (que je nommerais inner), mais également un autre div, qui contiendra inner et qui permettra de cacher les slides en trop (à l'aide d'un overflow: hidden) de telle sorte à afficher un seul slide à la fois. Je le nommerais slides.
Nous avons donc ceci:

Code:
<div id="slides">
 <div class="inner">
 </div>
</div>



Je vais alors ajouter mes cinq slides dans inner, en leur donnant à chacun la classe a_slide (que vous pouvez appeler comme vous le voulez) qui me permettra de mettre la taille aux slides, mais aussi d'appliquer les effets nécessaires. J'ai donc ceci:

Code:
<div id="slides">
 <div class="inner">
 <div class="a_slide">
 </div>
 <div class="a_slide">
 </div>
 <div class="a_slide">
 </div>
 <div class="a_slide">
 </div>
 <div class="a_slide">
 </div>
 </div>
</div>



À présent, pour que l'on puisse tout de suite tester les slides, j'ai mit dans chaque slide une image (le render) avec une class selon où je les veux positionnés, entourés d'un lien. En effet, je veux alterner entre le render à gauche et le render à droite, cependant, vous pouvez créer autan de positions que vous voulez (au milieu, un peu à droit,e un peu à gauche, etc), u même placer à l'aide d'id plutôt que de classe chaque image indépendamment. De même, vous pouvez mettre autre chose dans chaque slide qu'une image!

Code:
<div id="slides">
 <div class="inner">
 <div class="a_slide">
 <a href="#"><img class="left" src="http://i.imgur.com/SgVARN7.png" /></a>
 </div>
 <div class="a_slide">
 <a href="#"><img class="right" src="http://i.imgur.com/To2uhmJ.png" /></a>
 </div>
 <div class="a_slide">
 <a href="#"><img class="left" src="http://i.imgur.com/LOhfzmf.png" /></a>
 </div>
 <div class="a_slide">
 <a href="#"><img class="right" src="http://i.imgur.com/CIw0pQ9.png" /></a>
 </div>
 <div class="a_slide">
 <a href="#"><img class="left" src="http://www.renders-graphiques.fr/image/upload/normal/Kakuzu-1.png" /></a>
 </div>
 </div>
</div>



Et voilà! Le HTML est terminé! En résumé, nous avons ceci (HTML complet pour l'étape du slideshow simple):

Code:
<div id="slideshow">
 <input checked name="slideshow" id="slide1" type="radio" />
 <input name="slideshow" id="slide2" type="radio" />
 <input name="slideshow" id="slide3" type="radio" />
 <input name="slideshow" id="slide4" type="radio" />
 <input name="slideshow" id="slide5" type="radio" />
 <div id="slides">
 <div class="inner">
 <div class="a_slide">
 <a href="#"><img class="left" src="http://i.imgur.com/SgVARN7.png" /></a>
 </div>
  <div class="a_slide">
 <a href="#"><img class="right" src="http://i.imgur.com/To2uhmJ.png" /></a>
 </div>
  <div class="a_slide">
 <a href="#"><img class="left" src="http://i.imgur.com/LOhfzmf.png" /></a>
 </div>
 <div class="a_slide">
  <a href="#"><img class="right" src="http://i.imgur.com/CIw0pQ9.png" /></a>
  </div>
  <div class="a_slide">
  <a href="#"><img class="left" src="http://www.renders-graphiques.fr/image/upload/normal/Kakuzu-1.png" /></a>
  </div>
  </div>
 </div>
 <div id="controls">
 <label for="slide1"></label>
 <label for="slide2"></label>
 <label for="slide3"></label>
 <label for="slide4"></label>
 <label for="slide5"></label>
 </div>
</div>



Le CSS


Si vous envoyez à présent le HTML sans le CSS sur votre PA, vous verrez très vite que ça ne ressemble pas à grand chose... En effet, vu que nous avons que des class et des id, les div n'ont aucune hauteur ou largeur et donc, rien ne s'affiche. Enfin, mis à part les input (donc les boutons de type radio) dont le premier est coché... Et comme vous le voyez dans le résultat final, ces derniers ne sont même pas présents! Mais pas de panique: le CSS3 et sa magie va bientôt opérer, et vous aurez bientôt un superbe slideshow!

Cependant, nous avons beaucoup de choses à voir, alors là aussi je vais utiliser quelques titres pour les séparer un peu mieux!

Mise en place du bloc du slideshow


Tout d'abord, nous allons masquer les input, c'est à dire, faire en sorte qu'ils n'apparaissent pas. En effet vu que pour l'instant c'est la seule chose qui apparaisse mais que c'est la seule chose qu'on ne veut PAS voir apparaître, il suffit de faire en srte qu'ils ne s'affichent pas à l'aide d'un display: none;
Nous avons donc ceci:

Code:
/* Permet de cacher les input (apparait sous forme radio sinon) */
#slideshow input {
  display: none;
}



Maintenant que nous avons un "tableau blanc" sur lequel travailler, il est donc temps de commencer par le commencement: la balise qui entoure notre slideshow, à laquelle j'avais donné plus tôt l'id "slideshow". Nous allons donc tout de suite lui donner une largeur et une hauteur, mais aussi un position relative. C'est important, notamment pour positionner les flèches, ou tout autre élément que vous voudriez jouter aux slideshow (autre que les slides et les flèches).
Nous avons donc ceci:

Code:
/* Création du slideshow (contour) */
#slideshow {
  position: relative;
  width: 800px;
  height: 400px;
}



Maintenant, dans l'ordre logique des choses, je vais m'occuper des slides. Je vais donc commencer par la div à laquelle j'ai donné plus tôt l'id "slides", qui me permettra d'afficher un seul slide à la fois. Je vais donc lui donner la taille d'un seul slide (qui pour moi est la même taille que le slideshow en entier), le positionner de manière absolue tout en haut du slideshow (avec une position absolute) et un overflow: hidden, ce qui va me permettre de cacher tout ce qui dépasse de là, et donc, vous l'aurez compris, de cacher toutes les autres slides. En plus de cela, vu que mon slideshow aura une image de fond fixe et que seul des render vont passer par-dessus, j'ai mit une image de fond.

Code:
/* Conteneur de inner et de tous les slides, permet d'afficher un seul slide à la fois. */
#slides {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 800px;
  height: 400px;
  background-image: url('http://animeipics.files.wordpress.com/2014/01/konoha-thrids-era.jpg');
  background-size: 800px;
  background-position: center center;
  overflow: hidden;
}

   
Le background-size: 800px; me permet de faire en sorte que mon image de fond ait une largeur appropriée et le background-position lui donne la bonne position. Ici, le background-size a la largeur qui est fixée mais la hauteur s'adapte automatiquement (proportionnellement à l'image de base). Si j'avais écrit Si j'avais écris background-size: auto 400px; ce serait la hauteur qui se serait fixée à 400px et la largeur qui se serait automatiquement mise à la bonne proportion. On peut aussi fixer les deux attributs, pour fixer la largeur (toujours en premier) et la hateur, comme ceci: background-size: 800px 400px;.
Le z-index est également important. En effet, les flèches sont dans un div plus tard, c'est à dire que normalement, il est "plus haut" sur le z-index que les slides. Il faut donc changer cela, et on va donner à controls un z-index plus petit que slides!


Maintenant que nous avons ceci, nous allons regarder la première div fille de slides, qui n'est autre que la div à la class "inner". C'est donc lui qui va avoir tous nos slides. Je lui donne donc la bonne taille (donc pour qu'il contienne 5 slides). Rien de spécial donc... mis à part donner une largeur!

Code:
/* Conteneur de tous les slides */
#slides .inner {
  width: 500%;
}


Ici, on met une largeur en pourcentage plutôt qu'en px. En effet, vu que le div d'id slides nous donne déjà la largeur d'un slide, et que donc cela correspond à 100%, il faut mettre le nombre de slides * 100 comme nombre. Donc ici, 5 slides sont 500%, 6 slides serait 600%, 4 slides serait 400%, etc. C'est important, plus tard, pour déplacer les slides. On pourrait très bien le faire en px, mais cela demande un peu plus de calcul tout de même Wink


On a donc les deux conteneurs des slides, mais maintenant, il faudrait mettre en forme les slides eux-même! On va donc leur donner une taille (la même que #slides), mais également une position relative (pour pouvoir positionner les choses en absolu dedans, notamment les images et, bien plus tard, les bulles, que l'on verra dans la seconde partie) et enfin un float: left;

Code:
/* Mise en forme des slides */
#slides .a_slide {
  position: relative;
  width: 800px;
  height: 400px;
  float: left;
}


Le float: left permet de faire en sorte que tous les slides se mette les uns à côtés des autres sans marge. En effet, les div étant normalement des éléments bloc, ils retournent à la ligne avant ET après, or ici, nous ne voulons pas que ce soit le cas!
Il n'y aura d'ailleurs aucun problème au niveau du float, vu que le conteneur a un overflow: hidden. Pour plus d'informations, je vous invite à lire l'annexe sur les float que j'ai écris moi-même dans le cursus Wink


Et c'est presque fini! en effet, à présent, il y a le code pour le déplacement des slideshow à faire! Et là, on en aura terminé pour le bloc "brut" du slideshow!
Voici donc la partie la plus importante du code, qui est aussi présente sur le slider dont je me suis inspirée pour faire celui-ci:

Code:
/* Déplacement des slides */
#slide1:checked ~ #slides .inner { margin-left:0; }
#slide2:checked ~ #slides .inner { margin-left:-100%; }
#slide3:checked ~ #slides .inner { margin-left:-200%; }
#slide4:checked ~ #slides .inner { margin-left:-300%; }
#slide5:checked ~ #slides .inner { margin-left:-400%; }


OMFG!? C'est quoi ce checked? Et ce ~ là, ça veut dire quoi? AAAAAAH.
Pas de panique! O__O J'explique tout en-dessous!


Le pseudo-élément :checked
C'est ce qui va me permettre de voir quel input a été coché. J'en ai vaguement parlé plus tôt. Comme vous avez pu le voir dans le CSS, on regarde quel input est coché: celui de l'id slide 1, slide2, slide3, slide4 ou slide5. En effet, selon lequel est coché, on voudrait que inner soit décalé vers la gauche de plusieurs pourcent (c'est pourquoi aussi c'était important d'avoir en pourcentages la largeur d'inner). Pour afficher le premier slide c'est de 0, le second c'est de 100&, le troisème de 200%, etc. Notez qu'il faudrait en rajouter si on a plus de slides, tout comme il faut rajouter des input. Enfin, j'espère que le tuto est assez claire pour que vous ayez compris ça de par vous-même, mais j'aime autant préciser!
Donc en gros, ce pseudo-élément sert à ça: regarder lequel est coché et faire des choses en conséquence!


Le sélécteur ~
Ce sélécteur signifique "l'élément frère le plus proche". C'est à dire, dans notre code, le frère nommé "#slides .inner" le plus proche du input nommé #slideX qui est checked.
Mais qu'est un élément frère? Eh bien dans notre code par exemple, le div d'id "slideshow" a comme élément fils les input, le div d'id slides et enfin le div d'id controls. Cela implique donc que tous les trois sont des "frères" (ou sœurs).

Exemple:
Code:
<div id="un">
 <div id="deux">
 </div>
</div>

Ici, un est l'élément père de deux, et deux est l'élément filsè d eun.

Code:
<div id="un">
</div>
<div id="deux">
</div>


Ici, un est deux sont des éléments frères.

En somme, si votre code est bien indenté, il est facile de voir quels éléments sont des frères/sœurs, et lesquels sont des parents/enfants les uns des autres. En effet, les frères/sœurs seront sur le même niveau, et les parents/enfants seront sur des niveaux différents!


Je pense donc qu'à présent vous comprenez le code! Si tel input est checked, on change la marge à gauche de l’élément frère #slides .inner

Vous pouvez à présent envoyer votre code et voir... une image fixe! Et oui! Il n'y a pas encore les contrôles, donc les flèches, qui nous permettront de cocher les différents input! Du coup, eh bien... rien ne bouge! Il va donc falloir lire la suite pour mettre en place les flèches et, donc, ce qui nous permettra de contrôler le slideshow et de passer d'une slide à l'autre!

Mise en place des contrôles (flèches)


Les codes pour les contrôles est en réalité vraiment très "simple" dans le sens où, il n' a pas beaucoup de lignes, cependant, il peut être difficile à comprendre! Cependant, pas de panique: je suis là pour ça!

Commençons par le plus simple, qui est, le placement des flèches. Comme vous pouvez le voir, les flèches dépassent du slideshow. Ce n'est pas un problème, et d'ailleurs, vous pouvez bien sûr changer ça selon comment vous voulez avoir votre slideshow (avec les position: absolute de #slides et de #controls).
Quoiqu'il en soit, à l'aide du div d'id "controls" on va positionner les flèches au milieu de notre slideshow (à l'aide du top: 45%), et lui donner comme hauteur la taille des images que l'on va utiliser pour nos flèches. En plus de cela, il faut lui donner un z-index de 0 (ou en tout cas un z-index plus petit que celui de #slides) pour qu'ils soit derrière slides.
Notez cependant que si vous voulez que les flèches soient par-dessus votre slide, il va falloir changer ça, et même peut-être, avoir à placer chaque flèche individuellement! (car il faudrait que le z-index soit plus grand que celui des slides pour que les flèches apparaissent et soient cliquables, cependant, sur toute la longueur et hauteur de controls, les slides ne seraient plus cliquables (et n'auraient plus d'effet au passage de la souris).
Bref, en gros, voici le code:
[/b]
Code:
/* Mise ne place de l'élément contenant les flèches */
#controls {
  position: absolute;
  top: 45%;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 50px;
}



Assez simple n'est-ce pas? Mais pour l'instant, on a toujours pas les flèches! En effet, nous voulons que les flèches s'affichent toujours, mais soient par rapport au bon label, c'est à dire, que lorsque le slide1 est coché, qu'il y ait la flèche de droite qui aille vers le slide2, et la flèche de gauche qui aille vers le slide5 (le dernier slide). Du coup, il faut une manière de cacher TOUS les labels, sauf le bon label correspondant au slide précédent et au slide suivant (et les bons qui plus est). Il faut donc tout d'abord mettre ce code:

Code:
/* On met les labels à la bonne taille et on les cache */
#controls label {
  display: none;
  width: 50px;
  height: 50px;
}


Donc ici, on cache tous les label et on leur donne la taille de l'image. MAintenant, passons au code compliqué!


Code:
/* Mise en place de la flèche vers le slide suivant */
#slide1:checked ~ #controls label:nth-child(2),
#slide2:checked ~ #controls label:nth-child(3),
#slide3:checked ~ #controls label:nth-child(4),
#slide4:checked ~ #controls label:nth-child(5),
#slide5:checked ~ #controls label:nth-child(1) {
  background: url('http://csscience.com/responsiveslidercss3/next.png') no-repeat;
  float: right;
  margin: 0 -70px 0 0;
  display: block;
}

/* Mise en place de la flèche vers le slide précédent */
#slide1:checked ~ #controls label:nth-child(5),
#slide2:checked ~ #controls label:nth-child(1),
#slide3:checked ~ #controls label:nth-child(2),
#slide4:checked ~ #controls label:nth-child(3),
#slide5:checked ~ #controls label:nth-child(4) {
  background: url('http://csscience.com/responsiveslidercss3/prev.png') no-repeat;
  float: left;
  margin: 0 0 0 -70px;
  display: block;
}


AAAAAAH!
Non mais faut apprendre à se calmer hein O__O

En réalité, ce code est très simple une fois qu'on comprend à quoi sert la pseudo-classe :nth-child(X). En effet, nth-child désigne le nième enfant du type de la classe/objet qui est mit avant. Donc label:nth-child signifie le n-ième enfant qui est un label, et dans ce cas, se trouve dans l'id #controls. Le chiffre en parenthèse, est donc ce fameux nième enfant: label:nth-child(4) signifie le 4ième enfant de type label. C'est assez simple non? Il suffit donc de regarder dans votre HTML et compter à quel enfant vous voulez aller.

Vous comprenez alors que lorsque slide1 est coché (donc le pseudo-élément :checked), on veut que la flèche next soit le label pour le slide2, qui est dans notre HTML le 2ième enfant de type label dans #controls. De même, on veut que notre flèche previous nous envoie vers le slide5, qui est dans notre HTML le 5ième enfant de type label dans #controls!  

Pour ce qui est du reste du code, le float nous permet de positionner les flèches tout à droite et tout à gauche du bloc, la marge nous permet de les mettre en dehors du slideshow, le display_block nous permet d'annuler le display: none du précédent code, de telle sorte à ce que seul le label que l'on veut s'affiche et enfin, le background est bien sûr l'image de la flpche, respectivement de celle vers la droite et celle vers la gauche.


Nous avons donc à présent les flèches et le slide en pleine état de marche, cependant, sans les animations, eh bien, c'est un peu moche... Mais pas de soucis, les animations arrivent dans la partie suivante!

Animer les slides et effets sur les flèches


Nous allons tout d'abord faire l'animation sur les flches. Tout simplement parce que, eh bien, c'est le plus simple! En effet, comme vous pouvez le voir, le seul effet sur mes flèches est un changement d'opacité. Très simple donc, et un changement qu'il suffit d'appliquer sur le CSS #controls label en ajoutant de l'opacité, et en faisant un changement au passage d ela souris grâce à la pseudo-classe :hover!
Je vous donne donc le code, qui n'a vraiment rien de compliqué !

Code:
/* On met les labels à la bonne taille et on les cache */
#controls label {
  display: none;
  width: 50px;
  height: 50px;
  opacity: 0.3;
  transition: all ease-out 0.2s;
}

/* Effet au passage de la souris sur les flèches */
#controls label:hover {
  opacity: 0.8;
  transition: all ease-out 0.2s;
}



Voilà donc qui est fait pour les flèches! Maintenant, il est temps de passer au slides, pour qu'ils se déplacent de façon fluide. Le code est assez court (deux lignes), mais vraiment très condensé: je vous explique cependant tout!

Code:
/* Animation slides */
#slides .inner {
  -webkit-transform: translateZ(0);
  transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
}



Tout d'abord, le  -webkit-transform: translateZ(0); n'a vraiment pas d'autre fonction que d'assurer que l'animation se fait sans à-coups dans Chrome. En effet, si vous avez ce navigateur, vous verrez la différence si vous le mettez ou non. Ca ne change rien en soit, mais c'est plus joli, et surtout, uniquement pour Chrome qu'il y a cette ligne, vraiment xD
Vous voyez que la prochaine est une transition. Si vous avez un peu suivvi la plupart des Ls ici ou plusieurs Tutos, vous savez que cette ligne permet justement d'avoir l'animation, et donc un truc fluide. Cependant, vous voyez aussi que c'est une fonction bien compliquée que l'on utilise comme fonction de transition (cubic-bezier avec pleins de nombres dans ses parenthèses, contrairement aux habitues linear, ease-in, ease-out, ease-in-out et ease!). Cependant, pour déjà comprendre les deux premier termes de cette ligne: all signifie que tout ce qui peut être animé le sera. Ici, pour nous, c'est simplement le déplacement de inner. Ensuite, les 800ms est le temps durant lequel va durer l'animation. C'est 0.8 secondes en somme.

Revenons donc à cubic-bezier. En réalité, ease, ease-in, etc sont toutes des courbes de Bézier qui déterminent la transition. Et de même, chacun d'entre eux pourraient être écrits sous la forme de cubic-bezier (par exemple, ease pourrait s'écrire cubic-bezier(0.25, 0.1, 0.25, 1.0)). Donc, en gros, c'es une fonction de transition tout à fait normale, sauf que nous avons nous-même crée la façon dont l'animation va se jouer. En gros, c'est purement mathématique.
Vous avez cet outil qui vous permet de créer vos propres courbez de Bézier et les utiliser dans vos transitions, qui permet également de comparer avec les transitions "communes" ease, lineat, ease-in, ease-out et ease-in-out. Vous pouvez donc voir que notre courbe est très similaire au ease-in-out, bien que légèrement plus "rapide" dans sa transition.
Si vous voulez en apprendre plus sur la syntaxe de la fonction cubic-bezier, je vous invite à lire la partie de ce tuto qui en parle, qui est assez complet. Pour nous, ce n'est pas vraiment le sujet, on ne fait que l'utiliser Wink


Et maintenant, tout est bon! Nous n'avons plus qu'à placer les images correctement (comme je l'ai prévu dès le départ à gauche et à droite de chaque slide) et on en aura fini de cette première partie pour la création du slideshow!

Mise en place des images


Maintenant que nous avons tout le slideshow, il est temps de placer les images au bon endroit, comme j'avais dit lorsque j'ai écrit le HTML, j'ai prévu d'en mettre certaines à gauches et certaines à droites.
Je vais tout d'abord commencer par mettre toutes les images en position absolue. Je vais aussi faire en sorte qu'elle ne dépassent pas la hauteur du slideshow, donc les redimensionner à une hauteur de 400px.

Code:
/* Placer toutes les images en absolu. */
.a_slide img {
  position: absolute;
  display: block;
  height: 400px;
}



Maintenant, on va placer toutes les images avec la classe left à gauche

Code:
/* On place les images à gauche */
.a_slide img.left {
  bottom: 0px;
  left: 0px;
}



Et toutes les images avec la classe right à droite!

Code:
/* On place les images à droite */
.a_slide img.right {
  bottom: 0px;
  right: 0px;
}



Vous pourriez très bien utiliser les bottom, top, left et right pour placer les images ailleurs, et donc avoir plus de classes ou même des id pour chaque image si chacune doit être mise à un endroit spécifique! En somme, vous pouvez utiliser la position absolue comme vous le voulez pour placer les images!

Maintenant, il est temps de passer à la deuxième étape si vous voulez placer des bulles d’informations au passage de la souris sur les images!

Défilement, rotation continue, balancier...[CSS3 animations complexes] - Lun 2 Déc 2013 - 14:54



Défilement - Rotation continue - Balancier ...
Les Animations complexes [CSS3]


Édit Responsable : Ce tutoriel utilise des animations. Si vous ne connaissez pas le fonctionnement, je vous suggère de lire ce tutoriel afin de comprendre les bases.


Dans ce tutoriel je souhaite aborder les animations "complexes", même si ce terme n'est peut-être pas le bon, disons plutôt l'élaboration d'animations, en CSS3. Qu'est-ce que ça donne concrètement ? Eh bien le parfait exemple est le site web de Never-Utopia :
- la lanterne qui se balance
- les nuages qui défilent
- les bulles qui remontent
- les rouages qui tournent
- les lueurs qui semblent réelles
etc.

C'est quelque chose qui semble complexe au premier abord mais qui ne l'est pas tant que ça, et surtout qui permet énormément de possibilités une fois qu'on a compris le principe ! Il y aurait énormément d'animations différentes à voir et à faire, mais dans ce premier tutoriel (j'en ferais peut-être d'autres ensuite sur ce type d'animation) je vais présenter trois animations différentes :
- un défilement (avec des nuages)
- une rotation (avec un soleil)
- un balancier (avec une sorte de cadre au bout d'une chaine)

Forum test

Vous avez donc ces éléments en haut de page. N'ayant pas mon logiciel de graphisme sous la main à ce moment là, j'ai simplement utilisé des images ou icônes trouvées sur internet.
Ce tutoriel a donc pour but de vous apprendre à placer et animer les trois objets cités plus haut. Libre à vous par la suite de les remplacer par ce que vous voulez !

I/ LE NUAGE

Attention : pour que le code fonctionne et notamment l'animation, vous devez cocher "non" à "Optimiser votre css", paramètre qui se trouve en dessous de votre cadre de saisie de la feuille CSS de votre forum.


Commençons par le nuage qui défile. Pour cela, vous avez besoin de l'image d'un nuage en transparence, ce qui est moins difficile à trouver qu'on pourrait croire. Tapez par exemple les mots "nuage png" sur google... L'autre solution pour avoir le nuage que le voulez est de le faire vous-même sur votre logiciel en utilisant des brushes.
Une fois que vous avez votre image, il va falloir la placer dans le haut de page.

1) le HTML

Allez dans le template "Haut de page" (ou "overall_header") que vous trouverez dans "Affichage" > "Templates" > "Général" > "Haut de page".
Placez vous après ce code :

Code:
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
 <!-- BEGIN hitskin_preview -->
 <div id="hitskin_preview" style="display: block;">
 <h1><img src="http://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> Hit<em>skin</em>.com</h1>
 <div class="content">
 <p>
 {hitskin_preview.L_THEME_SITE_PREVIEW}
 <br />
 <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
 </p>
 </div>
 </div>
 <!-- END hitskin_preview -->

(lignes 201 à 213 dans le Template original)

Et intégrez donc ceci juste à la suite (donc ligne 214) :

Code:
<div id="nuage_bloc"><div id="nuage"><img src="http://img15.hostingpics.net/pics/562528nuage.png" /></div></div>

Il s'agit donc simplement d'un premier bloc de contenu, contenant un autre bloc qui lui contient l'image.
N'oubliez pas de valider votre template !

2) le CSS

Si vous avez validé et que vous êtes allés voir le résultat vous avez pu constater que le nuage est fixe, en haut de forum, et qu'il décale tout vers le bas. Normal, il prend une place, les autres éléments se positionnent en fonction de lui aussi.
Pour éviter cela nous allons le mettre en "absolute", afin qu'il soit par dessus les éléments qui le suivent. Commencez donc par mettre ceci dans votre CSS :

Code:
#nuage_bloc
{
  position: absolute;
  top: 0;
  left: 0;
  widht: 100%;
  overflow: hidden;
  margin-top: -100px;
}

Nous avons donc ici placé notre nuage en absolute, il couvre alors les autres éléments. Le top "0" et left "0" sont pour caler le bloc à l'angle de la page entière, et être sûr qu'il ne soit décalé par rien d'autre. C'est important car nous allons ensuite le décaler hors de la page, il faut donc être sûr de sa position de départ.
Le "width: 100%" indique que le bloc fera toute la largeur de page et le overflow "hidden" permet de masquer tout ce qui sortira du bloc et éviter l'apparition d'un scroll.
Quant au "margin-top" il est ici totalement facultatif, c'est simplement pour vous montrer que vous pouvez monter ou descendre votre nuage, de sorte qu'il passe, par exemple, en bas de la bannière. C'est à vous d'adapter cette marge, voire de la retirer.

Il faut maintenant faire bouger notre nuage, et pour cela nous allons utiliser un "keyframes". En gros il s'agit de décrire l'animation voulue, par étape, en ajoutant autant d'étape que désiré. Un keyframes d'animation se présente sous la forme suivante :

Code:
@keyframes nom_de_l_animation
{
0% {propriétés...}
100% {propriétés...}
}

Vous avez donc le @keyframes qui ne change pas, puis un espace et le nom de l'animation que vous allez faire, dans mon cas je le nommerais "nuage". Ce nom importe peu, essayez juste de faire simple, sans caractère spéciaux évidemment.
A l'intérieur des accolades se trouvent les étapes de l'animation. 0% c'est le stade de départ, 100% le stade d'arrivée. Il y a donc d'autres accolades ouvertes après le 0% afin que vous puissiez dire "au départ le style du bloc c'est ..." et d'autres accolades à 100% pour que vous puissiez donner les propriétés du bloc à l'arrivée.
A ce stade, peu importe que l'animation soit en boucle ou pas, vous devez donner en fait juste une boucle d'animation.
Il est possible d'ajouter d'autres étapes ! On verra ça pour le balancier du tableau donc pour le moment on se contentera du début + fin.

Voilà ce que donne notre "keyframes" :

Code:
@keyframes nuage
{
0% {margin-left: -100%;}
100% {margin-left: 100%;}
}

Pourquoi ? Alors nous avons placé notre bloc tout à l'heure en disant qu'il était collé au bord et qu'il avait la largeur de toute la page. L'étape 0% (du début donc) sera de décaler totalement ce bloc vers la gauche pour qu'il soit hors de la page. Il faut donc le décaler de sa largeur, donc 100%. L'avantage du pourcentage ici c'est que peu importe la largeur de l'écran, le bloc sortira forcément de la page puisque 100% = la largeur de page, peu importe la résolution.
L'étape du 100% sera de faire sortir le bloc à nouveau, mais cette fois totalement à droite de la page, pour qu'il soit entièrement dehors. On passe donc d'une marge gauche totale (-100%) à une marge droite totale (100%). L'animation amènera donc l'objet à faire ce trajet.

La compatibilité avec un maximum de navigateur étant importante, il faut développer un peu notre code avec les éléments que comprennent les autres navigateurs. Au final, notre keyframes donne ceci :
Code:
@keyframes nuage
{
0% {margin-left: -100%;}
100% {margin-left: 100%;}
}
@-o-keyframes nuage
{
0% {margin-left: -100%;}
100% {margin-left: 100%;}
}
@-moz-keyframes nuage
{
0% {margin-left: -100%;}
100% {margin-left: 100%;}
}
@-webkit-keyframes nuage
{
0% {margin-left: -100%;}
100% {margin-left: 100%;}
}

(Le premier est le code de base, classique. Le second rend compatible pour Opera, le second pour Firefox et le troisième pour Safari.

On pourrait penser que c'est suffisant, mais en réalité le keyframes n'anime pas votre élément ! Il décrit simplement l'animation que vous voulez, mais il faut appliquer cette animation de la façon que vous connaissez déjà plus ou moins, ce sera simplement pas une "transition" mais bien une "animation".
Voici ce que vous devez ajouter :

Code:
#nuage
{
  animation: nuage 20s linear infinite;
  -o-animation: nuage 20s linear infinite;
  -webkit-animation: nuage 20s linear infinite;
  -moz-animation: nuage 20s linear infinite;
}

J'ai donc mon bloc "nuage" (le bloc contenant l'image) et ma ligne d'animation ainsi que les lignes permettant aux maximum de navigateur de comprendre la consigne. J'ai condensé les informations, mais nous avons, dans l'ordre :
animation : le nom de l'animation - le temps total d'une boucle de l'animation - la vitesse d'animation - le nombre de fois que l'animation se répète.
Nous avons donc ici : l'animation nommée "nuage" donc chaque boucle (donc un aller de 0% à 100%) durera 20s, la vitesse sera linéaire (même vitesse sans ralentissement ou accélération) et l'animation se répètera indéfiniment.

Validez et regardez... Votre nuage bouge ! Il défile de gauche à droite sans rupture puisqu'il va d'un côté à l'autre de la page en sortant entièrement de celle-ci.

PS : on pourrait ajouter comme élément un "délai", c'est à dire imposer qu'entre deux boucles l'animation s'arrête durant un temps défini. On obtiendrait alors un nuage qui passe, puis une fois sorti de la page il attendrait X secondes avant de réapparaitre de la gauche.

Si vous souhaitez que vos nuages ne défilent QUE dans un bloc défini et non sur toute la largeur de page, il vous faut placer votre bloc à l'endroit voulu et lui donner une taille inférieure, en pixel généralement, de votre bloc. Ensuite le chiffre du décalage sera forcément égal à la largeur de ce bloc.

Voilà donc pour notre nuage, vous pouvez très bien faire défiler ainsi plusieurs images de nuage à des vitesses différentes pour plus de réalisme, mais souvenez-vous que ça alourdi la page x).
Au passage une précision : si votre bloc passe par dessus la bannière vous ne pourrez plus accéder au clic de celle-ci. La solution est alors de rendre le nuage cliquable, ou mieux de faire un lien global cliquable qui couvre tout votre bloc nuage, comme ceci (dans le HTML) :

Code:
<div id="nuage_bloc"><a href="/forum.htm" style="display: block; position: absolute; width: 100%; height: 100%;"></a><div id="nuage"><img src="http://img15.hostingpics.net/pics/562528nuage.png" /></div></div>

Libre à vous ensuite de personnaliser cela comme vous le voulez, vous pouvez baisser la vitesse de défilement en augmentant le temps que met l'animation à réaliser une boucle par exemple.


I/ LE SOLEIL

Le nuage c'est bien, mais avec du soleil c'est mieux *o* nous allons donc l'ajouter, et pour que tout reste animé nous le ferons tourner continuellement x)

1) HTML

Comme pour le nuage nous allons commencer par placer notre image du soleil (icône météo trouvée sur google...) dans le template haut de page. Le chemin reste identique ("Affichage" > "Template" > "Haut de page"). Placez le code suivant au même endroit que le nuage (avant ou après, c'est à votre choix, vous pourrez toujours les inverser après coup de toute façon), c'est à dire vers la ligne 214 du template de base.

Code:
<div id="soleil_bloc"><div id="soleil"><img src="http://img15.hostingpics.net/pics/344028soleil.png" /></div></div>

Validez et n'oubliez pas d'enregistrer votre template !

2) Le CSS

Allons ensuite positionner et animer notre soleil. Pour cela, ouvrez la feuille CSS. La première étape, comme précédemment, sera de placer notre bloc.

Code:
#soleil_bloc
{
  position: absolute;
  top: 0;
  right: 0;
  widht: 256px;
  height: 256px;
  overflow: hidden;
}

Comme vous pouvez le voir il y a des similitudes avec le précédent placement. Le principe reste le même, mais puisque j'ai décidé de placer mon soleil à droite, je vais le caler d'abord totalement dans le coin droit. Je n'ai pas ajouté d'autres marges mais vous pouvez le décaler encore plus vers le haut et la droite de sorte qu'on ne voit qu'une partie du soleil et que le reste soit hors page. Rien n'affectera l'animation.

Ajoutons ensuite nos keyframes, sous la même forme que tout à l'heure c'est à dire :

Code:
@keyframes soleil
{
0% {propriétés...}
100% {propriétés...}
}
@-o-keyframes soleil
{
0% {propriétés...}
100% {propriétés...}
}
@-moz-keyframes soleil
{
0% {propriétés...}
100% {propriétés...}
}
@-webkit-keyframes soleil
{
0% {propriétés...}
100% {propriétés...}
}

Je rappelle donc que le nom "soleil" est le nom de l'animation. Les différentes keyframes sont là pour qu'un maximum de navigateurs comprennent notre consigne d'animation.
Voici l'animation que j'utilise, normalement vous la connaissez ou vous l'avez déjà rencontrée quelque part... :

Code:
@keyframes soleil
{
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
@-o-keyframes soleil
{
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
@-moz-keyframes soleil
{
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
@-webkit-keyframes soleil
{
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}

Dans notre première étape, le positionnement de l'objet est à 0 degré, il est "droit". Dans la position finale, l'objet est à 360°, il est droit aussi. En fait il est placé exactement pareil à la première et à la dernière étape, c'est le fait de réaliser une transition entre ces deux états qui va donner l'animation.

Astuce : si vous souhaitez faire tourner votre objet dans le sens inverse, mettez simplement un "-" devant le "360deg" !

De la même façon que précédemment, l'animation est définie, mais elle n'est pas encore appliquée à notre élément. Nous allons donc l'ajouter :

Code:
#soleil
{
  animation: soleil 6s linear infinite;
  -o-animation: soleil 6s linear infinite;
  -webkit-animation: soleil 6s linear infinite;
  -moz-animation: soleil 6s linear infinite;
}

J'ai donc mentionné que c'était bien l'animation "soleil" qui devait s'appliquer, qu'elle durait 6 secondes, qu'elle doit se dérouler à une vitesse constante et infiniment.
Si j'avais mis "nuage" en nom d'animation nous aurions eut un soleil défilant (bien que l'animation n'aurait pas été bonne puisque le placement de l'élément est différent du nuage).

Vous pouvez ici aussi ralentir la vitesse de rotation en augmentant le temps mis pour faire un tour (ici 6 secondes).


I/ LE TABLEAU

Passons à l'animation du balancier pour notre tableau au bout de sa chaîne. Le tableau est vide dans mon exemple car j'ai juste pris le render que j'ai trouvé, mais il faut bien sûr imaginer qu'il contienne une image, ou bien que ce soit une lanterne ou tout autre objet susceptible de se balancer x)

1) HTML

On démarre de la même façon en intégrant notre image dans le template "overall_header" (Haut de page), même endroit que les autres donc aux alentours de la ligne 214.

Code:
<div id="tableau_bloc"><div id="tableau"><img src="http://img15.hostingpics.net/pics/956096tableau.png" height="400" /></div></div>

Remarque : j'ai réduis directement dans ce code la taille de l'image du tableau qui était à l'origine beaucoup plus grande. J'ai ici bloqué la hauteur à 400px donc le reste c'est adapté en se redimensionnant à l'échelle.

2) Le CSS

Positionnons notre image, j'ai choisi de la mettre à gauche, mais libre à vous de la mettre ailleurs... Le tout est que puisque notre image se balance c'est qu'elle est accrochée à quelque chose, donc il est préférable que l'image donne l'impression d'être accrochée au bord de page, sauf si bien sûr vous l'intégrez dans une image (fond de PA ou autre) et que vous la calez sur un plafond, une poutre ou que sais-je).

Code:
#tableau_bloc
{
  position: absolute;
  width: 300px;
  top: 0;
  left: 0;
  overflow: hidden;
}

Voilà pour le positionnement, passons à l'animation. Celle-ci sera un peu plus complexe que les précédentes puisque nous allons avoir trois étapes. En effet, notre objet doit effectuer un mouvement de balancier de la gauche vers la droite, mais il doit ensuite revenir par le chemin inverse. Si vous ne mettez que deux étapes vous aurez votre objet qui fera : gauche > droite puis qui disparaitra, re-apparaitra sur la gauche pour refaire le balancier dans le même sens.

Nous allons donc avoir ceci :

Code:
@keyframes tableau
{
0% {transform: rotate(-10deg);}
50% {transform: rotate(10deg);}
100% {transform: rotate(-10deg);}
}
@-o-keyframes tableau
{
0% {transform: rotate(-10deg);}
50% {transform: rotate(10deg);}
100% {transform: rotate(-10deg);}
}
@-moz-keyframes tableau
{
0% {transform: rotate(-10deg);}
50% {transform: rotate(10deg);}
100% {transform: rotate(-10deg);}
}
@-webkit-keyframes tableau
{
0% {transform: rotate(-10deg);}
50% {transform: rotate(10deg);}
100% {transform: rotate(-10deg);}
}

Notre objet va donc de -10 degré vers 10 degré, puis une fois à 10 degré retourne à -10 degré. Avec ces étapes nous avons notre boucle complète.
Reste à appliquer l'animation sur l'objet, et là il faut bien imaginer le problème que l'on va rencontrer... Si vous essayez de faire une application comme pour les autres animations, donc comme ceci :

Code:
#tableau
{
  animation: tableau 3s linear infinite;
  -o-animation: tableau 3s linear infinite;
  -webkit-animation: tableau 3s linear infinite;
  -moz-animation: tableau 3s linear infinite;
}

Vous allez bien avoir votre rotation, mais la rotation se fait autour du centre de l'image ! Comme pour le soleil qui tourne en ayant pour point d'ancrage son centre... En effet, les rotations, par défaut, se font en ayant pour point d'ancrage le milieu de l'image. C'est un problème, car nous, nous voulons que ce point soit le haut de la chaine, donc le milieu oui mais le milieu du HAUT de l'image... Heureusement, il est possible de changer cela x) (sinon je ne serais pas arrivé à mon résultat sur l'exemple). Vous devrez donc ajouter une origine à la transformation, comme ceci :

Code:
#tableau
{
  animation: tableau 3s linear infinite;
  -o-animation: tableau 3s linear infinite;
  -webkit-animation: tableau 3s linear infinite;
  -moz-animation: tableau 3s linear infinite;
  transform-origin: 50% 0;
}

Le premier nombre (50%) est la distance vers la droite horizontalement, et le "0" représente la distance du haut de l'image verticalement. Nous sommes donc bien à la moitié de l'image mais totalement en haut de celle-ci.

Bien ! Nous avons donc notre animation de balancier... Cependant, si vous comparez votre animation actuelle et la mienne il y a une différence : dans votre cas l'animation a une vitesse constante ce qui fait qu'arrivé aux extrêmes (totalement à droite ou totalement à gauche) on dirait que votre objet heurte un mur car il repart très sèchement de l'autre côté... Ce n'est pas naturel, pas réaliste, car un balancier ralenti à chaque fois qu'il remonte un peu, jusqu'à s'arrêter un millième de seconde puis repartir dans l'autre sens.
Pour changer cela afin que notre animation soit plus réaliste, il va falloir changer la constance de la vitesse, donc notre "linear" ne convient pas ! La courbe de vitesse de notre objet doit faire "lent-rapide-lent", et ceci s'appelle "ease-in-out".
Voici donc le bon code css pour appliquer notre animation :

Code:
#tableau
{
  animation: tableau 3s ease-in-out infinite;
  -o-animation: tableau 3s ease-in-out infinite;
  -webkit-animation: tableau 3s ease-in-out infinite;
  -moz-animation: tableau 3s ease-in-out infinite;
  transform-origin: 50% 0;
}

Regardez le résultat, vous verrez que c'est nettement mieux ^^


Voilà, ce tutoriel est terminé, il vous présente trois animations différentes que vous pouvez ensuite vous amuser à personnaliser comme bon vous semble !
Je ferais cependant une étape de cursus sur les animations afin que tout expliquer en détail, j'ai pensé qu'en premier lieu une application directe, même si vous ne possédez pas tout les éléments, était plus ludique qu'un bourrage de crâne sur une dizaine de termes et de propriétés.

Si vous utilisez ce tutoriel merci de mettre un crédit à Never-Utopia, en remerciement Wink

Enjoy x)

Bloc flottant latéral ouvrant "onclick" (CSS avec target) - Sam 24 Nov 2012 - 0:19


Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Lien pour comprendre pourquoi le contenu n'est pas sous hide


Hello x)

A la demande de Michiyo et comme promis je poste le tutoriel permettant de réaliser un onglet dans le même type que celui-ci (le truc en jaune à gauche qui s'ouvre en hover ^^) mais qui s'ouvre au clic et non au survol. De plus, histoire de faire les choses entièrement, j'ai fait en sorte que le bouton "ouvrir" se change en "fermer" une fois ouvert ! (tant qu'à faire hein...)

Voici donc l'aperçu :

Tag css3 sur Never Utopia - graphisme, codage et game design JIoAHnh
Tag css3 sur Never Utopia - graphisme, codage et game design DGzyuYo

Vous avez donc là un espace que vous pourrez agrandir au besoin pour y mettre ce que vous souhaitez : top site, liens, news... à la limite et avec la bonne taille vous pouvez même y glisser votre CB ! x)



Installation HTML

Pour commencer, aller dans vos templates (Affichage), et ouvrez celui nommé "overall_header" (ou "haut de page").

Repérez ce code (ligne 201) :

Code:
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">


Et ajoutez juste après lui le code de votre petite boite à onglet :

Code:
<div id="target_onglet"><div id="target_onglet2">
      <div id="onglet_clic">
      <span class="onglet_clic_navigation">
        <a href="#target_onglet" class="onglet_ouvrir"><img src="http://img15.hostingpics.net/pics/411044ongletouvrir.png" alt="lien" /></a>
        <a href="#target_onglet2" class="onglet_fermer"><img src="http://img15.hostingpics.net/pics/242659ongletfermer.png" alt="lien" /></a>
      </span>
      <div id="onglet_clic_contenu">
        <div id="onglet_contenu">
        Contenu de votre onglet.
        </div>
        </div>
    </div>
      </div></div>


N'oubliez pas d'enregistrer puis de valider votre template modifié !


Installation CSS

Allez ensuite dans votre feuille CSS pour y mettre le morceau de code css suivant, à ajouter au reste de votre css si vous en avez déjà :

Code:
/* ONGLET DEVOILE EN CLIC */

#target_onglet, #target_onglet2
{
  position: fixed;
}
#onglet_clic
{
  position: fixed;
  z-index: 999;
  width: 342px;
  height: 200px;
  margin-left: -310px;
  margin-top: 100px;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
#onglet_contenu
{
  width: 290px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  height: 190px;
  color: #1e466c;
  font-size: 11px;
}
.onglet_clic_navigation
{
  display: block;
  float: right;
  width: 40px;
  height: 120px;
  overflow: hidden;
  background: url(http://img15.hostingpics.net/pics/974397ongletouvrir.png);
  margin-top: 40px;
}
.onglet_ouvrir
{
  position: absolute;
  z-index: 3;
}
.onglet_fermer
{
  position: absolute;
  z-index: 2;
}
#onglet_clic_contenu
{
  width: 300px;
  height: 200px;
  overflow: hidden;
  background: #72a3cc;
  border: 1px solid #2f6ea5;
}
#target_onglet:target #onglet_clic
{
  margin-left: -10px;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
#target_onglet:target .onglet_ouvrir
{
  z-index: 1;
}
#target_onglet2:target #onglet_clic
{
  margin-left: -310px;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}


Votre boite est prête ! Voyons quelques points de personnalisation...


Personnalisation

1) Les tailles :
Si vous souhaitez modifier la taille de votre bloc vous devez modifier plusieurs mesure :
- la taille totale de la boite comprenant le contenu + le bouton (#onglet_clic)
- la taille de votre contenu lui-même (#onglet_contenu)
- l'importance de la marge négative qui fait disparaitre le bloc de la page lorsqu'il est fermé (#onglet_clic - margin-left: -310px;)

2) Les boutons ouvrir/fermer :
Ces boutons sont simplement des images, comme vous le verrez dans le html. Il suffit donc de faire vos propres boutons et de mettre leur adresse à la place des boutons actuels. Il est important que les deux fassent la même taille, mais ils ne se superposent pas donc vous pouvez jouer tant que vous voulez sur la transparence, y compris écrire juste le texte.
Si jamais vous souhaitez changer la taille des boutons, pas de souci (du moment que les deux ont la même) mais il faudra alors changer :
- le bloc comportant le bouton (.onglet_clic_navigation)
- adapter la largeur totale du bloc de la boite (#onglet_clic) car elle est égale à la largeur de votre contenu + la largeur de l'onglet (+ quelques pixels de réajustement)
- ...et si vous changez la largeur totale il faudra forcément changer le margin négatif qui rabat l'ensemble Wink

Pour le reste, il s'agit juste de changement basique des couleurs de fond, de texte, de bordures... Vous pouvez aussi mettre une image de fond à la place de la couleur bleu du bloc du contenu.

Voilà ! J'espère que ça vous sera utile, c'est une alternative à celui qui se déplie en hover, et même si l'écriture du css est un peu complexe au départ (pour moi pas pour vous XD) c'est un fonctionnement simple et sans javascript.

En cas d'utilisation de ces codes merci de mettre un crédit à Never-Utopia sur votre forum, même si vous personnalisez le code il n'en est pas moins conçu par quelqu'un d'autre, en l'occurrence moi puisque je l'ai rédigé en partant d'une feuille blanche, donc il est normal de ne pas simplement se l'approprier sans autre forme de respect. Un petit crédit, ce n'est pas grand chose, et nous ne demandons que ça x)

Taktiik

Navigation Latérale - Ven 23 Nov 2012 - 22:26

Note : Apparemment, il y aurait des bugs, ne pas utiliser pour le moment.



Barre Latérale de Menu : V 1.5 Dernière mise à jour : 06 Avril 2013
Aperçu
Préparation
Détails


W W W

Afin d'avoir un affichage optimisé et exactement comme sur l'exemple précédent, voici les réglages à faire dans votre Panneau d'administration :

? Général> Configuration :
• Largeur du forum (nombre ou %) : 700

? Affichage> En-tête & Navigation :
• Afficher seulement des images dans la barre des liens : Non
• Forcer la barre de navigation à rester sur une ligne : Oui

Ceci fait, vous pouvez maintenant poursuivre et débuter l'astuce. Pour toutes questions, n'hésitez pas à me MP ou m'envoyer un email : taktiik69@gmail.com, si j'oublie de répondre, et j'insiste à nouveau :

Sparrow Style a dit : Quoi qu'il en soit, si vous utilisez ce tutoriel pour personnaliser l'apparence de votre forum, je vous demande de mettre un crédit à Never-Utopia sur votre accueil, de manière lisible cela va de soi, en guise de remerciement pour l'aide que nous vous avons apportée.


Niveau : Facile
Fait : 23/11/2012
Type : Astuce


V
oici une astuce dans laquelle je vous donne un menu latéral de navigation rapide.
Je l'ai adapté grâce à Ce tutoriel pour que l'interaction des membres soit effective. Bien entendu, la seule chose que je vous demande, c'est de mettre un crédit qui redirige ici, vers Never Utopia, en guise de remerciement.
L'esthétique est basique et vous laisse libre choix pour la modifier Wink

Navigation





Menu avec possibilité de Ouvrir/Fermer


Partie Template

Vous devez donc remplacer votre template Overall_Header par celui-ci :

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
   <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
   <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
   <meta http-equiv="content-script-type" content="text/javascript" />
   <meta http-equiv="content-style-type" content="text/css" />
   <!-- BEGIN switch_compat_meta -->
   <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
   <!-- END switch_compat_meta -->
   <!-- BEGIN switch_canonical_url -->
   <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
   <!-- END switch_canonical_url -->
   {META_FAVICO}
   {META}
   {META_FB_LIKE}
   <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
   {T_HEAD_STYLESHEET}
   {CSS}
   <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
   <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
   <script src="{JQUERY_PATH}" type="text/javascript"></script>
   <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>

   <!-- BEGIN switch_fb_login -->
   <script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
   <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
   <!-- END switch_fb_login -->

   <!-- BEGIN switch_ticker -->
   <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />
   <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
   <!-- END switch_ticker -->

   <!-- BEGIN switch_ticker_new -->
   <script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
   <script type="text/javascript">//<![CDATA[
      /* Definir le sens de direction en fonction du panneau admin */
      var tickerDirParam = "{switch_ticker.DIRECTION}";
      var slid_vert = false;
      var auto_dir = 'next';
      var h_perso = parseInt({switch_ticker.HEIGHT});

      switch( tickerDirParam )
      {
         case 'top' :
            slid_vert = true;
            break;

         case 'left':
            break;

         case 'bottom':
            slid_vert = true;
            auto_dir = 'prev';
            break;

         case 'right':
            auto_dir = 'prev';
            break;

         default:
            slid_vert = true;
      }

      $(document).ready(function() {
         var w_cont = $('#fa_ticker_container').width();

         if (w_cont > 0)
         {
            $('#fa_ticker_container').width(w_cont);

            /* Affichage de la liste */
            $('#fa_ticker_content').css('display','block');

            /* Calcul des dimensions du conteneur et des elements */
            var width_max = $('ul#fa_ticker_content').width();
            var width_item = Math.floor(width_max / {switch_ticker.SIZE});
            var height_max = h_perso;

            /* Calcul de la hauteur maximale du conteneur en fonction des elements et de la hauteur personnalisee dans l'admin */
            $('ul#fa_ticker_content li').each( function () {
               if ($(this).height() > height_max)
               {
                  height_max = $(this).height();
               }
            } );

            /* Redimensionnement des elements et des images trop larges */
            $('ul#fa_ticker_content li').width(width_item).height(height_max).find('img').each(function () {
               if ($(this).width() > width_item)
               {
               var ratio      = $(this).width() / width_item;
               var new_height = Math.round($(this).height() / ratio);
               $(this).height(new_height).width(width_item);
               }
            });

            /* Redimensionnement et centrage du conteneur en mode vertical */
            if (slid_vert)
            {
               $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
            }

            /* Initialisation du caroussel */
            $('#fa_ticker_content').jcarousel({
                  vertical: slid_vert,
               wrap: 'circular',
               auto: {switch_ticker.STOP_TIME},
               auto_direction: auto_dir,
            scroll: 1,
            size: {switch_ticker.SIZE},
            height_max: height_max,
            animation: {switch_ticker.SPEED}
            });
         }
         else
         {
            $('ul#fa_ticker_content li:not(:first)').css('display','none');
            $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
         }
      });
   //]]>
   </script>
   <!-- END switch_ticker_new -->

   <script type="text/javascript">//<![CDATA[
   $(document).ready(function(){
      <!-- BEGIN switch_enable_pm_popup -->
         pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
         pm.focus();
      <!-- END switch_enable_pm_popup -->
      <!-- BEGIN switch_report_popup -->
         report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
         report.focus();
      <!-- END switch_report_popup -->
      <!-- BEGIN switch_ticker -->
         ticker_start({switch_ticker.HEIGHT}, {switch_ticker.SPACING}, {switch_ticker.SPEED}, '{switch_ticker.DIRECTION}', {switch_ticker.STOP_TIME});
      <!-- END switch_ticker -->
   });

   <!-- BEGIN switch_login_popup -->
      var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
   <!-- END switch_login_popup -->

   <!-- BEGIN switch_login_popup -->
   $(document).ready( function() {
      $(window).resize(function() {
         var windowWidth = document.documentElement.clientWidth;
         var popupWidth = $("#login_popup").width();
         var mypopup = $("#login_popup");

         $("#login_popup").css({
         "left": windowWidth/2 - popupWidth/2
            });
      });
   });
   <!-- END switch_login_popup -->
   //]]>
   </script>
   {GREETING_POPUP}
   <!-- BEGIN switch_ticker_new -->
   <style>
   .jcarousel-skin-tango .jcarousel-item {
      text-align:center;
      width: 10px;
   }

   .jcarousel-skin-tango .jcarousel-item-horizontal {
      margin-right: {switch_ticker.SPACING}px;
   }

   .jcarousel-skin-tango .jcarousel-item-vertical {
      margin-bottom: {switch_ticker.SPACING}px;
   }
   </style>
   <!-- END switch_ticker_new -->
   {HOSTING_JS}
   <!-- BEGIN google_analytics_code -->
   <script type="text/javascript">
   //<![CDATA[
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
    _gaq.push(['_trackPageview']);
   _gaq.push(['_trackPageLoadTime']);

   <!-- BEGIN google_analytics_code_bis -->
   _gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
   _gaq.push(['b._trackPageview']);
   <!-- END google_analytics_code_bis -->

    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
   //]]>
   </script>
   <!-- END google_analytics_code -->
</head>
  
   <div id="menu">
          <div>
              <a class="bouton" href="#">Fermer le menu</a><br />
          </div>
          
          <center><strong>Les News</strong></center>
   <marquee behavior="scroll" align="center" direction="up" height="80" scrollamount="1" scrolldelay="1" onmouseover='this.stop()' onmouseout='this.start()'>
          <span style="display: block; text-align: justify; color: #ffffff; font-size: 11px;">
            <strong>~ xx/xx/xxxx :</strong> Blablabla<br />
          </span>
   </marquee>
          
          <center><strong>Liens rapides</strong></center>
          <center><em>Principaux</em></center>
          <a href="/index.htm">Accueil</a><br />
          <a href="/search">Recherche</a><br />
          <a href="/memberlist">Membres</a><br />
          <a href="/groups">Groupes</a><br />
          <a href="/profile?mode=editprofile">Profil</a><br />
      <!-- BEGIN switch_user_logged_in -->
   <a href="/privmsg?folder=inbox" id="mp" alt="Messages Privés">Messages Privés</a><br />
   <a href="/login?logout" alt="connexion">Déconnexion</a>
      <!-- END switch_user_logged_in -->
          
      <!-- BEGIN switch_user_logged_out -->
   <a href="/login" alt="Connexion">Connexion</a><br />
   <a href="/register" alt="S'inscrire">Nous rejoindre</a>
      <!-- END switch_user_logged_out -->
          <br /><br />
        
          <center><em>Commandes</em></center>
          <a href="#" target="_blank">Lien</a><br />
          <a href="#" target="_blank">Lien</a><br />
          <a href="#" target="_blank">Lien</a><br />
          <a href="#" target="_blank">Lien</a><br />
          <a href="#" target="_blank">Lien</a><br />
          <a href="#" target="_blank">Lien</a><br />
          <a href="#" target="_blank">Lien</a><br />
          <a href="#" target="_blank">Lien</a><br />
          <a href="#" target="_blank">Lien</a>
            <br /><br />
            <br /><br />
            
            <center><a href="#top"><img src="http://www.pixyup.com/uploads/290148104efbb8ca57b2d.png" /></a>
              <a href="#bottom"><img src="http://www.pixyup.com/uploads/290148244efbb8d8e7c64.png" /></a></center>
          <a class="bouton2" href="#menu">Ouvrir le menu</a>
   </div>

<div style="visibility:hidden">{GENERATED_NAV_BAR}</div>
  
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
   <!-- BEGIN hitskin_preview -->
   <div id="hitskin_preview" style="display: block;">
      <h1><img src="http://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> Hit<em>skin</em>.com</h1>
      <div class="content">
         <p>
            {hitskin_preview.L_THEME_SITE_PREVIEW}
            <br />
            <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
         </p>
      </div>
   </div>
   <!-- END hitskin_preview -->

   <!-- BEGIN switch_login_popup -->
   <div id="login_popup">
      <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0">
         <tr height="25">
            <td class="catLeft">
               <span class="genmed module-title">{SITENAME}</span>
            </td>
         </tr>
         <tr height="{LOGIN_POPUP_MSG_HEIGHT}">
            <td class="row1" align="left" valign="top">
               <div id="login_popup_buttons">
                  <form action="{S_LOGIN_ACTION}" method="get">
                     <input type="submit" class="mainoption" value="{L_LOGIN}" />
                     <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
                     <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
                  </form>
               </div>
               <span class="genmed">{LOGIN_POPUP_MSG}</span>
            </td>
         </tr>
      </table>
   </div>
   <!-- END switch_login_popup -->

   <a name="top"></a>
   {JAVASCRIPT}

   <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
      <tr>
         <td class="bodyline">
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
               <tr>
                  <!-- BEGIN switch_logo_left -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_left -->
                  <td align="center" width="100%" valign="middle">
                     <!-- BEGIN switch_logo_center -->
                     <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                     <br />
                     <!-- END switch_logo_center -->
                     <div class="maintitle">{MAIN_SITENAME}</div>
                     <br />
                     <span class="gen">{SITE_DESCRIPTION}<br />  </span>
                  </td>
                  <!-- BEGIN switch_logo_right -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_right -->
               </tr>
            </table>

            <div style="clear: both;"></div>

            <!-- BEGIN switch_ticker_new -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
               <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                     <td {CLASS_TABLE_TYPE} align="left" class="row1">
                        <div id="fa_ticker_container">
                           <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">
                              <!-- BEGIN ticker_row -->
                              <li>{switch_ticker.ticker_row.ELEMENT}</li>
                              <!-- END ticker_row -->
                           </ul>
                        </div>
                     </td>
                  </tr>
               </table>
            </div>
            <!-- END switch_ticker_new -->

            <!-- BEGIN switch_ticker -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
               <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                     <td {CLASS_TABLE_TYPE} align="left" class="row1">
                        <div id="fa_ticker_container">
                           <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                              <div class="fa_ticker_content">
                                 <!-- BEGIN ticker_row -->
                                 <div>{switch_ticker.ticker_row.ELEMENT}</div>
                                 <!-- END ticker_row -->
                              </div>
                           </div>
                        </div>
                     </td>
                  </tr>
               </table>
            </div>
            <!-- END switch_ticker -->

            <div id="page-body">
               <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
                  <table cellpadding="0" cellspacing="0" width="100%" class="three-col">
                     <tbody>
                        <tr>
                           <td valign="top" width="{C1SIZE}">
                              <div id="{ID_LEFT}">
                                 <!-- BEGIN giefmod_index1 -->
                                 {giefmod_index1.MODVAR}
                                    <!-- BEGIN saut -->
                                    <div style="height:{SPACE_ROW}px"></div>
                                    <!-- END saut -->
                                 <!-- END giefmod_index1 -->
                              </div>
                           </td>
                           <td valign="top" width="100%">
<!-- BEGIN html_validation -->
                           </td>
                        </tr>
                     </tbody>
                  </table>
               </div>
            </div>
         </td>
      </tr>
   </table>
</body>
</html>
<!-- END html_validation -->
N'oubliez pas de remplacer les liens dans le code signalez par :" adresse de votre forum" Winkà partir de la l.218
Publiez votre template et dirigez-vous vers votre Feuille de style CSS =)!


Partie CSS

Maintenant, Ajoutez ce CSS au votre :

Code:
 #menu /*Menu latéral*/
{
  position: fixed;
  top: 0;
  left: 0;
  margin-left: -160px;
  background-color: #272727;
  border-right: 1px #ccc solid;
  font-family: Arial, serif;
  width: 150px;
  height:100%;
  padding: 10px;
  opacity : 0.8;
  -khtml-opacity:0.8;
  -moz-opacity:0.8;
  -ms-filter: "alpha(opacity=80)";
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
  filter : alpha(opacity=80);
  transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  -htm-transition: all 1s;
  -webkit-transition: all 1s;
}

.bouton /*Bouton "Fermer le menu"*/
{
  display: block;
  text-align: center;
  background-color: #5d5d5d;
  border: 1px #ccc solid;
  color: #ffffff!important;
  font-weight: bold;
  text-shadow: none!important;
  margin: auto;
  margin-top: 20px;
  padding: 3px;
  border-radius: 30px;
  -moz-border-radius: 30px;
  -o-border-radius: 30px;
  -htm-border-radius: 30px;
  -webkit-border-radius: 30px;
}

.bouton2 /*Bouton "Ouvrir le menu"*/
{
  display: block;
  position: fixed;
  top: 0;
  left: 20px;
  text-align: center;
  background-color: #5d5d5d;
  border: 1px #ccc solid;
  border-top: 0px;
  color: #ffffff!important;
  font-weight: bold;
  padding-left: 10px;
  padding-right: 10px;
  text-shadow: none!important;
  border-radius: 0 0 10px 10px;
  -moz-border-radius: 0 0 10px 10px;
  -o-border-radius: 0 0 10px 10px;
  -htm-border-radius: 0 0 10px 10px;
  -webkit-border-radius: 0 0 10px 10px;
}

 #menu:target /*Ne pas modifier*/
{
  margin-left: 0;
  transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  -htm-transition: all 1s;
  -webkit-transition: all 1s;
}

 #menu a /*Liens du menu*/
{
  z-index: 1;
  text-transform: uppercase;
  font-size: 12px;
  text-shadow: 1px 1px 0 #000;
  color: #5e5e5e;
}
Partie JS

Créez une nouvelle page JS effective sur "Toutes les pages" et mettez-y :
Code:
jQuery().ready(function(){
        var newmp = $("#i_icon_mini_new_message");
        if(!newmp.length) return;
        $("#mp").attr('style','color: darkred; font-weight: bold;');
});





Menu qui reste toujours ouvert


Partie Template

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
   <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
   <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
   <meta http-equiv="content-script-type" content="text/javascript" />
   <meta http-equiv="content-style-type" content="text/css" />
   <!-- BEGIN switch_compat_meta -->
   <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
   <!-- END switch_compat_meta -->
   <!-- BEGIN switch_canonical_url -->
   <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
   <!-- END switch_canonical_url -->
   {META_FAVICO}
   {META}
   {META_FB_LIKE}
   <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
   {T_HEAD_STYLESHEET}
   {CSS}
   <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
   <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
   <script src="{JQUERY_PATH}" type="text/javascript"></script>
   <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>

   <!-- BEGIN switch_fb_login -->
   <script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
   <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
   <!-- END switch_fb_login -->

   <!-- BEGIN switch_ticker -->
   <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />
   <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
   <!-- END switch_ticker -->

   <!-- BEGIN switch_ticker_new -->
   <script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
   <script type="text/javascript">//<![CDATA[
      /* Definir le sens de direction en fonction du panneau admin */
      var tickerDirParam = "{switch_ticker.DIRECTION}";
      var slid_vert = false;
      var auto_dir = 'next';
      var h_perso = parseInt({switch_ticker.HEIGHT});

      switch( tickerDirParam )
      {
         case 'top' :
            slid_vert = true;
            break;

         case 'left':
            break;

         case 'bottom':
            slid_vert = true;
            auto_dir = 'prev';
            break;

         case 'right':
            auto_dir = 'prev';
            break;

         default:
            slid_vert = true;
      }

      $(document).ready(function() {
         var w_cont = $('#fa_ticker_container').width();

         if (w_cont > 0)
         {
            $('#fa_ticker_container').width(w_cont);

            /* Affichage de la liste */
            $('#fa_ticker_content').css('display','block');

            /* Calcul des dimensions du conteneur et des elements */
            var width_max = $('ul#fa_ticker_content').width();
            var width_item = Math.floor(width_max / {switch_ticker.SIZE});
            var height_max = h_perso;

            /* Calcul de la hauteur maximale du conteneur en fonction des elements et de la hauteur personnalisee dans l'admin */
            $('ul#fa_ticker_content li').each( function () {
               if ($(this).height() > height_max)
               {
                  height_max = $(this).height();
               }
            } );

            /* Redimensionnement des elements et des images trop larges */
            $('ul#fa_ticker_content li').width(width_item).height(height_max).find('img').each(function () {
               if ($(this).width() > width_item)
               {
               var ratio      = $(this).width() / width_item;
               var new_height = Math.round($(this).height() / ratio);
               $(this).height(new_height).width(width_item);
               }
            });

            /* Redimensionnement et centrage du conteneur en mode vertical */
            if (slid_vert)
            {
               $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
            }

            /* Initialisation du caroussel */
            $('#fa_ticker_content').jcarousel({
                  vertical: slid_vert,
               wrap: 'circular',
               auto: {switch_ticker.STOP_TIME},
               auto_direction: auto_dir,
            scroll: 1,
            size: {switch_ticker.SIZE},
            height_max: height_max,
            animation: {switch_ticker.SPEED}
            });
         }
         else
         {
            $('ul#fa_ticker_content li:not(:first)').css('display','none');
            $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
         }
      });
   //]]>
   </script>
   <!-- END switch_ticker_new -->

   <script type="text/javascript">//<![CDATA[
   $(document).ready(function(){
      <!-- BEGIN switch_enable_pm_popup -->
         pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
         pm.focus();
      <!-- END switch_enable_pm_popup -->
      <!-- BEGIN switch_report_popup -->
         report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
         report.focus();
      <!-- END switch_report_popup -->
      <!-- BEGIN switch_ticker -->
         ticker_start({switch_ticker.HEIGHT}, {switch_ticker.SPACING}, {switch_ticker.SPEED}, '{switch_ticker.DIRECTION}', {switch_ticker.STOP_TIME});
      <!-- END switch_ticker -->
   });

   <!-- BEGIN switch_login_popup -->
      var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
   <!-- END switch_login_popup -->

   <!-- BEGIN switch_login_popup -->
   $(document).ready( function() {
      $(window).resize(function() {
         var windowWidth = document.documentElement.clientWidth;
         var popupWidth = $("#login_popup").width();
         var mypopup = $("#login_popup");

         $("#login_popup").css({
         "left": windowWidth/2 - popupWidth/2
            });
      });
   });
   <!-- END switch_login_popup -->
   //]]>
   </script>
   {GREETING_POPUP}
   <!-- BEGIN switch_ticker_new -->
   <style>
   .jcarousel-skin-tango .jcarousel-item {
      text-align:center;
      width: 10px;
   }

   .jcarousel-skin-tango .jcarousel-item-horizontal {
      margin-right: {switch_ticker.SPACING}px;
   }

   .jcarousel-skin-tango .jcarousel-item-vertical {
      margin-bottom: {switch_ticker.SPACING}px;
   }
   </style>
   <!-- END switch_ticker_new -->
   {HOSTING_JS}
   <!-- BEGIN google_analytics_code -->
   <script type="text/javascript">
   //<![CDATA[
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
    _gaq.push(['_trackPageview']);
   _gaq.push(['_trackPageLoadTime']);

   <!-- BEGIN google_analytics_code_bis -->
   _gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
   _gaq.push(['b._trackPageview']);
   <!-- END google_analytics_code_bis -->

    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
   //]]>
   </script>
   <!-- END google_analytics_code -->
</head>
  
   <div id="menu">
          <center><strong>Les News</strong></center>
   <marquee behavior="scroll" align="center" direction="up" height="80" scrollamount="1" scrolldelay="1" onmouseover='this.stop()' onmouseout='this.start()'>
          <span style="display: block; text-align: justify; color: #ffffff; font-size: 11px;">
            <strong>~ xx/xx/xxxx :</strong> Blablabla<br />
          </span>
   </marquee>
          
          <center><strong>Liens rapides</strong></center>
          <center><em>Principaux</em></center>
          <a href="/index.htm">Accueil</a><br />
          <a href="/search">Recherche</a><br />
          <a href="/memberlist">Membres</a><br />
          <a href="/groups">Groupes</a><br />
          <a href="/profile?mode=editprofile">Profil</a><br />
      <!-- BEGIN switch_user_logged_in -->
   <a href="/privmsg?folder=inbox" id="mp" alt="Messages Privés">Messages Privés</a><br />
   <a href="/login?logout" alt="connexion">Déconnexion</a>
      <!-- END switch_user_logged_in -->
          
      <!-- BEGIN switch_user_logged_out -->
   <a href="/login" alt="Connexion">Connexion</a><br />
   <a href="/register" alt="S'inscrire">Nous rejoindre</a>
      <!-- END switch_user_logged_out -->
          <br /><br />
        
          <center><em>Commandes</em></center>
          <a href="#" target="_blank">Lien</a><br />
          <a href="#" target="_blank">Lien</a><br />
          <a href="#" target="_blank">Lien</a><br />
          <a href="#" target="_blank">Lien</a><br />
          <a href="#" target="_blank">Lien</a><br />
          <a href="#" target="_blank">Lien</a><br />
          <a href="#" target="_blank">Lien</a><br />
          <a href="#" target="_blank">Lien</a><br />
          <a href="#" target="_blank">Lien</a>
            <br /><br />
            <br /><br />
            
            <center><a href="#top"><img src="http://www.pixyup.com/uploads/290148104efbb8ca57b2d.png" /></a>
              <a href="#bottom"><img src="http://www.pixyup.com/uploads/290148244efbb8d8e7c64.png" /></a></center>
   </div>

<div style="visibility:hidden">{GENERATED_NAV_BAR}</div>
  
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
   <!-- BEGIN hitskin_preview -->
   <div id="hitskin_preview" style="display: block;">
      <h1><img src="http://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> Hit<em>skin</em>.com</h1>
      <div class="content">
         <p>
            {hitskin_preview.L_THEME_SITE_PREVIEW}
            <br />
            <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
         </p>
      </div>
   </div>
   <!-- END hitskin_preview -->

   <!-- BEGIN switch_login_popup -->
   <div id="login_popup">
      <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0">
         <tr height="25">
            <td class="catLeft">
               <span class="genmed module-title">{SITENAME}</span>
            </td>
         </tr>
         <tr height="{LOGIN_POPUP_MSG_HEIGHT}">
            <td class="row1" align="left" valign="top">
               <div id="login_popup_buttons">
                  <form action="{S_LOGIN_ACTION}" method="get">
                     <input type="submit" class="mainoption" value="{L_LOGIN}" />
                     <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
                     <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
                  </form>
               </div>
               <span class="genmed">{LOGIN_POPUP_MSG}</span>
            </td>
         </tr>
      </table>
   </div>
   <!-- END switch_login_popup -->

   <a name="top"></a>
   {JAVASCRIPT}

   <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
      <tr>
         <td class="bodyline">
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
               <tr>
                  <!-- BEGIN switch_logo_left -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_left -->
                  <td align="center" width="100%" valign="middle">
                     <!-- BEGIN switch_logo_center -->
                     <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                     <br />
                     <!-- END switch_logo_center -->
                     <div class="maintitle">{MAIN_SITENAME}</div>
                     <br />
                     <span class="gen">{SITE_DESCRIPTION}<br />  </span>
                  </td>
                  <!-- BEGIN switch_logo_right -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_right -->
               </tr>
            </table>

            <div style="clear: both;"></div>

            <!-- BEGIN switch_ticker_new -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
               <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                     <td {CLASS_TABLE_TYPE} align="left" class="row1">
                        <div id="fa_ticker_container">
                           <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">
                              <!-- BEGIN ticker_row -->
                              <li>{switch_ticker.ticker_row.ELEMENT}</li>
                              <!-- END ticker_row -->
                           </ul>
                        </div>
                     </td>
                  </tr>
               </table>
            </div>
            <!-- END switch_ticker_new -->

            <!-- BEGIN switch_ticker -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
               <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                     <td {CLASS_TABLE_TYPE} align="left" class="row1">
                        <div id="fa_ticker_container">
                           <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                              <div class="fa_ticker_content">
                                 <!-- BEGIN ticker_row -->
                                 <div>{switch_ticker.ticker_row.ELEMENT}</div>
                                 <!-- END ticker_row -->
                              </div>
                           </div>
                        </div>
                     </td>
                  </tr>
               </table>
            </div>
            <!-- END switch_ticker -->

            <div id="page-body">
               <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
                  <table cellpadding="0" cellspacing="0" width="100%" class="three-col">
                     <tbody>
                        <tr>
                           <td valign="top" width="{C1SIZE}">
                              <div id="{ID_LEFT}">
                                 <!-- BEGIN giefmod_index1 -->
                                 {giefmod_index1.MODVAR}
                                    <!-- BEGIN saut -->
                                    <div style="height:{SPACE_ROW}px"></div>
                                    <!-- END saut -->
                                 <!-- END giefmod_index1 -->
                              </div>
                           </td>
                           <td valign="top" width="100%">
<!-- BEGIN html_validation -->
                           </td>
                        </tr>
                     </tbody>
                  </table>
               </div>
            </div>
         </td>
      </tr>
   </table>
</body>
</html>
<!-- END html_validation -->
Partie CSS

Code:
#menu /*Menu latéral*/
{
  position: fixed;
  top: 0;
  left: 0;
  background-color: #272727;
  border-right: 1px #ccc solid;
  font-family: Arial, serif;
  width: 150px;
  height:100%;
  padding: 10px;
  opacity : 0.8;
  -khtml-opacity:0.8;
  -moz-opacity:0.8;
  -ms-filter: "alpha(opacity=80)";
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
  filter : alpha(opacity=80);
}

 #menu a /*Liens du menu*/
{
  z-index: 1;
  text-transform: uppercase;
  font-size: 12px;
  text-shadow: 1px 1px 0 #000;
  color: #5e5e5e;
}
Partie JS

Créez une nouvelle page JS effective sur "Toutes les pages" et mettez-y :
Code:
jQuery().ready(function(){
        var newmp = $("#i_icon_mini_new_message");
        if(!newmp.length) return;
        $("#mp").attr('style','color: darkred; font-weight: bold;');
});



Navigation




Voila ! Very Happy
J'espère que cette astuce vous aidera à embellir votre forum =)
Si vous avez des questions, n'hésitez pas à les poster Wink
Cordialement~~
Taktiik.

M.A.J :Astuce simplifié grâce à Alec Kuro. Merci à lui !

Be Shup's

Modifier la mise en page des Scrollbars de son forum - Ven 6 Juil 2012 - 22:19


Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Lien pour comprendre pourquoi le contenu n'est pas sous hide


Coucou !

Pour modifier la scrollbar de son forum, il suffit que d'utiliser du CSS. Rien de bien compliquer.

Petit exemple sur un bloc :
Je suis un texte qui s'amuse et s'amuse à être stupidement vraiment trop long et ainsi de suite. Roses are Red, Violets are Blue, bla bla bla of the rest of the poem.


Édition par Sparrow : cette astuce ne fonctionne que sous Chrome, Safari et Opéra (bref, les navigateurs "webkit")


Cette astuce a été faite à partie de ce tutoriel en anglais. En fait, c'est pratiquement sa traduction. Bref, passons au boulot !




Vous devez intégré ce code dans : PA >> Affichage >> Images et couleurs >> Couleurs >> Feuille de Style CSS"

Puis intégrez ce code :
Code:
/*La scrollbar elle-même #1*/
::-webkit-scrollbar {
}
/*Les boutons de la scrollbar (les flèches) #2*/
::-webkit-scrollbar-button {
}
/*L'espace sur lequel la barre de la scrollbarre défile #3*/
::-webkit-scrollbar-track {
}
/*L'espace sous la barre qui n'est pas couvert par la barre #4*/
::-webkit-scrollbar-track-piece {
}
/*La barre de la scrollbar #5*/
::-webkit-scrollbar-thumb {
}
/*Le coin en bas à droite quand il y a une scrollbar horizontale et verticale #6*/
::-webkit-scrollbar-corner {
}
/*Image de size du coin en bas à droite pour agrandir ou diminuer la zone #7*/
::-webkit-resizer {
}


Voir l'image pour quoi qui est quoi :
Tag css3 sur Never Utopia - graphisme, codage et game design Scrollbarparts


Avec les codes ci-haut, les scrollbars s'appliquent à tout le forum. Pour l'appliquer à des endroits spécifiques, spécifiez l'élément visé quand vous mettez le CSS.

Exemple où cela s'appliquerait sur un bloc avec la class "maclass" :
Code:
.maclass::-webkit-scrollbar {
}


Voila, vous pouvez bien évidemment ajoutez du CSS pour le personnaliser à vos goûts.


Pour les curieux, voilà le code de base pour l'exemple en haut :
Code:
/*La scrollbar elle-même*/
::-webkit-scrollbar {
  width: 10px; /*Largeur pour les scrollbars verticales*/
  height: 10px; /*Hauteur pour les scrollbars horizontales*/
  border-radius: 5px;
}
/*L'espace sur lequel la barre de la scrollbarre défile*/
::-webkit-scrollbar-track {
  background: #a3a3a3;
  width: 10px; /*Largeur pour les scrollbars verticales*/
  height: 10px; /*Hauteur pour les scrollbars horizontales*/
  border-radius: 5px;
}
/*La barre de la scrollbar*/
::-webkit-scrollbar-thumb {
  background: #757575;
  width: 10px; /*Largeur pour les scrollbars verticales*/
  height: 10px; /*Hauteur pour les scrollbars horizontales*/
  border-radius: 5px;
}


/*À voir dans les pseudo-class plus bas*/
::-webkit-scrollbar-thumb:hover {
  background: #656565;
}
::-webkit-scrollbar-thumb:active {
  background: #454545;
}





Pour personnaliser la scrollbar plus en profondeur, vous pouvez utiliser des pseudo-class sélecteur, comme ceux-ci :
Code:
/*S'applique à une scrollbar horizontale*/
:horizontal

/*S'applique à une scrollbar verticale*/
:vertical

/*S'applique aux boutons et au fond derrière la barre défilante qui sont placés avant la barre  de la scrollbar*/
:start

/*S'applique aux boutons et au fond derrière la barre défilante qui sont placés après la barre  de la scrollbar*/
:end

/*S'applique si il y a un coin en bas à droite (donc si il y a une scrollbar verticale et une scrollbar horizontale en même temps)*/
:corner-present

/*S'applique quand on est en train de cliquer sur la pièce de la scrollbar visée*/
:active

/*S'applique quand on survole le bout de la pièce de la scrollbar visée*/
:hover


Voila, vous pouvez bien évidemment ajoutez du CSS pour le personnaliser à vos goûts.


Petit exemple où je veux seulement sélectionner le bouton d'une scrollbar vertical qui est avant la barre de défilement (bref le bouton avec la flèche vers le haut) :
Code:
::-webkit-scrollbar-button:vertical:start {
}


Petit exemple ou je veux seulement mettre du style à la barre défilante de la scrollbar quand je clique dessus :
Code:
::-webkit-scrollbar-thumb:active {
}


Voila, vous pouvez bien évidemment ajoutez du CSS pour le personnaliser à vos goûts.




Merci pour cette petite lecture. ^^

Bisous et bonne soirée/journée.

Bloc de navigation rapide (haut, bas et ancres) - Lun 25 Juin 2012 - 17:08



Navigation flottante

Ancres & Liens


Bonjour !

Voici un tutoriel sur les bloc de navigation comme vous trouvez parfois sur la droite ou la gauche des forum en "flottement", permettant d'aller en haut de page, bas de page, mais aussi à divers endroits du forum.
Tout d'abord, si vous recherchez simplement un tutoriel pour le "haut" et "bas", je vous oriente vers celui-ci qui vous suffira amplement.


Celui que je vous propose abouti à un résultat que vous pourrez voir sur ce forum test : il s'agit du bloc jaune à gauche, survolé il s'ouvre et vous propose 4 types de liens que je vais détailler dans le tutoriel.

- les ancres de base (haut et bas)
- les liens normaux (liens que vous voulez mettre à disposition, il peut s'agir du règlement, du contexte, etc...)
- les ancres crées (points de repères crées sur le forum)
- les ancres crées avec changement de page au besoin (c'est un lien + ancre qui fera que même dans une page au fin fond du forum, le lien vous amènera vers la catégorie choisie)

En cas d'utilisation de ce tutoriel, merci de mettre sur votre forum un CREDIT pour Never-Utopia. Ce geste de remerciement simple nous permet de "vivre" et de pouvoir vous apporter toujours plus d'aide ! Merci d'avance !



I/ Création du bloc : template + css

▬ Tout d'abord allons ajouter notre bloc dans le template overall_header. Repérez cette ligne de code, ligne 195 environ (et si vous n'êtes pas sur phpBB2, repérez simplement la balise body, même si elle ne ressemble pas à cela) :

Code:
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">


En dessous, ajoutez votre code du bloc navigation :
Code:
    <div id="fast_links">
   
    <div id="fast_links_contenu">
      <a href="#top" class="fast_link">Haut</a>
      <a href="#" class="fast_link">Lien 1</a>
      <a href="#" class="fast_link">Lien 2</a>
      <a href="#ancre1" class="fast_link">Ancre simple</a>
      <a href="http://jesuisunelegende.forumactif.com/#ancre2" class="fast_link">Ancre avec changement de page</a>
      <a href="#bottom" class="fast_link">Bas</a>
      </div>
   
  </div>


=> mon contenu est un exemple des différents liens possibles, à vous de voir lesquels vous gardez ensuite.

Information : si votre forum comporte déjà des changements sur ce template, notamment une navigation en haut de page, placez ce bloc avant ou après la navigation mais les distances du css seront peut-être à adapter (notamment celle du "margin-top" ou "marge haute").


N'oubliez pas de valider votre modification.

▬ Allez ensuite dans votre feuille css et affichez le css suivant :

Code:
/* FAST LINKS */

#fast_links
{
  position: fixed;
  z-index: 999;
  width: 300px;
  height: 200px;
  margin-top: -200px;
  margin-left: -250px;
  background: url(http://img11.hostingpics.net/pics/672640fondnavig.png) center center no-repeat;
  transform: all;
  -moz-transform: all;
  -o-transform: all;
  -htm-transform: all;
  -webkit-transform: all;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
#fast_links:hover
{
  margin-left: -10px;
  transform: all;
  -moz-transform: all;
  -o-transform: all;
  -htm-transform: all;
  -webkit-transform: all;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
#fast_links_contenu
{
  margin-top: 25px;
  margin-left: 25px;
}
.fast_link
{
  display: block;
  width: 200px;
  padding: 4px;
  background-color: #ebe4d0;
  font-weight: bold;
  border-left: 2px solid #a1883a;
  border-right: 2px solid #a1883a;
  text-align: center;
  font-size: 12px;
  text-shadow: 1px 1px 0px #ffffff;
}
.fast_link:hover
{
  background-color: #f8f6f0;
  border-left: 2px solid #f5d553;
  border-right: 2px solid #f5d553;
}


Informations : merci de changer l'image de fond, celle-ci étant utilisée sur un forum. Réalisez une image de même taille avec une illustration sur la droite pour faire l'onglet d'ouverture.


Validez votre css, adaptez au besoin les tailles/placement du bloc, ainsi que la mise en forme des liens normaux et survolés à votre goût.


II/ Les Ancres de base et liens simples

Il y a deux types de lien que vous pouvez mettre très facilement :

▬ les ancres de base qui ont pour adresse "#top" et "#bottom" mèneront en haut et en bas de votre forum. Elles sont déjà placées sur le template donc pas besoin de la toucher si vous les voulez. Vous pouvez les remplacer par des flèches si vous le souhaitez.

▬ les liens simples : c'est tout simplement les liens vers votre règlement, les présentations des membres, ou tout topic important de votre forum.

Conseil : changer ces liens signifie être sur le compte fondateur et aller dans le template, ce qui est donc fatalement plus compliqué de l'aller juste dans la PA. Du coup, il n'est pas réellement conseillé de mettre des liens que vous savez devoir changer à court terme, comme des concours, ou des événements ponctuels. Il est préférable d'afficher des liens génériques qui n'auront pas à être modifiés trop souvent. Après, c'est à votre choix x)


Ces deux types de liens sont très simples à mettre et ne demandent pas d'autres modification, je vous laisse donc les ajouter tranquillement. Pour cela bien sûr il faut retourner éditer le template overall_header en modifiant/ajoutant vos liens.


III/ Les Ancres crées

Bon, stop, un petit point de codage avant tout, pour les curieux ou simplement ceux qui ne veulent pas copier bêtement du code :
Qu'est-ce qu'une ancre ? C'est un point que l'un crée sur une page, sous forme d'un lien qui n'en est pas vraiment un (le texte ne peut mener à rien) et qui par la suite va nous permettre de créer un autre lien qui nous mènera vers ce point. C'est pas clair ? En gros si sur une même page vous avez un pavé de dix paragraphe, vous pouvez mettre une ancre à chaque titre de paragraphe, puis créer une navigation en haut de page dans laquelle chaque lien mènera à l'un des titres de paragraphe. Concrètement, on ne change pas de page, il s'agit d'un lien menant vers un élément de la page.


Vous l'aurez compris, il ne suffit pas de mettre un lien, il faut d'abord créer l'ancre elle-même. Pour cela, vous allez devoir vous rendre dans vos titres de catégorie. Pour plus de simplicité, on mettra les ancres sur les titres de catégorie car elles ne modifient pas ce titre, ça ne gêne rien.
▬ Allez donc dans votre titre de catégorie (celui que vous voulez placer en ancre), et affichez-le comme ceci :

Code:
<a name="ancre1">Votre 1ère catégorie</a>


"Votre 1ière catégorie" = le titre normal de votre catégorie.

Une fois fait, allez dans votre template overall_header et placez votre ancre en guise de lien comme ceci :

Code:
<a href="#ancre1" class="fast_link">Ancre simple</a>


Ce code est déjà présent puisque c'est mon exemple, mais veillez à ce que votre nom d'ancre soit le même ! Ici pour moi "ancre1" doit se retrouver aux deux endroits : dans le titre de catégorie ET dans le lien de la navigation.

Testez : le fait de cliquer sur ce lien dans la navigation amène à la catégorie voulue.


IV/ Les Ancres crées avec changement de page

Vous constaterez que ces ancres là ne fonctionnent que si vous êtes sur la page d'accueil, sans quoi ça vous ramène en haut du premier message par exemple, mais c'est tout. Si vous voulez que même ailleurs sur le forum ce lien vous ramène à la première page en vous centrant sur la catégorie choisie, il faut procéder autrement :
▬ le début reste le même, l'ancre a été placée, elle ne change pas.
▬ le lien à mettre dans la navigation doit comporter la page d'accueil de votre forum + l'ancre, comme ceci :

Code:
<a href="http://jesuisunelegende.forumactif.com/#ancre2" class="fast_link">Ancre avec changement de page</a>


Là aussi le code était déjà présent dans mon exemple. Vous pourrez essayer d'aller à l'intérieur du forum, au milieu d'un sujet et cliquer sur ce lien de la navigation rapide, il vous remettra sur la première page du forum sur la catégorie choisie.

D'autres ancres ? Plein d'ancres ?? Yep ! Vous pouvez en faire autant que voulu, sur toutes vos catégories, le tout est que chaque duo "ancre"/"lien d'ancre" aient le même nom ! Dans mon cas "ancre1, ancre2, etc... J'ai fait simple x), mais ça peut être vos noms de catégorie ou autre chose.
Il est cependant VITAL que ce nom ne comporte ni espace ni caractère spéciaux !



En cas d'utilisation de ce tutoriel, merci de mettre sur votre forum un CREDIT pour Never-Utopia. Ce geste de remerciement simple nous permet de "vivre" et de pouvoir vous apporter toujours plus d'aide ! Merci d'avance !


Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^


Revenir en haut

La date/heure actuelle est Mar 19 Mar 2024 - 3:26