Alphabet 3 forme libre majuscule pour les utilisateurs d'un langage multidirectionnel




A placer dans le body

Lettre a

<div class="mon_humeur1 action">
<div class="boucle25 boucle100" style="margin-top:15px ; margin-left:105px">
<div class="sortie_droite" style="margin-left:10px">
</div>
</div>
</div>

<div class="mon_humeur1 action"> 

<div class="boucle25 boucle100" style="margin-top:15px ; margin-left:35px">
<div class="boucle25 boucle100" style="margin-left:10px">
<div class="boucle25 boucle100" style="margin-left:10px">

<div class="boucle25 boucle100" style="margin-left:10px">
<div class="boucle25 boucle100" style="margin-left:10px">
<div class="boucle25 boucle100" style="margin-left:10px">
<div class="boucle25 boucle100" style="margin-left:10px">
<div class="boucle25 boucle100" style="margin-left:10px">
<div class="boucle25 boucle100" style="margin-left:10px">
<div class="boucle25 boucle100" style="margin-left:10px">
<div class="boucle25 boucle100" style="margin-left:10px">
<div class="boucle25 boucle100" style="margin-left:10px">
<div class="boucle25 boucle100" style="margin-left:10px">
<div class="boucle25 boucle100" style="margin-left:10px">
</div></div>
</div></div></div></div>
</div></div></div></div>
</div>
</div>
</div>
</div>

<div class="boucle25 boucle101" style="margin-top:-12px ; margin-left:105px">
<div class="boucle25 boucle101" style="margin-left:10px ">
<div class="boucle25 boucle101" style="margin-left:10px">

<div class="boucle25 boucle101" style="margin-left:10px">
<div class="boucle25 boucle101" style="margin-left:10px">
<div class="boucle25 boucle101" style="margin-left:10px">
<div class="boucle25 boucle101" style="margin-left:10px">
<div class="boucle25 boucle101" style="margin-left:10px">
<div class="boucle25 boucle101" style="margin-left:10px">
<div class="boucle25 boucle101" style="margin-left:10px">
<div class="boucle25 boucle101" style="margin-left:10px">
<div class="boucle25 boucle101" style="margin-left:10px">
<div class="boucle25 boucle101" style="margin-left:10px">
<div class="boucle25 boucle101" style="margin-left:10px">
</div></div>
</div></div></div></div>
</div></div></div></div>
</div>
</div>
</div>
</div>

<div class="boucle102" style="margin-top:2px ; margin-left:185px">
<div class="boucle112" style="margin-left:22px">
<div class="boucle16" style="margin-top:20px ; margin-left:-12px">
</div></div></div>

</div>




Lettre b

<div class="mon_humeur1 action">
<div class="boucle25 boucle100" style="margin-top:15px ; margin-left:105px">
<div class="sortie_droite" style="margin-left:10px">
</div>
</div>
</div>

<div class="mon_humeur1 action"> 

<div class="boucle25 boucle100" style="margin-top:15px ; margin-left:35px">
<div class="boucle25 boucle100" style="margin-left:10px">
<div class="boucle25 boucle100" style="margin-left:10px">

<div class="boucle25 boucle100" style="margin-left:10px">
<div class="boucle25 boucle100" style="margin-left:10px">
<div class="boucle25 boucle100" style="margin-left:10px">
<div class="boucle25 boucle100" style="margin-left:10px">
<div class="boucle25 boucle100" style="margin-left:10px">
<div class="boucle25 boucle100" style="margin-left:10px">
<div class="boucle25 boucle100" style="margin-left:10px">
<div class="boucle25 boucle100" style="margin-left:10px">
<div class="boucle25 boucle100" style="margin-left:10px">
<div class="boucle25 boucle100" style="margin-left:10px">
<div class="boucle25 boucle100" style="margin-left:10px">
</div></div>
</div></div></div></div>
</div></div></div></div>
</div>
</div>
</div>
</div>

<div class="boucle25 boucle101" style="margin-top:-12px ; margin-left:105px">
<div class="boucle25 boucle101" style="margin-left:10px ">
<div class="boucle25 boucle101" style="margin-left:10px">

