Les formes géométriques de base et le coup de crayon

Director: Abadie joris (born Juillet 17, 1990)
Homme et Temps joris Abadie

Symbolique des termes.

width veut dire la largeur
height veut dire la hauteur
background veut dire le fond
border veut dire le bord

Le trait droit de crayon.

Le trait droit de crayon plein
.trait { width: 100px; height: 2px; background: black; }


Le trait droit de crayon creux
.traitc { width: 100px; height: 8px; border:1px solid black; }


Le carré plein
.carrer { width: 20px; height: 20px; background: black; }


Le rectangle plein
.rectangle { width: 60px; height: 20px; background: black; }


Résumé : trait, carré, rectangle, trapèze sont de même famille et se détermine avec les valeurs

Mise en forme du trait de crayon.

Le trait droit de crayon plein
.trait1 { width: 100px; height: 6px; background: black; -webkit-border-radius: 50px 50px 50px 50px / 20px 20px 90px 90px; border-radius: 50% 50% 50% 50% / 20% 20% 90% 90%;}


Le trait droit de crayon creux
.traitc1 { width: 100px; height: 8px; border:1px solid black; -webkit-border-radius: 50px 50px 50px 50px / 20px 20px 90px 90px; border-radius: 50% 50% 50% 50% / 20% 20% 90% 90%;}


Le carré plein
.carrer1 { width: 20px; height: 20px; background: black; -webkit-border-radius: 50px 50px 50px 50px / 20px 20px 90px 90px; border-radius: 50% 50% 50% 50% / 20% 20% 90% 90%;}


Le rectangle plein
.rectangle1 { width: 60px; height: 20px; background: black; -webkit-border-radius: 50px 50px 50px 50px / 20px 20px 90px 90px; border-radius: 50% 50% 50% 50% / 20% 20% 90% 90%;}


La rotation en exemple associée au trait droit de crayon creux
.tourne20 { float: left; -ms-transform: rotate(20deg); -webkit-transform: rotate(20deg); transform: rotate(20deg);}



Résumé : trait, carré, rectangle, trapèze sont de même famille et se détermine avec les valeurs

Le cercle.

pour dessiner un cercle il suffit de dessiner un carré auquel on ajoute border-radius:50%;
.cercle { width: 20px; height: 20px; background: black; border-radius:50%;}



Résumé : Oups, le cercle est donc une forme de carré en css

Le coup de crayon.

Le coup de crayon s'obtient en dessinant une forme, puis on dit n'affiche pas les bords sans donner de couleur de fond.
Ensuite, ont dit affiche ce coté en le mettant en forme.
En exemple :
.montrait{ width: 40px; height: 15px; border: 0px; border-bottom: 2.5px solid black; border-top-left-radius:4px; border-top-right-radius:4px; border-bottom-right-radius:40px; border-bottom-left-radius:40px; }


Résumé : Tous les dessins deviennent réalisables à coup de crayon

Associer deux formes, mode after et before.

Résumé : Pour remplacer la position d'une image, il suffit de modifier la valeur derrière margin-left ou derrière margin-top pour

Les couleurs et les dégradés de couleurs en basculement.

Les couleurs s'écrivent avec un indice couleur
Cet indice associe plusieurs autres indices pour donner le couleur finale
En exemple du rouge clair #ffffff au rouge foncé #000000,
nous retrouvons aux extrème le blanc et le noir, entre ce sont les différentes teintes, le millieu est #ff0000.
De même pour le bleu, le millieu est #0000ff
De même pour le vert, le millieu est #00ff00
Pour obtnir du jaune il suffit de mélanger et nous pouvons écrire :
De même pour le jaune le millieu est #ffff00
La couleur est obtenue en mélangeant les trois bases.
Quelques exemples :

.macouleur { width: 100px; height: 4px; background: #2277ff;}



.macouleur { width: 100px; height: 4px; background: #227733;}



.macouleur { width: 100px; height: 4px; background: #227733;}



.macouleur { width: 100px; height: 4px; background: #000000;}



.macouleur { width: 100px; height: 4px; background: #ff0000;}



Les caractères des couleurs changent de 0 à 9 et de a à f

:

Le rotationnel.

Une rotation est une suite de variation d'angle, celle-ci peut être constante ou variable, accompagné d'une translation pour créer les spirales.
.tourne15 { float: left; -ms-transform: rotate(15deg); -webkit-transform: rotate(15deg); transform: rotate(15deg);}
.tourne30 { float: left; -ms-transform: rotate(30deg); -webkit-transform: rotate(30deg); transform: rotate(30deg);}
.tourne45 { float: left; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);}
.tourne60 { float: left; -ms-transform: rotate(60deg); -webkit-transform: rotate(60deg); transform: rotate(60deg);}
.tourne75 { float: left; -ms-transform: rotate(75deg); -webkit-transform: rotate(75deg); transform: rotate(75deg);}
.tourne90 { float: left; -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg);}
.tourne105 { float: left; -ms-transform: rotate(105deg); -webkit-transform: rotate(105deg); transform: rotate(105deg);}
.tourne120 { float: left; -ms-transform: rotate(120deg); -webkit-transform: rotate(120deg); transform: rotate(120deg);}
.tourne135 { float: left; -ms-transform: rotate(135deg); -webkit-transform: rotate(135deg); transform: rotate(135deg);}
.tourne150 { float: left; -ms-transform: rotate(150deg); -webkit-transform: rotate(150deg); transform: rotate(150deg);}
.tourne165 { float: left; -ms-transform: rotate(165deg); -webkit-transform: rotate(165deg); transform: rotate(165deg);}
.tourne180 { float: left; -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg);}
.tourne195 { float: left; -ms-transform: rotate(195deg); -webkit-transform: rotate(195deg); transform: rotate(195deg);}
.tourne210 { float: left; -ms-transform: rotate(210deg); -webkit-transform: rotate(210deg); transform: rotate(210deg);}
.tourne225 { float: left; -ms-transform: rotate(225deg); -webkit-transform: rotate(225deg); transform: rotate(225deg);}
.tourne240 { float: left; -ms-transform: rotate(240deg); -webkit-transform: rotate(240deg); transform: rotate(240deg);}
.tourne255 { float: left; -ms-transform: rotate(255deg); -webkit-transform: rotate(255deg); transform: rotate(255deg);}
.tourne270 { float: left; -ms-transform: rotate(270deg); -webkit-transform: rotate(270deg); transform: rotate(270deg);}
.tourne285 { float: left; -ms-transform: rotate(285deg); -webkit-transform: rotate(285deg); transform: rotate(285deg);}
.tourne300 { float: left; -ms-transform: rotate(300deg); -webkit-transform: rotate(300deg); transform: rotate(300deg);}
.tourne315 { float: left; -ms-transform: rotate(315deg); -webkit-transform: rotate(315deg); transform: rotate(315deg);}
.tourne330 { float: left; -ms-transform: rotate(330deg); -webkit-transform: rotate(330deg); transform: rotate(330deg);}
.tourne345 { float: left; -ms-transform: rotate(345deg); -webkit-transform: rotate(345deg); transform: rotate(345deg);}



Résumé :