Alphabet 2 forme libre pour les utilisateurs d'un langage multidirectionnel et de documents protégés aux normes iso




A placer dans le body

Lettre a

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




Lettre b

<div class="mon_humeur1 action">
<div class="boucle4" style="margin-top:10px ; margin-left:20px">
<div class="boucle5" style="margin-left:-17px">
<div class="boucle6" style="margin-top:33px ; margin-left:20.5px">
<div class="trait_horizontal1" style="margin-top:0.1px ; margin-left:5px ; width:7px">
</div>
</div>
</div>
</div>
</div>




Lettre c

<div class="mon_humeur1 action">
<div class="boucle28" style="margin-top:15px ; margin-left:5px">
<div class="trait_horizontal1" style="margin-top:10px ; margin-left:7px ; width:7px">
</div>
</div>
</div>




Lettre d

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




Lettre e

<div class="mon_humeur1 action">
<div class="boucle4" style="margin-top:10px ; margin-left:20px ; height:16px">
<div class="boucle5" style="margin-left:-17px ; height:12px">
</div>
</div>
</div>




Lettre f

<div class="mon_humeur1 action">

<div class="boucle4" style="margin-top:10px ; margin-left:20px ; height:16px">
<div class="boucle5" style="margin-left:-17px ; height:12px">
</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="boucle9" style="margin-top:10px ; margin-left:10px">
<div class="sortie_droite" style="margin-left:10px">
<div class="trait_vertical1" style="margin-top:-5px ; width:2px ; height:2px">
</div>
</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="trait_vertical1" style="margin-top:10px ; margin-left:20px ; height:20px">
<div class="boucle5" style="margin-left:-17px ; height:14px">
</div>
</div>
<div class="boucle13" style="margin-top:20px ; margin-left:21px ; height:4px">
</div>
<div class="sortie_droite" style="margin-top:-4px ; margin-left:21px ; height:7px">
</div>
</div>




Lettre l

<div class="mon_humeur1 action">

<div class="boucle4" style="margin-top:10px ; margin-left:20px">
<div class="boucle5" style="margin-left:-17px">
</div>
</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="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 q

<div class="mon_humeur1 action">
<div class="boucle1" style="margin-top:15px ; margin-left:5px">
<div class="trait_vertical1" style="height:20px ; margin-left:10px">
<div class="boucle14" style="margin-top:-1px ; margin-left:0.1px">
<div class="sortie_droite" style="margin-left:10px">
</div>
</div>
</div>
</div>
</div>




Lettre r

<div class="mon_humeur1 action">
<div class="boucle19" style="margin-top:10px ; margin-left:10px">
<div class="boucle16" style="margin-top:-5px ; margin-left:8px">
<div class="boucle17" style="margin-top:10px ; margin-left:10px">
</div>
</div>
</div>
</div>




Lettre s


<div class="mon_humeur1 action">

<div class="boucle20" style="margin-top:10px ; margin-left:10px">
<div class="boucle21" style="margin-left:7px">
</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" style="margin-top:10px ; margin-left:10px">
<div class="sortie_droite" style="margin-left:10px"">
<div class="boucle9" style="margin-left:2px">
<div class="sortie_droite" style="margin-left:10px">
</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;
	margin-left: 50px;
}
.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: 10px;
  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: 20px;
  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: 10px;
  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;
}

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

  • Banque de personnages css