<div class="boucle25 boucle101" style="margin-left:10px">
<div class="boucle25 boucle101" style="margin-left:10px">
<div class="boucle25 boucle101" style="margin-left:10px">
<div class="boucle25 boucle101" style="margin-left:10px">
<div class="boucle25 boucle101" style="margin-left:10px">
<div class="boucle25 boucle101" style="margin-left:10px">
<div class="boucle25 boucle101" style="margin-left:10px">
<div class="boucle25 boucle101" style="margin-left:10px">
<div class="boucle25 boucle101" style="margin-left:10px">
<div class="boucle25 boucle101" style="margin-left:10px">
<div class="boucle25 boucle101" style="margin-left:10px">
</div></div>
</div></div></div></div>
</div></div></div></div>
</div>
</div>
</div>
</div>


<div class="boucle25 boucle100" style="margin-top:85px ; margin-left:105px">
<div class="boucle25 boucle100" style="margin-left:10px">
<div class="boucle25 boucle100" style="margin-left:10px">

<div class="boucle25 boucle100" style="margin-left:10px">
<div class="boucle25 boucle100" style="margin-left:10px">
<div class="boucle25 boucle100" style="margin-left:10px">
<div class="boucle25 boucle100" style="margin-left:10px">
<div class="boucle25 boucle100" style="margin-left:10px">
<div class="boucle25 boucle100" style="margin-left:10px">
<div class="boucle25 boucle100" style="margin-left:10px">
<div class="boucle25 boucle100" style="margin-left:10px">
<div class="boucle25 boucle100" style="margin-left:10px">
<div class="boucle25 boucle100" style="margin-left:10px">
<div class="boucle25 boucle100" style="margin-left:10px">
</div></div>
</div></div></div></div>
</div></div></div></div>
</div>
</div>
</div>
</div>

<div class="boucle25 boucle101" style="margin-top:58px ; margin-left:105px">
<div class="boucle25 boucle101" style="margin-left:10px ">
<div class="boucle25 boucle101" style="margin-left:10px">

<div class="boucle25 boucle101" style="margin-left:10px">
<div class="boucle25 boucle101" style="margin-left:10px">
<div class="boucle25 boucle101" style="margin-left:10px">
<div class="boucle25 boucle101" style="margin-left:10px">
<div class="boucle25 boucle101" style="margin-left:10px">
<div class="boucle25 boucle101" style="margin-left:10px">
<div class="boucle25 boucle101" style="margin-left:10px">
<div class="boucle25 boucle101" style="margin-left:10px">
<div class="boucle25 boucle101" style="margin-left:10px">
<div class="boucle25 boucle101" style="margin-left:10px">
<div class="boucle25 boucle101" style="margin-left:10px">
</div></div>
</div></div></div></div>
</div></div></div></div>
</div>
</div>
</div>
</div>

<div class="boucle102" style="margin-top:28px ; margin-left:185px">
</div>
<div class="boucle103" style="margin-top:20px ; margin-left:205px ; height:20px">
</div>
<div class="boucle103" style="margin-top:-2px ; margin-left:205px ; height:20px">
</div>

</div>




Lettre c

<div class="boucle104" style="margin-top:15px ; margin-left:50px">
<div class="boucle105" style="margin-top:-15px ; margin-left:-7px">
</div>
</div>




Lettre d

<div class="mon_humeur1 action">
<div class="boucle102" style="margin-top:28px ; margin-left:185px">
<div class="boucle103" style="margin-top:20px ; margin-left:205px ; height:40px">
</div>
</div>
</div>




Lettre e

<div class="mon_humeur1 action">
<div class="boucle106" style="margin-top:20px ; margin-left:205px ; height:20px">
<div class="boucle106" style="margin-top:-2px ; margin-left:205px ; height:20px">
<div class="boucle107" style="margin-top:-56px ; margin-left:202px ; height:16px">
</div>
</div>
</div>
</div>




Lettre f

<div class="mon_humeur1 action">

<div class="boucle108" style="margin-top:20px ; margin-left:205px ; height:20px">
</div>
<div class="boucle109" style="margin-top:-2px ; margin-left:195px ; height:20px">
</div>

<div class="boucle109 tourne90" style="margin-top:-30px ; margin-left:208px ; height:20px">

<div class="boucle109" style="margin-top:-2px ; margin-left:10px  ; height:20px">
</div>
</div>

</div>




Lettre g

<div class="mon_humeur1 action">
<div class="boucle1" style="margin-top:15px ; margin-left:15px">
</div>
<div class="boucle7" style="margin-top:-10px ; margin-left:15px">
</div>
<div class="boucle2" style="margin-left:20px ; height:10px">
</div>
</div>




