• Exemple 167

    Pour illustrer l'écriture de "SURVOL" en vertical, un petit montage tout bête.

    SURVOL

     

     

     

     

     

     

    <div style="width: 60vw; height: 34vw; margin: 1vw auto; background: url('http://ekladata.com/czC4vDHjmLcQhgFlK6pO6_nAozQ.jpg'); background-size: cover;">

    <p id="tv0">SURVOL</p>

    <p id="tv1" class="tv">&nbsp;</p>

    <p id="tv2" class="tv">&nbsp;</p>

    <p id="tv3" class="tv">&nbsp;</p>

    <p id="tv4" class="tv">&nbsp;</p>

    <p id="tv5" class="tv">&nbsp;</p>

    <p id="tv6" class="tv">&nbsp;</p>

    </div>

    <style><!--

    #tv0{position:absolute; z-index:1; width:2vw; height:18vw; transform:translate(0vw,5vw); border:0.1vh solid black; background:rgba(0,0,0,0.5); color:white; text-shadow:0.1vh 0.1vh black; text-align:center; font-size:2vw; white-space:normal;}

    .tv{position:absolute; z-index:1; width:8vw; height:4.5vw; border:0.4vh solid white; box-shadow:inset -0.4vh -0.4vh 0.6vh black, inset 0.4vh 0.4vh 0.6vh white; transition:all 1s linear;}

    #tv1{background:url('http://ekladata.com/KaxuyMERjtsST0jERFtOn2xBs2I.jpg'); background-size:cover; transform:translate(50vw,2vw) skewx(25deg);}

    #tv2{background:url('http://ekladata.com/t1s11AqXxLYNhJO64IUssNyrAt4.jpg'); background-size:cover; transform:translate(50vw,8vw) skewx(25deg);}

    #tv3{background:url('http://ekladata.com/3WnwB3TjMrN7ozb4O6dCksaZvAQ.jpg'); background-size:cover; transform:translate(50vw,14vw) skewx(25deg);}

    #tv4{background:url('http://ekladata.com/h1T52fBu5dwN8YcCAGej26e55bY.jpg'); background-size:cover; transform:translate(50vw,20vw) skewx(25deg);}

    #tv5{background:url('http://ekladata.com/TG4cKOnooG_YGa9uMidtZCI8rEY.jpg'); background-size:cover; transform:translate(50vw,26vw) skewx(25deg);}

    #tv6{background:url('http://ekladata.com/ln1zY6j8Qj_jPPgzMJOe23BWFoM.jpg'); background-size:cover; transform:translate(40vw,2vw) skewx(25deg);}

    #tv1:hover,#tv2:hover,#tv3:hover,#tv4:hover,#tv5:hover,#tv6:hover{z-index:5; width:60vw; height:34vw; border:none; transform:translate(0vw,0vw) skewx(0deg);}

    --></style>