• Article en % 3

    Lorsque j'ai ouvert mon premier blog, sur Orange et n'ayant aucune connaissance dans ce domaine, j'ai suivi les conseils de Michal et Jean-Phi (Orange), sur leurs sites.

    Ils préconisaient l'utilisation des cadres avec division (<div>) et paragraphe (<p>); d'autres, sont partis en utilisant les tableaux, qui simplifient un peu les écritures.

    Je voudrais vérifier si l'on peut appliquer à une case tableau les attributs que l'on applique à une paragraphe, avec une animation CSS... c'est parti !

    Tout d'abord une vérification:L'unité % prend en référence les dimensions de son contenant; les unités viewport (vw,vh) prennent en référence la largeur et la hauteur de l'écran de lecture

    Je vais placer une case de tableau dans un cadre créé par une div et vérifier quelles unités nous pouvons utiliser.

     

    Je vous livre mes bricolages en "brut de fonderie" car je découvre !

    <table id="tb1">
    <tbody>
    <tr>
    <td><img style="width: 100%; box-shadow: 0.2vw 0.1vh 1vw black; border: 0.2vh solid white; box-sizing: border-box;" src="http://ekladata.com/xz67Ct7OgqX21KfAvTvgmT9dG70.jpg" alt="" /></td>
    </tr>
    </tbody>
    </table>
     
    <style><!--
    #tb1{width: 20%; transform: translate(12vw,2vh) rotate(20deg); margin: 5% 0 10% 0; transition:all 1s linear;}
     #tb1:hover{transform: translate(12vw,2vh) rotate(0deg);}
    --></style>

    J'ai donné un identifiant à la table (tb1) pour la dimensionner en %, la positionner en adaptatif en CSS de façon à ajouter une animation au survol.

     

    L'image est placée dans la case du tableau et décorée: elle remplit cette case(width:100%;).

    Je n'ai pas eu besoin des positionnements intérieurs, horizontal et vertical car cette image remplit la case entièrement; dans le cas de texte, il me faudrait conserver ces attributs.

    Juste pour l'amusement, voici l'image avec une ombre intérieure et arrondi.

    Je n'ai pas l'impression que ce soit plus simple en écriture qu'avec des div et p mais, c'est peut-être le manque d'habitude !