Lettre h

<div class="mon_humeur1 action">
<div class="trait_vertical1" style="margin-top:10px ; margin-left:20px ; height:20px">
<div class="boucle5" style="margin-left:-17px ; height:14px">
</div>
</div>
<div class="boucle8" style="margin-top:20px ; margin-left:17px ; height:10px">
</div>
</div>




Lettre i

<div class="mon_humeur1 action">

<div class="boucle111" style="margin-top:10px ; margin-left:40px">
<div class="boucle108 tourne90" style="margin-top:-10px ; margin-left:4px ; height:7px">
<>

</div>
</div>

</div>>




Lettre j

<div class="mon_humeur1 action">

<div class="boucle10" style="margin-top:10px ; margin-left:10px">
<div class="boucle12" style="margin-top:5px ; margin-left:1px">
<div class="trait_vertical1" style="margin-top:-15px ; width:3px ; height:3px ; margin-left:7px">
</div>
</div>
</div>

</div>




Lettre k

<div class="mon_humeur1 action">
<div class="boucle113" style="margin-top:10px ; margin-left:40px">
<div class="boucle108 tourne45" style="margin-top:1px ; margin-left:14px ; height:12px">
<div class="boucle108 tourne90" style="margin-top:-5px ; margin-left:-1px ; height:12px"">
</div>
</div>
</div>
</div>




Lettre l

<div class="mon_humeur1 action">

<div class="boucle113" style="margin-top:10px ; margin-left:40px>
</div>
<div class="boucle114" style="margin-top:-9px ; margin-left:40px">
</div>


</div>




Lettre m

<div class="mon_humeur1 action">

<div class="boucle14" style="margin-top:10px ; margin-left:10px">
<div class="boucle14" style="margin-top:-1px ; margin-left:10px">
<div class="boucle14" style="margin-top:-1px ; margin-left:10px">
<div class="sortie_droite" style="margin-left:10px">
</div>
</div>
</div>
</div>
</div>




Lettre n

<div class="mon_humeur1 action">

<div class="boucle14" style="margin-top:10px ; margin-left:10px">
<div class="boucle14" style="margin-top:-1px ; margin-left:10px">
<div class="sortie_droite" style="margin-left:10px">
</div>
</div>
</div>
</div>




Lettre o

<div class="mon_humeur1 action">

<div class="boucle15" style="margin-top:-25px ; margin-left:390px">
<div class="boucle16" style="margin-top:-5px ; margin-left:-3px">
</div>
</div>

</div>




Lettre p

<div class="mon_humeur1 action">

<div class="boucle113" style="margin-top:10px ; margin-left:40px">
<div class="boucle115" style="margin-top:1px ; margin-left:7px ; height:12px">
</div>
</div>
</div>




Lettre q

<div class="mon_humeur1 action">
<div class="boucle116" style="margin-top:1px ; margin-left:40px">
<div class="boucle113 tourne180" style="margin-top:10px ; margin-left:2px ; height:6px">
</div>
</div>
</div>





Lettre r

<div class="mon_humeur1 action">
<div class="boucle102" style="margin-top:28px ; margin-left:185px">
<div class="boucle103" style="margin-top:1px ; margin-left:19px ; height:20px">
<div class="boucle113 tourne90" style="margin-top:20px ; margin-left:8px ; height:12px">
</div>
</div>
</div>
</div>




Lettre s


<div class="mon_humeur1 action">

<div class="boucle117 tourne45" style="margin-top:10px ; margin-left:10px">
<div class="boucle117 tourne180" style="margin-top:10px ; margin-left:-11px">
</div>
</div>

</div>




Lettre t

<div class="mon_humeur1 action">

<div class="boucle9" style="margin-top:10px ; height:20px ; margin-left:10px">
<div class="sortie_droite" style="margin-top:10px ; margin-left:10px">
<div class="trait_vertical1" style="margin-top:-6px ; width:10px ; height:2px ; margin-left:-5px">
</div>
</div>
</div>

</div>>




Lettre u

<div class="mon_humeur1 action">

