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




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: black;
}
.trait_vertical1:active{
  background-color: #F5FFFA;
}
.trait_horizontal1{
	position:absolute;
  width: 10px;
  height: 2px;
  background-color: black;
}
.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); 
}

A placer dans le body en ajoutant l'ouverture des balises en début de ligne, et la fermeture des balise en fin de ligne

Lettre A

<div class="mon_humeur1 action">


<div class="trait_vertical1" style="margin-top:10px ; margin-left:10px">
<div class="trait_horizontal1">
<div class="trait_vertical1" style="margin-left:10px">
<div class="trait_horizontal1" style="margin-top:10px; margin-left:-10px">
<div class="trait_vertical1">
<div class="trait_vertical1" style="margin-left:10px">
</div>
</div>
</div>
</div>
</div>
</div>


</div>




Lettre B


div class="mon_humeur1 action" 


div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_horizontal1"
div class="trait_vertical1" style="margin-left:10px"
div class="trait_horizontal1" style="margin-top:10px; margin-left:-10px"
div class="trait_vertical1"
div class="trait_horizontal1" style="margin-top:10px"
div class="trait_vertical1" style="margin-left:10px; margin-top:-10px"
/div
/div
/div
/div
/div
/div
/div


/div




Lettre C


div class="mon_humeur1 action" 

div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_horizontal1" style="margin-top:-10px"
div class="trait_horizontal1" style="margin-top:20px"
/div
/div
/div
/div

/div




Lettre D


div class="mon_humeur1 action" 

div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_horizontal1" style="margin-top:-10px; margin-left:-3px"
div class="trait_horizontal1" style="margin-top:20px"
div class="trait_vertical1" style="margin-top:-20px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
/div
/div
/div
/div
/div
/div

/div




Lettre E


div class="mon_humeur1 action" 

div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_horizontal1" style="margin-top:-10px"
div class="trait_horizontal1" style="margin-top:10px"
div class="trait_horizontal1" style="margin-top:10px"
/div
/div
/div
/div
/div

/div




Lettre F


div class="mon_humeur1 action" 

div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_horizontal1" style="margin-top:-10px"
div class="trait_horizontal1" style="margin-top:10px"
/div
/div
/div
/div


/div




Lettre G


div class="mon_humeur1 action" 

div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_horizontal1" style="margin-top:-10px"
div class="trait_horizontal1" style="margin-top:20px"
div class="trait_vertical1" style="margin-top:-10px ; margin-left:10px"
div class="trait_horizontal1" style="margin-left:-4px"
/div
/div
/div
/div
/div
/div

/div




Lettre H


div class="mon_humeur1 action" 

div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_vertical1" style="margin-top:-10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_horizontal1" style="margin-left:-10px"
/div
/div
/div
/div
/div

/div




Lettre I


div class="mon_humeur1 action" 

div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
/div
/div



/div




Lettre J


div class="mon_humeur1 action" 

div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_horizontal1" style="margin-left:-4px; margin-top:-10px"
div class="trait_horizontal1" style="margin-left:-6px; margin-top:20px"
/div
/div
/div
/div

/div




Lettre K


div class="mon_humeur1 action" 

div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_horizontal1 angle1" style="margin-top:3px"
div class="trait_horizontal1 angle1" style="margin-top:-6px ; margin-left:-10px"
/div
/div
/div
/div

/div




Lettre L


div class="mon_humeur1 action" 

div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_horizontal1" style="margin-top:10px"
/div
/div
/div

/div




Lettre M


div class="mon_humeur1 action" 

div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_vertical1" style="margin-top:-10px ; margin-left:7px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_vertical1" style="margin-top:-10px ; margin-left:7px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_horizontal1" style="margin-top:-10px ; margin-left:-14px"
div class="trait_horizontal1" style="margin-left:4px"
/div
/div
/div
/div
/div
/div
/div
/div

/div




Lettre N


div class="mon_humeur1 action" 

div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_vertical1" style="margin-top:-10px ; margin-left:9px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_horizontal1" style="margin-top:-10px ; margin-left:-10px"
/div
/div
/div
/div
/div

