• Relief

    Un fidèle visiteur me fait penser à un effet de relief au survol; je voudrais vérifier que je sais faire...

    A

    <p id="b1">A</p>
    <style><!--
    #b1{width:50px; height:50px; border:1px solid black; text-align:center; line-height:50px; font-size:20pt; color:white; text-shadow:1px 1px black; background:pink; box-shadow: inset 2px 2px rgba(0,0,0,1),inset -2px -2px rgba(255,255,255,0.5);}
    #b1:hover{background:green; box-shadow:inset -2px -2px  rgba(0,0,0,1), inset 2px 2px 0 rgba(255,255,255,0.5);}
    --></style>


    Ce principe peut être appliqué sur un bouton, de la forme désirée, un texte ou sur un cadre d'article.

    MON TEXTE A SURVOLER.

    <p id="c1">MON TEXTE A SURVOLER.</p>
    <style><!--
    #c1{width:450px; font-size:25pt; color:coral;text-shadow: 1px 1px 1px rgba(0,0,0,1),-1px -1px 1px rgba(255,255,255,1);}
    #c1:hover{text-shadow: -1px -1px 1px rgba(0,0,0,1),1px 1px 1px rgba(255,255,255,0);}}
    --></style>


    Mon article, avec image et texte.
    Une présentation qui devrait vous faire penser aux articles du petit randonneur 77...
    J'ai voulu changer le dégradé de fond au survol mais je ne sais pas si j'ai fait ça dans le bon sens: à chacun de juger.
    Vous savez que les dégradés, obtenus facilement par des générateurs gratuits en ligne, peuvent se faire en diagonale.
    Le changement de celui ci se fait simplement en modifiant le code par la couleur qui part soit du haut (top) soit du bas (bottom), comme vous le voyez dans le code ci-dessous.

    <p class="rand"><img style="float: left; width: 150px; border: 2px solid white; margin: 5px;" src="http://ekladata.com/LOSgFrt0bijJz97Tx_5Wmh_GFZM.gif" alt="" />Mon article, avec image et texte.</p>

    <style><!--
    .rand{width:500px; height:400px; padding:10px;border:3px double black; background: linear-gradient(to top, #c9de96 0%,#8ab66b 44%,#398235 100%); font-size:11pt; box-shadow:inset 2px 3px 0 rgba(0,0,0,0.4), inset -2px -3px 0 rgba(255,255,255,1);}
    .rand:hover{background: linear-gradient(to bottom, #c9de96 0%,#8ab66b 44%,#398235 100%); box-shadow:inset -1px -2px 0 rgba(0,0,0,0.4), inset 1px 2px 0 rgba(255,255,255,1);
    --></style>