<div class="boucle9 boucle120" style="margin-top:10px ; margin-left:32px">
<div class="boucle9 boucle120" style="margin-left:2px">
<div class="boucle9 boucle120" style="margin-left:2px">
<div class="boucle9 boucle120" style="margin-left:2px">
<div class="boucle9 boucle120" style="margin-left:2px">
<div class="boucle9 boucle120" style="margin-left:2px">
<div class="boucle9 boucle45" style="margin-left:2px">
<div class="boucle19 boucle120" style="margin-left:2px">
<div class="boucle19 boucle120" style="margin-left:2px">
<div class="boucle19 boucle120" style="margin-left:2px">
<div class="boucle19 boucle120" style="margin-left:2px">
<div class="boucle9 boucle120" style="margin-left:2px">
<div class="boucle9 boucle120" style="margin-left:2px">
<div class="boucle9 boucle120" style="margin-left:2px">
<div class="boucle9 boucle120" style="margin-left:2px">
<div class="boucle9 boucle120" style="margin-left:2px">
<div class="boucle9 boucle120" style="margin-left:2px">
<div class="boucle9 boucle120" style="margin-left:2px">
<div class="boucle9 boucle120" style="margin-left:2px">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>




Lettre v

<div class="mon_humeur1 action">
<div class="boucle22" style="margin-top:10px ; margin-left:20px">
<div class="boucle23" style="margin-left:16px">
</div>
</div>
</div>




Lettre w

<div class="mon_humeur1 action">
<div class="boucle22" style="margin-top:10px ; margin-left:20px">
<div class="boucle23" style="margin-left:16px">
<div class="boucle22" style="margin-left:16px ; margin-left:-12px">
<div class="boucle23" style="margin-left:16px">
</div>
</div>
</div>
</div>
</div>




Lettre x

<div class="mon_humeur1 action">
<div class="boucle24" style="margin-top:10px ; margin-left:20px">
<div class="boucle25" style="margin-left:17px">
</div>
</div>
</div>




Lettre y

<div class="mon_humeur1 action">
<div class="boucle26" style="margin-top:10px ; margin-left:20px">
<div class="boucle27" style="margin-left:12px">
</div>
</div>
</div>




Lettre z

<div class="mon_humeur1 action">
<div class="boucle19" style="margin-top:10px ; margin-left:10px ; height:10px">
<div class="boucle16" style="margin-top:-5px ; margin-left:8px ; wight:10px">
</div>
</div>
<div class="boucle7" style="margin-top:5px ; margin-left:25px ; height:40px">
</div>
<div class="boucle2" style="margin-top:25px ; margin-left:30px ; height:15px">
</div>
</div>




A placer dans le style du head

.mon_humeur1{
	position:absolute;
  width: 40px;
  height: 40px;
	background-color: #F5FFFA;
	margin-left: 1px;
}
.trait_vertical1{
	position:absolute;
  width: 2px;
  height: 10px;
  background-color: #3366FF;
}
.trait_vertical1:active{
  background-color: #F5FFFA;
}
.trait_horizontal1{
	position:absolute;
  width: 10px;
  height: 2px;
  background-color: #3366FF;
}
.trait_horizontal1:active{
  background-color: #F5FFFA;
}
.action{
  position:absolute;
  cursor:pointer;
  background-color: #F5FFFA;

}
.angle1 {
    -ms-transform: rotate(60deg); 
    -webkit-transform: rotate(60deg); 
    transform: rotate(60deg); 
}
.boucle1{
  width: 10px;
  height: 10px;
  border: 0px;
  border-bottom: 1.5px solid #3366FF;
  border-left: 1.5px solid #3366FF;
  border-top: 1.5px solid #3366FF;

border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;

}
.sortie_droite{
	position:absolute;
  width: 10px;
  height: 10px;
  border: 0px;
  border-left: 1.5px solid #3366FF;
  border-bottom: 1.5px solid #3366FF;
border-top-left-radius:10px;
border-top-right-radius:5px;
border-bottom-right-radius:40px;
border-bottom-left-radius:10px;
	margin-left: 10px;
}
.boucle2{
	position:absolute;
  width: 30px;
  height: 20px;
  border: 0px;

  border-left: 1.5px solid #3366FF;

border-top-left-radius:20px;
border-top-right-radius:12px;
border-bottom-right-radius:12px;
border-bottom-left-radius:20px;

}
.boucle3{
	position:absolute;
  width: 10px;
  height: 20px;
  border: 0px;

  border-right: 1.5px solid #3366FF;

border-top-left-radius:12px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:12px;

}
.boucle4{
	position:absolute;
  width: 20px;
  height: 45px;
  border: 0px;

  border-left: 1.5px solid #3366FF;

border-top-left-radius:20px;
border-top-right-radius:40px;
border-bottom-right-radius:40px;
border-bottom-left-radius:100px;

}