/div




Lettre O

div class="mon_humeur1 action" 

div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_vertical1" style="margin-top:-10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_horizontal1" style="margin-top:-10px ; margin-left:-10px"
div class="trait_horizontal1" style="margin-top:20px"
/div
/div
/div
/div
/div
/div

/div




Lettre P


div class="mon_humeur1 action" 

div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_horizontal1" style="margin-top:-10px"
div class="trait_horizontal1" style="margin-top:10px"
div class="trait_vertical1" style="margin-top:-10px ; margin-left:10px"
/div
/div
/div
/div
/div

/div




Lettre Q

div class="mon_humeur1 action" 

div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_vertical1" style="margin-top:-10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_horizontal1" style="margin-top:-10px ; margin-left:-10px"
div class="trait_horizontal1" style="margin-top:20px"
div class="trait_horizontal1 angle1" style="margin-left:7px"
/div
/div
/div
/div
/div
/div
/div

/div




Lettre R


div class="mon_humeur1 action" 


div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_horizontal1"
div class="trait_vertical1" style="margin-left:10px"
div class="trait_horizontal1" style="margin-top:10px; margin-left:-10px"
div class="trait_vertical1"
div class="trait_horizontal1 angle1" style="margin-left:7px"
/div
/div
/div
/div
/div
/div


/div




Lettre S


div class="mon_humeur1 action" 

div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_horizontal1"
div class="trait_horizontal1" style="margin-top:10px"
div class="trait_vertical1" style="margin-left:10px"
div class="trait_horizontal1" style="margin-top:10px ; margin-left:-10px"
/div
/div
/div
/div
/div

/div




Lettre T


div class="mon_humeur1 action" 

div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_horizontal1" style="margin-left:-4.5px"
div class="trait_vertical1" style="margin-top:10px ; margin-left:4.5px"
/div
/div
/div

/div




Lettre U


div class="mon_humeur1 action" 

div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_vertical1" style="margin-top:-10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_horizontal1" style="margin-top:10px ; margin-left:-10px"
/div
/div
/div
/div
/div

/div




Lettre V


div class="mon_humeur1 action" 

div class="trait_vertical1 angle1" style="margin-top:10px ; margin-left:45px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_vertical1 angle1" style="margin-top:8px ; margin-left:-5px"
div class="trait_vertical1" style="margin-top:10px"
/div
/div
/div
/div


/div

Lettre W


div class="mon_humeur1 action" 

div class="trait_vertical1 angle1" style="margin-top:10px ; margin-left:45px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_vertical1 angle1" style="margin-top:8px ; margin-left:-5px"
div class="trait_vertical1" style="margin-top:10px"
/div
/div
/div
/div
div class="trait_vertical1 angle1" style="margin-top:10px ; margin-left:65px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_vertical1 angle1" style="margin-top:8px ; margin-left:-5px"
div class="trait_vertical1" style="margin-top:10px"
/div
/div
/div
/div
/div




Lettre X

div class="mon_humeur1 action" 

div class="trait_vertical1 angle1" style="margin-top:10px ; margin-left:45px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_vertical1 angle1" style="margin-top:-10px ; margin-left:6px"
div class="trait_vertical1" style="margin-top:10px"
/div
/div
/div
/div

/div

Lettre Y


div class="mon_humeur1 action" 

div class="trait_vertical1 angle1" style="margin-top:10px ; margin-left:45px"
div class="trait_vertical1 angle1" style="margin-top:8px ; margin-left:-5px"
/div
/div
div class="trait_vertical1" style="margin-top:20px ; margin-left:41px"
/div

/div

Lettre Z


div class="mon_humeur1 action" 

div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_horizontal1"
div class="trait_horizontal1" style="margin-top:10px"
div class="trait_vertical1" style="margin-left:10px"
div class="trait_horizontal1" style="margin-top:10px ; margin-left:-10px"
/div
/div
/div
/div
/div

/div




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

  • Banque de personnages css