Alphabet 4 forme numérique pour les utilisateurs d'un langage multidirectionnel




A placer dans le body

chiffre 1

<div class="mon_humeur1 action">
<div class="trait_vertical1" style="margin-top:-15px ; height:15px ; margin-left:20px">
<div class="boucle210" style="margin-left:-16px">
</div>
</div>
</div>




chiffre 2

<div class="mon_humeur1 action">
<div class="boucle206" style="margin-top:-7px ; margin-left:40px">
<div class="trait_vertical1" style="margin-top:0px ; margin-left:0px; height:7px">
<div class="trait_horizontal1" style="margin-top:7px ; margin-left:0px">
</div>
</div>
</div>
</div>




chiffre 3

<div class="boucle206" style="margin-top:-7px ; margin-left:40px">
<div class="boucle206" style="margin-top:7px ; margin-left:0px">
</div>
</div>




chiffre 4

<div class="mon_humeur1 action">
<div class="trait_vertical1" style="margin-top:-7px ; height:14px ; margin-left:40px">
<div class="trait_horizontal1" style="margin-top:6px ; margin-left:-9px">
<div class="trait_vertical1 tourne45m" style="margin-top:-8px ; margin-left:4px ; height:12px">
</div>
</div>
</div>
</div>




chiffre 5

<div class="mon_humeur1 action">
<div class="boucle206" style="margin-top:-7px ; margin-left:40px">
<div class="trait_vertical1" style="margin-top:-7px ; margin-left:0px; height:7px">
<div class="trait_horizontal1" style="margin-top:0px ; margin-left:0px">
</div>
</div>
</div>
</div>




chiffre 6

<div class="mon_humeur1 action">
<div class="boucle208" style="margin-top:-8px ; margin-left:40px">
<div class="boucle212" style="margin-top:-12px ; margin-left:-2px">
</div>
</div>

</div>




chiffre 7

<div class="mon_humeur1 action">
<div class="trait_horizontal1 " style="width:9px ; margin-top:1.2px ; margin-left:15px">
<div class="trait_vertical1 tourne30m" style="height:17px ; margin-top:1.2px ; margin-left:6px">
</div>
</div>
</div>




chiffre 8

<div class="mon_humeur1 action">
<div class="boucle204" style="margin-top:-8px ; margin-left:40px">
<div class="boucle205" style="margin-top:8px ; margin-left:-2px">
</div>
</div>
</div>




chiffre 9

<div class="mon_humeur1 action">
<div class="boucle202" style="margin-top:10px ; margin-left:40px">
<div class="boucle203" style="margin-top:-10px ; margin-left:0px">
</div>
</div>
</div>>




chiffre 0

<div class="mon_humeur1 action">

<div class="boucle201" style="margin-top:10px ; margin-left:40px">

</div>

</div>




chiffre +

<div class="mon_humeur1 action">
<div class="trait_vertical1" style="margin-top:8px ; height:10px ; margin-left:20px">
<div class="trait_vertical1 tourne90" style="height:9px ; margin-top:1.2px">
</div>
</div>
</div>




chiffre -

<div class="mon_humeur1 action">
<div class="trait_vertical1 tourne90" style="height:9px ; margin-top:1.2px">
</div>
</div>




chiffre *

<div class="mon_humeur1 action">

<div class="trait_vertical1" style="margin-top:8px ; height:10px ; margin-left:20px">
<div class="trait_vertical1 tourne45m" style="height:9px ; margin-top:1.2px">
<div class="trait_vertical1 tourne45m" style="height:9px ; margin-top:1.2px">
<div class="trait_vertical1 tourne45m" style="height:9px ; margin-top:1.2px">
</div>
</div>
</div>
</div>
</div>




chiffre /

<div class="mon_humeur1 action">

<div class="trait_vertical1 tourne30m" style="height:9px ; margin-top:1.2px">
</div>
</div>




signe 1

<div class="boucle206" style="margin-top:-7px ; margin-left:40px">
<div class="boucle206" style="margin-top:7px ; margin-left:0px">
</div>
</div>