.boucle5{
	position:absolute;
  width: 20px;
  height: 40px;
  border: 0px;

  border-right: 1.5px solid #3366FF;

border-top-right-radius:40px;
border-top-left-radius:40px;
border-bottom-left-radius:40px;
border-bottom-right-radius:200px;

}
.boucle6{
	position:absolute;
  width: 5px;
  height: 10px;
  border: 0px;

  border-right: 1.5px solid #3366FF;

border-top-right-radius:40px;
border-top-left-radius:40px;
border-bottom-left-radius:40px;
border-bottom-right-radius:200px;

}
.boucle7{
	position:absolute;
  width: 10px;
  height: 30px;
  border: 0px;
  border-right: 1.5px solid #3366FF;
border-top-left-radius:10px;
border-top-right-radius:5px;
border-bottom-right-radius:40px;
border-bottom-left-radius:10px;
	margin-left: 50px;
}
.boucle8{
	position:absolute;
  width: 10px;
  height: 20px;
  border: 0px;
  border-right: 2px solid #3366FF;
border-top-left-radius:10px;
border-top-right-radius:80px;
border-bottom-right-radius:5px;
border-bottom-left-radius:90px;
}
.boucle9{
	position:absolute;
  width: 10px;
  height: 10px;
  border: 0px;
  border-right: 1.5px solid #3366FF;
border-top-left-radius:20px;
border-top-right-radius:10px;
border-bottom-right-radius:80px;
border-bottom-left-radius:20px;
	margin-left: 50px;
}
.boucle10{
  width: 10px;
  height: 20px;
  border: 0px;
  border-top: 2px solid blue;
  border-right: 2px solid blue;
  border-top-left-radius: 40px;
  border-bottom-right-radius:40px;
}
.boucle11{
  width: 10px;
  height: 20px;
  border: 0px;
  border-top: 2px solid blue;
  border-right: 2px solid blue;
  border-top-right-radius: 40px;
  border-bottom-left-radius:40px;
}
.boucle12{
  width: 10px;
  height: 15px;
  border: 0px;
  border-left: 2px solid blue;
  border-left: 2px solid blue;
  border-top-left-radius: 80px;
  border-bottom-left-radius:20px;
}
.boucle13{
  width: 4px;
  height: 4px;
  border: 0px;
  border-bottom: 1.5px solid #3366FF;
  border-right: 1.5px solid #3366FF;
  border-top: 1.5px solid #3366FF;

border-top-left-radius:4px;
border-top-right-radius:4px;
border-bottom-right-radius:4px;
border-bottom-left-radius:4px;
}
.boucle14{
	position:absolute;
  width: 10px;
  height: 10px;
  border: 0px;
  border-right: 2px solid #3366FF;
  border-top: 2px solid #3366FF;
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:3px;
border-bottom-left-radius:10px;

}
.boucle15{
	position:absolute;
  width: 10px;
  height: 10px;
  border: 0px;
  border-bottom: 1.5px solid #3366FF;
  border-left: 1.5px solid #3366FF;
  border-top: 1.5px solid #3366FF;
  border-right: 1.5px solid #3366FF;
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;

}
.boucle16{
	position:absolute;
  width: 20px;
  height: 8px;
  border: 0px;
  border-bottom: 1.5px solid #3366FF;
border-top-left-radius:8px;
border-top-right-radius:25px;
border-bottom-right-radius:50px;
border-bottom-left-radius:50px;

}
.boucle17{
	position:absolute;
  width: 10px;
  height: 10px;
  border: 0px;
  border-left: 2px solid #3366FF;
  border-bottom: 2px solid #3366FF;
border-top-left-radius:10px;
border-top-right-radius:5px;
border-bottom-right-radius:40px;
border-bottom-left-radius:10px;
}
.boucle18{
	position:absolute;
  width: 10px;
  height: 10px;
  border: 0px;
  border-right: 2px solid #3366FF;
  border-bottom: 2px solid #3366FF;
border-top-right-radius:10px;
border-top-left-radius:5px;
border-bottom-left-radius:40px;
border-bottom-right-radius:10px;
}
.boucle19{
	position:absolute;
  width: 10px;
  height: 20px;
  border: 0px;
  border-right: 2px solid #3366FF;
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:80px;
border-bottom-left-radius:20px;
	margin-left: 50px;
}
.boucle20{
	position:absolute;
  width: 25px;
  height: 20px;
  border: 0px;
  border-right: 2px solid #3366FF;
border-top-left-radius:20px;
border-top-right-radius:5px;
border-bottom-right-radius:80px;
border-bottom-left-radius:20px;
}
.boucle21{
	position:absolute;
  width: 20px;
  height: 20px;
  border: 0px;
  border-right: 2px solid #3366FF;
border-top-left-radius:20px;
border-top-right-radius:5px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;
}
.boucle22{
	position:absolute;
  width: 15px;
  height: 15px;
  border: 0px;
  border-right: 2px solid #3366FF;
border-top-left-radius:120px;
border-top-right-radius:120px;
border-bottom-right-radius:15px;
border-bottom-left-radius:15px;
}
.boucle23{
	position:absolute;
  width: 15px;
  height: 15px;
  border: 0px;
  border-left: 2px solid #3366FF;
border-top-left-radius:120px;
border-top-right-radius:120px;
border-bottom-right-radius:15px;
border-bottom-left-radius:15px;
}
.boucle24{
	position:absolute;
  width: 15px;
  height: 15px;
  border: 0px;
  border-right: 2px solid #3366FF;
border-top-left-radius:120px;
border-top-right-radius:120px;
border-bottom-right-radius:120px;
border-bottom-left-radius:120px;
}
.boucle25{
	position:absolute;
  width: 15px;
  height: 15px;
  border: 0px;
  border-left: 2px solid #3366FF;
border-top-left-radius:120px;
border-top-right-radius:120px;
border-bottom-right-radius:120px;
border-bottom-left-radius:120px;
}
.boucle26{
	position:absolute;
  width: 15px;
  height: 25px;
  border: 0px;
  border-right: 2px solid #3366FF;
border-top-left-radius:120px;
border-top-right-radius:120px;
border-bottom-right-radius:15px;
border-bottom-left-radius:15px;
}
.boucle27{
	position:absolute;
  width: 30px;
  height: 25px;
  border: 0px;
  border-left: 2px solid #3366FF;
border-top-left-radius:150px;
border-top-right-radius:150px;
border-bottom-right-radius:80px;
border-bottom-left-radius:80px;
}
.boucle28{
  width: 10px;
  height: 10px;
  border: 0px;
  border-bottom: 2px solid #3366FF;
  border-left: 2px solid #3366FF;
  border-top: 2px solid #3366FF;

border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:5px;
border-bottom-left-radius:10px;
}

