Ajouter feuille de style et script
Style et script : fichier ou code source
Service de téléchargements (v1)
Service de changement de skin (thème) à la volée
Service de calendrier avec des liens
Animations au survol - Images avec flip-2-
→ Des images qui changent lors du survol de la souris avec des flips (des rotations), anecdotique... ou pour varier les effets.
rotation centrale
Voilà de la place pour afficher un autre contenu.
rotation horizontale
Voilà de la place pour afficher un autre contenu.
rotation verticale...
Voilà de la place pour afficher un autre contenu.
avec des réglages différents...
Voilà de la place pour afficher un autre contenu.
(tailles, fond du back-face...)
Toutes mes images sont placées dans un dossier tutoriels/imagettes placé dans le dossier images d'adHoc.
Les règles de style sont dans la partie [style type="text/css"]...[/style]
Elle peut être directement, encadrée de ces balises au début du code source de la page ou de la boîte ou dans un fichier de style additionnel comme c'est le cas ici
Voir son contenu ci dessous :
#f1_container {
position: relative;
margin: 10px auto;
width: 192px; /*largeur images*/
height: 192px; /*hauteur images*/
z-index: 1;
background-color: rgba(242, 217, 228, 0.7); /*couleur de fond*/
border:0px solid #F2D9E4; /*bordure*/
border-radius:30px; /*arrondis*/
}
#f1_container {
perspective: 500px;
}
#f1_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1.5s linear; /*temps et mode de transition*/
}
#f1_container:hover #f1_card {
transform: rotateZ(360deg); /*rotation centrale*/
border-radius: 30px; /*arrondis*/
box-shadow: 5px 5px 5px #111111; /*ombre portée*/
}
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
#f2_container {
position: relative;
margin: 10px auto;
width: 192px; /*largeur images*/
height: 192px; /*hauteur images*/
z-index: 1;
background-color: rgba(208, 224, 240, 0.7); /*couleur de fond*/
border:0px solid #D0E0F0; /*bordure*/
border-radius:30px; /*arrondis*/
}
#f2_container {
perspective: 500px;
}
#f2_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1.0s linear; /*temps et mode de transition*/
}
#f2_container:hover #f2_card {
transform: rotateX(180deg); /*rotation horizontale*/
border-radius: 30px; /*arrondis*/
box-shadow: 5px -5px 5px #111111; /*ombre portée*/
}
.face.back2 {
display: block;
transform: rotateX(180deg); /*rotation horizontale*/
box-sizing: border-box;
padding: 10px; /*marges intérieure*/
color: #ffffff; /*couleur texte*/
text-align: center; /*alignement*/
background-color: #217285; /*couleur de fond*/
opacity:0.9; /*légère transparence*/
border-radius:30px; /*arrondis*/
}
#f3_container {
position: relative;
margin: 10px auto;
width: 128px; /*largeur images*/
height: 192px; /*hauteur images*/
z-index: 1;
background-color: rgba(237, 184, 245, 0.7); /*couleur de fond*/
border:0px solid #EDB8F5; /*bordure*/
border-radius:30px; /*arrondis*/
}
#f3_container {
perspective: 500px;
}
#f3_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1.0s linear; /*temps et mode de transition*/
}
#f3_container:hover #f3_card {
transform: rotateY(180deg); /*rotation verticale*/
border-radius: 30px; /*arrondis*/
box-shadow: -5px 5px 5px #111111; /*ombre portée*/
}
.face.back3 {
display: block;
transform: rotateY(180deg); /*rotation verticale*/
box-sizing: border-box;
padding: 10px; /*marges intérieure*/
color: #ffffff; /*couleur texte*/
text-align: center; /*alignement*/
background-color: #3A1B52; /*couleur de fond*/
opacity:0.9; /*légère transparence*/
border-radius:30px; /*arrondis*/
}
#f4_container {
position: relative;
margin: 10px auto;
width: 192px; /*largeur images*/
height: 192px; /*hauteur images*/
z-index: 1;
background-color: rgba(208, 236, 240, 0.7); /*couleur de fond*/
border:0px solid #D0ECF0; /*bordure*/
border-radius:30px; /*arrondis*/
}
#f4_container {
perspective: 500px;
}
#f4_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1.0s ease; /*temps et mode de transition*/
}
#f4_container:hover #f4_card {
transform: rotateY(180deg); /*rotation verticale*/
border-radius: 30px; /*arrondis*/
box-shadow: -5px 5px 5px #111111; /*ombre portée*/
}
.face.back4 {
display: block;
transform: rotateY(180deg); /*rotation verticale*/
box-sizing: border-box;
padding: 10px; /*marges intérieure*/
color: #ffffff; /*couleur texte*/
text-align: center; /*alignement*/
background-color: #15434F; /*couleur de fond*/
opacity:0.9; /*légère transparence*/
border-radius:30px; /*arrondis*/
}
#f5_container {
position: relative;
margin: 10px auto;
width: 256px; /*largeur images*/
height: 192px; /*hauteur images*/
z-index: 1;
background-color: rgba(252, 225, 205, 0.7); /*couleur de fond*/
border:0px solid #FCE1CD; /*bordure*/
border-radius:30px; /*arrondis*/
}
#f5_container {
perspective: 500px;
}
#f5_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1.0s ease; /*temps et mode de transition*/
}
#f5_container:hover #f5_card {
transform: rotateY(180deg); /*rotation verticale*/
border-radius: 30px; /*arrondis*/
box-shadow: -5px 5px 5px #111111; /*ombre portée*/
}
.face.back5 {
display: block;
transform: rotateY(180deg); /*rotation verticale*/
box-sizing: border-box;
padding: 10px; /*marges intérieure*/
color: #ffffff; /*couleur texte*/
text-align: center; /*alignement*/
background-color: #702F10; /*couleur de fond*/
opacity:0.9; /*légère transparence*/
border-radius:30px; /*arrondis*/
}
Chaque image possède ses propres id avec des règles particulières #f1_container #f2_container ... . Seule la classe .face est présente une seule fois. Il y a différenciation des classes .face.back (.face.back2 .face.back3 ...) pour régler les attributs des versos de chaque image.
La rotation centrale est évidemment anecdotique et n'a pas de .face.back !
Le mode de la transition est, soit linear soit ease pour les deux dernières images.
J'ai nommé ce fichier animsurvol_images_flip2.css : Il est placé dans le dossier css des skins et son appel au début du code source est le suivant :
<link charset="utf-8" href="skin/css/animsurvol_images_flip2.css" rel="stylesheet" />
Et enfin, ce type de code là où vous souhaitez placer les images :
<div style="margin:0 50px; display: inline-block;">
<div id="f1_container">
<div id="f1_card">
<div class="front face">
<img src="images/tutoriels/imagettes/star.png" />
</div><!-- fin front face -->
</div><!-- fin f1_card -->
</div><!-- fin f1_container -->
<p style="text-align:center;"><strong>rotation centrale</strong></p>
</div>
<div style="margin-right:10px; display: inline-block;">
<div id="f2_container">
<div id="f2_card">
<div class="front face">
<img src="images/tutoriels/imagettes/global.png" />
</div><!-- fin front face -->
<div class="back2 face center">
<p>Voilà de la place pour afficher un autre contenu.</p>
</div><!-- fin back2 face center -->
</div><!-- fin f2_card -->
</div><!-- fin f2_container -->
<p style="text-align:center;"><strong>rotation horizontale</strong></p>
</div>
<div style="margin-top:20px; clear:both;">
</div>
<div style="margin-right:10px; display: inline-block;">
<div id="f3_container">
<div id="f3_card">
<div class="front face">
<img src="images/tutoriels/imagettes/folder128.png" />
</div><!-- fin front face -->
<div class="back3 face center">
<p>Voilà de la place pour afficher un autre contenu.</p>
</div><!-- fin back3 face center -->
</div><!-- fin f3_card -->
</div><!-- fin f3_container -->
<p style="text-align:center;"><strong>rotation verticale...</strong></p>
</div>
<div style="margin-right:10px; display: inline-block;">
<div id="f4_container">
<div id="f4_card">
<div class="front face">
<img src="images/tutoriels/imagettes/compose.png" />
</div><!-- fin front face -->
<div class="back4 face center">
<p>Voilà de la place pour afficher un autre contenu.</p>
</div><!-- fin back4 face center -->
</div><!-- fin f4_card -->
</div><!-- fin f4_container -->
<p style="text-align:center;"><strong>avec des réglages différents...</strong></p>
</div>
<div style="margin-right:10px; display: inline-block;">
<div id="f5_container">
<div id="f5_card">
<div class="front face">
<img src="images/tutoriels/imagettes/document256.png" />
</div><!-- fin front face -->
<div class="back5 face center">
<p>Voilà de la place pour afficher un autre contenu.</p>
</div><!-- fin back5 face center -->
</div><!-- fin f5_card -->
</div><!-- fin f5_container -->
<p style="text-align:center;"><strong>(tailles, fond du back-face...)</strong></p>
</div>
NB : Il n'y a pas de liens cliquables dans ces exemples. Mais il est facile dans l'éditeur de texte de placer des images, des textes, des liens comme à votre habitude. Voir le tutoriel précédent pour les rédiger.
NB : Les parties du type [div style="margin... ; display: inline-block;"]...[/div] servent à placer les images dans le flux, à placer des marges ou à passer à la ligne... (Dans ces [div] sont également inclues les légendes sous les images). Seules toutes les parties [div id="..."]...[/div] à l'intérieur sont obligatoires.
L'origine de cette petite recherche est sur le site de Richard Bradshaw.
Pour plus d'information sur cette mise en place, me contacter ou poster sur le forum.