Alain divers

Certains d'entre vous connaissent le petit randonneur 77 et j'ai l'occasion de dialoguer avec lui sur des présentations d'articles.

Différents petits "trucs" peuvent être utilisés pour améliorer la présentation et la clarté de navigation dans une page.

Changement d'apparence au survol:

Lorsque qu'un cadre a une couleur de fond, en dégradé ou non, on peut changer la couleur de fond au survol afin de bien montrer au visiteur où il se situe.

Pour le code d'une couleur en dégradé, j'utilise le code fourni par le site gratuit: Colorzilla.

Le code comporte plusieurs lignes, pas toutes nécessaires mais on peut les laisser toutes; en voici un exemple:

<p id="x1">&nbsp;</p>
<p style="float:left;>...</p>
<style><!--
#x1{width:200px; height:200px; border:1px solid black; float:left;/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f6e6b4+0,ed9017+100;Yellow+3D+%231 */
background: #f6e6b4; /* Old browsers */
background: -moz-linear-gradient(top, #f6e6b4 0%, #ed9017 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #f6e6b4 0%,#ed9017 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#ed9017',GradientType=0 ); /* IE6-9 */}
#x1:hover{/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f6e6b4+0,ed9017+100;Yellow+3D+%231 */
background: #f6e6b4; /* Old browsers */
background: -moz-linear-gradient(bottom, #f6e6b4 0%, #ed9017 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(bottom, #f6e6b4 0%,#ed9017 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to top, #f6e6b4 0%,#ed9017 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#ed9017',GradientType=0 );}
--></style>

Agrandissement au survol:

L'adaptation à votre article demandera peut-être de faire passer l'agrandissement en indépendant (position:absolute;)  et en premier plan (z-index:5;) car sinon, il poussera ce qui est en dessous.

<p id="x2">&nbsp;</p>
<p style="float:left;>...</p>
<style><!--
#x2{width:200px; height:200px; border:1px solid black; float:left; transition:all 1s linear;

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f6e6b4+0,ed9017+100;Yellow+3D+%231 */
background: #f6e6b4; /* Old browsers */
background: -moz-linear-gradient(top, #f6e6b4 0%, #ed9017 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #f6e6b4 0%,#ed9017 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#ed9017',GradientType=0 ); /* IE6-9 */}
#x2:hover{height:300px;

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f6e6b4+0,ed9017+100;Yellow+3D+%231 */
background: #f6e6b4; /* Old browsers */
background: -moz-linear-gradient(bottom, #f6e6b4 0%, #ed9017 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(bottom, #f6e6b4 0%,#ed9017 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to top, #f6e6b4 0%,#ed9017 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#ed9017',GradientType=0 );}
--></style>

Information au survol.
en remplissant l'identification alt="" de l'image, dans le code: <img src="http://ekladata.com/NTsoGnvyuZ5hzcSCFzxBhGdGNnM@150x113.jpg" alt="Les chemins de la for&ecirc;t de Ferri&egrave;res en Brie" />

vous obtenez cette information sous cette forme (au survol de l'image).
Pour que l'image s'agrandisse au dessus de ce qui est dessous, sans le pousser, je l'ai placée en indépendant par:
 #x3{ position:absolute; z-index:5;width:200px; height:200px;...
#x3:hover{height:300px;}

Si vous voulez personnaliser dette information, vous pouvez indiquer que toutes les informations alt de votre article auront cette présentation en ajoutant une ligne de code:

#help_bubble{font-size:22pt; color:yellow; text-shadow:1px 1px black; background:lime;}

Je ne peux que présenter qu'une copie d'écran car toutes les descriptions reçoivent la même décoration, ce qui ne convient pas pour ma démonstration.
Ce descriptif peut être simplement l'indication "clic" pour indiquer un lien.

Filtre luminosité..

Un autre façon de situer le survol est de rendre plus lumineux l'élément survolé.

filter: brightness(80%); webkit-filter: brightness(80%);
hover{filter: brightness(120%); webkit-filter: brightness(120%);