A placer dans le style du head

.mon_humeur1{
	position:relative;
  width: 40px;
  height: 40px;
	background-color: #F5FFFA;
	margin-left: 1px;
}
.trait_vertical1{
	position:relative;
  width: 2px;
  height: 15px;
  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;

}
.boucle201{
  width: 8px;
  height: 15px;
  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:15px;
border-top-right-radius:15px;
border-bottom-right-radius:15px;
border-bottom-left-radius:15px;
}
.boucle202{
  width: 10px;
  height: 15px;
  border: 0px;
  border-top: 2px solid #3366FF;
  border-right: 2px solid #3366FF;
  border-bottom: 2px solid #3366FF;
border-top-left-radius:15px;
border-top-right-radius:15px;
border-bottom-right-radius:15px;
border-bottom-left-radius:15px;
}
.boucle203{
  width: 10px;
  height: 15px;
  border: 0px;
  border-bottom: 2px solid #3366FF;
border-top-left-radius:15px;
border-top-right-radius:15px;
border-bottom-right-radius:15px;
border-bottom-left-radius:15px;
}
.boucle204{
  width: 7px;
  height: 10px;
  border: 0px;
  border-top: 2px solid #3366FF;
  border-right: 2px solid #3366FF;
  border-left: 2px solid #3366FF;
border-top-left-radius:15px;
border-top-right-radius:15px;
border-bottom-right-radius:15px;
border-bottom-left-radius:15px;
}
.boucle205{
  width: 7px;
  height: 10px;
  border: 0px;
  border-bottom: 2px solid #3366FF;
  border-right: 2px solid #3366FF;
  border-left: 2px solid #3366FF;
border-top-left-radius:15px;
border-top-right-radius:15px;
border-bottom-right-radius:15px;
border-bottom-left-radius:15px;
}
.boucle206{
  width: 10px;
  height: 7px;
  border: 0px;
  border-bottom: 2px solid #3366FF;
  border-right: 2px solid #3366FF;
  border-top: 2px solid #3366FF;
border-top-left-radius:5px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
border-bottom-left-radius:5px;
}
.boucle207{
  width: 10px;
  height: 7px;
  border: 0px;
  border-left: 2px solid #3366FF;
border-top-left-radius:5px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
border-bottom-left-radius:5px;
}
.boucle208{
  width: 10px;
  height: 7px;
  border: 0px;
  border-bottom: 2px solid #3366FF;
  border-right: 2px solid #3366FF;
  border-top: 2px solid #3366FF;
  border-left: 2px solid #3366FF;
border-top-left-radius:5px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
border-bottom-left-radius:5px;
}
.boucle209{
  width: 10px;
  height: 7px;
  border: 0px;
  border-left: 2px solid #3366FF;
border-top-left-radius:5px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
border-bottom-left-radius:5px;
}
.boucle210{
	position:relative;
  width: 15px;
  height: 10px;
  border: 0px;
  border-right: 3px solid #3366FF;
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:100px;
border-bottom-left-radius:10px;
}
.boucle211{
  width: 14px;
  height: 14px;
  border: 0px;
  border-top: 2px solid #3366FF;
  border-right: 2px solid #3366FF;

border-top-left-radius:140px;
border-top-right-radius:14px;
border-bottom-right-radius:14px;
border-bottom-left-radius:14px;
}
.angle1 {
    -ms-transform: rotate(60deg); 
    -webkit-transform: rotate(60deg); 
    transform: rotate(60deg); 
}
.boucle212{
  width: 14px;
  height: 14px;
  border: 0px;
  border-left: 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:7px;
}
.tourne45m {
    float: left;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari */
    transform: rotate(45deg);
}
.tourne30m {
    float: left;
    -ms-transform: rotate(30deg); /* IE 9 */
    -webkit-transform: rotate(30deg); /* Safari */
    transform: rotate(30deg);
}
.tourne90 {
    float: left;
    -ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Safari */
    transform: rotate(-90deg);
}

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

  • Banque de personnages css