.boucle100 {
    float: left;
    -ms-transform: rotate(-27deg); /* IE 9 */
    -webkit-transform: rotate(-27deg); /* Safari */
    transform: rotate(-27deg);
}

.boucle101 {
    float: left;
    -ms-transform: rotate(110deg); /* IE 9 */
    -webkit-transform: rotate(110deg); /* Safari */
    transform: rotate(110deg);
}

.boucle102{
	position:absolute;
  width: 20px;
  height: 40px;
  border: 0px;
  border-right: 3px solid #3366FF;
border-top-left-radius:20px;
border-top-right-radius:10px;
border-bottom-right-radius:80px;
border-bottom-left-radius:20px;
	margin-left: 50px;
}

.boucle103{
  width: 14px;
  height: 14px;
  border: 0px;
  border-bottom: 2px solid #3366FF;
  border-right: 2px solid #3366FF;
  border-top: 2px solid #3366FF;

border-top-left-radius:14px;
border-top-right-radius:14px;
border-bottom-right-radius:14px;
border-bottom-left-radius:14px;
}

.boucle104{
  width: 20px;
  height: 20px;
  border: 0px;
  border-bottom: 2px solid #3366FF;
  border-left: 2px solid #3366FF;
  border-top: 2px solid #3366FF;

border-top-left-radius:22px;
border-top-right-radius:17px;
border-bottom-right-radius:17px;
border-bottom-left-radius:22px;

}
.boucle105{
  width: 25px;
  height: 20px;
  border: 0px;
  border-bottom: 2px solid #3366FF;


border-top-left-radius:22px;
border-top-right-radius:17px;
border-bottom-right-radius:17px;
border-bottom-left-radius:22px;

}

