Bandeau avec des cellules -variantes 2-
D'autres variantes de bandeau avec des cellules dans des Iframes responsives
dans un article, ou mieux... dans un éditorial...
Ce sont les adaptations totalement "responsive design" des 3 séries "Des images avec Hover Effects Ideas" : série1, série2 et série3
Elles sont intégrées chacune dans un fichier .html appelé séparément dans un Iframe responsive. La totalité des images, de la police d'icônes et des fichiers .html est disponible au téléchargement ici.
Ci-dessous le début code d'intégration des Iframes dans cet article :
<div style="margin: .1%; width:49.8%; float:left;">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="img/ratio400x300.gif" /><iframe frameborder="0" height="300" marginheight="0" marginwidth="0" scrolling="no" src="img/cellule-Apollo.html" width="400"></iframe></div>
</div>
<div style="margin: .1%; width:49.8%; float:left;">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="img/ratio400x300.gif" /><iframe frameborder="0" height="300" marginheight="0" marginwidth="0" scrolling="no" src="img/cellule-Bubba.html" width="400"></iframe></div>
</div>
<div style="margin: .1%; width:49.8%; float:left;">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="img/ratio400x300.gif" /><iframe frameborder="0" height="300" marginheight="0" marginwidth="0" scrolling="no" src="img/cellule-Chico.html" width="400"></iframe></div>
</div>
<div style="margin: .1%; width:49.8%; float:left;">
<div class="iframe-responsive-wrapper"><img class="iframe-ratio" src="img/ratio400x300.gif" /><iframe frameborder="0" height="300" marginheight="0" marginwidth="0" scrolling="no" src="img/cellule-Dexter.html" width="400"></iframe></div>
</div>
Notez les margins à 0.1% qui permettent les marges entre les cellules et width à 49.8% (la somme de tous ces % sur une ligne donne 100%). Notez une image img/ratio400x300.gif transparente.
-----=====¤¤¤¤¤=====-----
Les fichiers .html possèdent une unité de police proportionnelle et la plupart des dimensions sont exprimées en % ou avec cette unité (vw). Les images et les textes seront donc automatiquement responsives. Information trouvée ici.
A titre d'exemple, voici le contenu du fichier cellule-Zoe.html :
<!doctype html>
<!--
Cellule pour intégration par des Iframes dans un bandeau
2019 JeanDenis https://www.71site.fr
-->
<!--
Proposition de Mary Lou, on peut la trouver ici :
https://tympanus.net/codrops/2014/06/19/ideas-for-subtle-hover-effects/
info licence : https://tympanus.net/codrops/licensing/
Police d'icônes Font Awesome : https://fontawesome.com/?from=io
-->
<html lang="fr">
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>cellule-Zoe</title>
<!--///////////////////////////////////////////////////////////////////////////////////////////////////
// Styles - Placement des images de fond / Éventuellement ajout d'une police / style des liens ...
///////////////////////////////////////////////////////////////////////////////////////////////////-->
<link href="HoverEffectImg/font-awesome-4.2.0/css/font-awesome.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
background: transparent;
font-family: arial;
}
a { color: #FFFF00; text-decoration: none; }
a:hover { color: #FF8000; text-decoration: none; }
img, object, embed, canvas, video, audio, picture {
border-style: none;
max-width: 100%;
height: auto;
}
/*---------------*/
/* Common style */
/*---------------*/
.grid { /*attributs de la grille*/
position: relative;
clear: both;
margin: 0 auto; /*marges extérieures*/
padding:0; /*marges intérieures*/
width: 100%; /*largeur maxi*/
list-style: none;
text-align: center;
}
.grid figure { /*attributs d'une figure*/
position: relative;
float: left;
overflow: hidden;
margin: 0; /*marges extérieures*/
width: 100%; /*largeur*/
background: #3085a3; /*couleur fond*/
text-align: center;
cursor: pointer;
}
.grid figure img { /*attributs d'une image*/
position: relative;
display: block;
height: 100%; /*occupant toute la figure*/
width: 100%;
opacity: 0.99; /*opacité mais réglable ensuite pour chaque effet*/
}
.grid figure figcaption { /*figcaption : attributs des cadres mais réglable ensuite pour chaque effet*/
padding:0; /*marges intérieures*/
color: #fff; /*couleur*/
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.grid figure figcaption::before,
.grid figure figcaption::after {
pointer-events: none;
}
.grid figure figcaption,
.grid figure figcaption > a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.grid figure h2 { /*attributs du titre*/
font-size: 10vw; /*taille de la police*/
text-transform: uppercase; /*tout en majuscule*/
font-weight: normal; /*gras de la police*/
}
.grid figure h2 span { /*attributs du titre span*/
font-weight: bold; /*gras de la police*/
}
.grid figure h2,
.grid figure p { /*attributs du titre et du paragraphe*/
margin: 0; /*marges extérieures*/
}
.grid figure p { /*attributs du paragraphe*/
font-size: 6vw; /*taille de la police*/
}
/*---------------*/
/****** Zoe ******/
/*---------------*/
figure.effect-zoe figcaption {
top: auto; /*positions*/
bottom: 0;
padding: 1vw; /*marges intérieures*/
height: 12vw; /*hauteur*/
background: rgba(255,255,255,.7); /*couleur fond et opacité*/
color: #3c4a50; /*couleur*/
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s; /*temps de transition*/
-webkit-transform: translate3d(0,100%,0);
transform: translate3d(0,100%,0); /*transformation : translationV*/
}
figure.effect-zoe h2 { /*titre*/
float: left;
}
figure.effect-zoe p a i { /*icones du paragraphe*/
float: left;
color: #3c4a50; /*couleur*/
font-size: 8vw; /*taille police -icones-*/
margin:1.5vw 0 0 1vw; /*marges extérieures*/
}
figure.effect-zoe p a i:hover,
figure.effect-zoe p a i:focus { /*icones du paragraphe au survol*/
color: #ae6b25; /*couleur*/
}
figure.effect-zoe p.description { /*texte du paragraphe*/
position: absolute;
margin:0 4vw 0 2vw; /*marges extérieures*/
bottom: 20vw; /*position*/
color:#fff; /*couleur*/
opacity: 0; /*opacité*/
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s; /*temps de transition*/
}
figure.effect-zoe h2,
figure.effect-zoe p a { /*titre et paragraphe*/
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s; /*temps de transition*/
-webkit-transform: translate3d(0,15vw,0);
transform: translate3d(0,15vw,0); /*transformation : translationV*/
}
figure.effect-zoe h2 { /*titre*/
display: inline-block;
}
figure.effect-zoe:hover p.description { /*texte du paragraphe au survol*/
opacity: 1; /*opacité*/
}
figure.effect-zoe:hover figcaption,
figure.effect-zoe:hover h2,
figure.effect-zoe:hover p a { /*titre et icones du paragraphe au survol*/
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0); /*transformation : translation0*/
}
figure.effect-zoe:hover h2 { /*titre au survol*/
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s; /*délai de transition*/
}
</style>
</head>
<!--///////////////////////////////////////////////////////////////////////////////////////////////////
// Corps de la page - Source des images / Texte / Liens hypertextes / etc...
///////////////////////////////////////////////////////////////////////////////////////////////////-->
<body>
<div class="grid">
<figure class="effect-zoe"><img alt="30-zoe" src="HoverEffectImg/30-zoe.jpg" />
<figcaption>
<div>
<h2>Effect <span>Zoe</span></h2>
<p class="description">Voici un paragraphe qui peut contenir un lien... etc...</p>
<p>
<a href="https://fontawesome.com/?from=io" target="_blank" title="paperclip"><i class="fa fa-fw fa-paperclip"></i></a>
<a href="https://fontawesome.com/?from=io" target="_blank" title="eye"><i class="fa fa-fw fa-eye"></i></a>
<a href="https://fontawesome.com/?from=io" target="_blank" title="link"><i class="fa fa-fw fa-link"></i></a>
</p>
</div>
</figcaption>
</figure>
</div>
</body>
</html>
Vous pouvez utilement vous référer aux articles suivants pour les réglages : série1, série2 et série3.
Notez bien que dans ces tutoriels, aucun caractère "invisible" n'est nécessaire entre les balises <i class="...."></i> contrairement à leur utilisation dans l'éditeur de GuppY puisque les fichiers .html ainsi créés ne sont pas "nettoyés" par le greffon htmlpurifier de GuppY.
Adaptez les contenus et les images à votre configuration en veillant à ce que les chemins soient respectés. Si vous créez des fichiers .html en vous servant des fichiers de base, veuillez y laisser toutes les références des origines.
-----=====¤¤¤¤¤=====-----
Pour réaliser un bandeau similaire en plus ou à la place de votre éditorial, il suffit d'adapter les fichiers .html des cellules. Et de les placer avec un code semblable à celui cité en haut de ce tutoriel, dans une boite libre déclarée dans Config Accueil.
Plusieurs boites seront nécessaires pour un édito mobile (mais le code des fichiers .html n'a pas à être changé). ATTENTION, dans ce cas les Iframes de chaque boite devront avoir un width de 100%.
----------==========+++++==========----------
Pour installer proprement ce dispositif sur votre site, il faut ne pas faire apparaitre le titre de la ( ou des ) boite(s) libre(s), pour cela faites-le(s) précéder du symbole §
§Edito2+ par exemple...
et dans votre fichier styleplus placez (en remplaçant FB1111 par votre n° de boite libre) au moins cela :
.tbl.FB1111 { /* boite edito2+ */
background: transparent;
border: none;
margin:0px;
padding:0px;
}
Pour toute aide afin d'utiliser ce dispositif, vous pouvez poster sur le forum de ce site.
Catégorie : - IFrames responsives
Page lue 111209 fois