.boucle106{
  width: 14px;
  height: 14px;
  border: 0px;
  border-bottom: 2px solid #3366FF;
  border-left: 2px solid #3366FF;
  border-top: 2px solid #3366FF;

border-top-left-radius:14px;
border-top-right-radius:6px;
border-bottom-right-radius:6px;
border-bottom-left-radius:14px;
}

.boucle107{
  width: 20px;
  height: 14px;
  border: 0px;
  border-bottom: 2px solid #3366FF;

border-top-left-radius:14px;
border-top-right-radius:14px;
border-bottom-right-radius:14px;
border-bottom-left-radius:14px;
}

.boucle108{
  width: 10px;
  height: 14px;
  border: 0px;
  border-left: 2px solid #3366FF;

border-top-left-radius:100px;
border-top-right-radius:14px;
border-bottom-right-radius:14px;
border-bottom-left-radius:14px;
}
.boucle109{
  width: 10px;
  height: 14px;
  border: 0px;
  border-right: 2px solid #3366FF;

border-top-left-radius:14px;
border-top-right-radius:14px;
border-bottom-right-radius:100px;
border-bottom-left-radius:14px;
}

.tourne90 {
    float: left;
    -ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Safari */
    transform: rotate(-90deg);
}
.boucle110{
  width: 14px;
  height: 14px;
  border: 0px;
  border-bottom: 2px solid #3366FF;
  border-right: 2px solid #3366FF;
  border-left: 2px solid #3366FF;

border-top-left-radius:7px;
border-top-right-radius:7px;
border-bottom-right-radius:14px;
border-bottom-left-radius:14px;
}

.boucle111{
  width: 14px;
  height: 14px;
  border: 0px;
  border-bottom: 2px solid #3366FF;
  border-right: 2px solid #3366FF;

border-top-left-radius:14px;
border-top-right-radius:14px;
border-bottom-right-radius:14px;
border-bottom-left-radius:14px;
}

.boucle112{
	position:absolute;
  width: 20px;
  height: 40px;
  border: 0px;
  border-left: 3px solid #3366FF;
border-top-left-radius:10px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:80px;
	margin-left: 50px;
}

.boucle113{
  width: 16px;
  height: 18px;
  border: 0px;
  border-bottom: 2px solid #3366FF;
  border-right: 2px solid #3366FF;


border-top-left-radius:140px;
border-top-right-radius:18px;
border-bottom-right-radius:140px;
border-bottom-left-radius:18px;
}
.boucle114{
  width: 25px;
  height: 18px;
  border: 0px;
  border-top: 2px solid #3366FF;



border-top-left-radius:80px;
border-top-right-radius:18px;
border-bottom-right-radius:140px;
border-bottom-left-radius:18px;
}

.boucle115{
  width: 16px;
  height: 10px;
  border: 0px;
  border-top: 2px solid #3366FF;
  border-right: 2px solid #3366FF;
  border-left: 2px solid #3366FF;

border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
}
.boucle116{
  width: 10px;
  height: 16px;
  border: 0px;
  border-top: 2px solid #3366FF;
  border-right: 2px solid #3366FF;
  border-left: 2px solid #3366FF;
  border-bottom: 2px solid #3366FF;
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
}

.boucle117{
  width: 10px;
  height: 16px;
  border: 0px;
  border-right: 2px solid #3366FF;
  border-left: 2px solid #3366FF;
  border-top: 2px solid #3366FF;
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
}

.boucle118{
  width: 10px;
  height: 16px;
  border: 0px;

  border-left: 2px solid #3366FF;
  border-top: 2px solid #3366FF;
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
}

.boucle119{
  width: 10px;
  height: 20px;
  border: 0px;

  border-right: 2px solid #3366FF;
  border-top: 2px solid #3366FF;
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
}

.tourne35m {
    float: left;
    -ms-transform: rotate(37deg); /* IE 9 */
    -webkit-transform: rotate(37deg); /* Safari */
    transform: rotate(37deg);
}


.boucle120 {
    float: left;
    -ms-transform: rotate(14.562deg); /* IE 9 */
    -webkit-transform: rotate(14.562deg); /* Safari */
    transform: rotate(14.562deg);
}

  • Exemple de création de dessin animé éducatif interactif 584 images

  • Banque de personnages css