Geometric Images only with HTML and CSS

Utilisez cet outil gratuit Images géométriques en ligne qui vous aidera à créer des images géométriques avec HTML et CSS. Cet outil donne une opportunité de créer des formes et sélectionner les couleurs vous préférez.

L’outil Images Géométriques vous permet de définir la largeur, la hauteur, le radius, tourner et fausser pour obtenir la forme exacte que vous souhaitez. Il y a aussi une pipette de couleurs qui peut vous aider à sélectionner votre couleur préférée en hex. L’outil crée immédiatement une forme sur la base des valeurs définies.

L’outil Images géométriques fournit les formes suivantes: Rectangle, Circle, Triangle, Parallelogram, Heart, Pac-Man, Pair Point Burst, et Moon.

De plus, W3Docs a un livre CSS qui vous aide à apprendre les propriétés CSS. Vous pouvez apprendre sur les propriétés Width, Height, Border-radius, et Color sur notre site Web.

Qu’est-ce que c’est la Forme?

L’apparence d’un objet ou d’une structure qui reste stable ou est constant dans des conditions spécifiques normales est appelé la forme géométrique de l’objet. Comme les paramètres diffèrent, le même font les types de formes. Si les formes de deux objets sont les mêmes ou similaires, on dit qu'ils sont congruents les uns aux autres. Tout corps ou entité matérialiste connu dans l'univers peut être présent sous la forme d'une forme géométrique.

Les formes de la conception Web.

Si vous voulez rendre votre site Web plus attirant, vous devez se concentrer sur chaque détail de sa conception. Le contenu d’un site Web est la partie la plus importante car plus le contenu est intéressant, plus les gens visiteront votre site Web. De toute façon, les formes jouent aussi un rôle important à la conception Web parallèle au contenu.

Chaque forme a une signification et un impact visuel pour les utilisateurs avec with une variété infinie de caractéristiques. Aucun site Web ne peut se passer sans formes. Même si votre site ne contient que d’information écrite, vous comprenez des formes sur la page.

Les formes ne sont pas juste une groupe de lignes connectées. On peut évoquer plusieurs sentiments et avoir un grand impact pour le site Web. Les couleurs peuvent aussi augmenter l’engagement des utilisateurs et les rendre visiter votre site plus souvent. La combinaison de certaines formes et couleurs a déjà une connotation définie dans notre subconscient. Par exemple, un cercle jaune représente le soleil, tandis qu’un demi-cercle jaune représente une demi-lune. Par exemple, les formes circulaires évoquent le sentiment de l’amour, la tendresse, le soin, le soutien, l’intégrité et la perfection. Les cercles aident à attirer l’attention des utilisateurs. Les cercles n’ont de début ou de dans chaque culture, ils représentent le soleil, la terre, la lune, l’univers et d’autres objets célestes. Il symbolisent le caractère complet. Les cercles sont gracieux et leurs courbes sont considérées comme féminines. Ils sont chaleureux, réconfortant et donnent un sens de sensualité et de l’amour. Leur mouvement signale d'énergie et de puissance. Ils signalent de sécurité et de connexion.

Les carrés et les rectangles sont considérés comme stables. Ils signalent honnêteté. Ils ont les bons angles et représentent l’ordre, la mathématique, la rationalité et la formalité. Les carrés et les rectangles symbolisent la conformité, la quiétude, la solidité, la sécurité et l’égalité.

Chaque élément sur une page Web est défini par un rectangle selon le modèle de boîte CSS. Les pages Web sont rectangles créés de plus petits rectangles et carrés.

Triangles

Triangles représentent la tension dynamique, l’action, et l'agression. Les triangles ont d’énergie et de puissance. Ils sont balancés et peuvent être un symbole de droit, science, et religion.

La force des triangles signale la masculinité. Leur nature dynamique les rendent correspondants mieux à l’entreprise de haute technologie en croissance qu’à l’institution financière stable lorsqu’on dessine un logo. Les triangles transmettent la progression, direction, et le but.

Types de Formes

Il y a trois types de base distingués de formes – géométriques, naturelles, et abstraites.

Formes géométriques

Les formes géométriques comprennent de cercles, carrés, triangles, parallélogrammes, et d’autres motifs facilement reconnaissables. En étant symétriques, elle suggèrent l’organisation et l’efficacité. La plupart des formes géométriques sur les pages Web sont créées à l’aide de CSS.

Formes naturelles

Les formes organiques ont plus de courbes que celles géométriques. Elles sont irrégulières et représentent les formes trouvées en nature, comme les fleuves, les feuilles, les nuages, etc. Ces formes sont couramment créées avec des images.

Formes abstraites

Les formes abstraites ont une forme reconnaissable mais ce ne sont pas d’objets réels. Elles sont les version stylisées des formes organiques en représentant diverses idées et conceptions. En général, les formes abstraites sont ajoutée par images.

Images Géométriques

Quelques formes sont bidimensionnelles, tandis que d’autres sont des figures tridimensionnelles. Pour dessiner quelqu’une de ces formes, on commence par une ligne ou par un segment de ligne ou par une courbe. On obtient différents types de formes et figures comme un triangle, un pentagone ou quelque autre forme dépendant du nombre et de l’arrangement de ces lignes. Les formes géométriques telle qu’un carré, rectangle, cercles, et triangles sont des formes 2D.

Rectangular (Rectangulaire)

Le rectangulaire est une forme qui a 4 côtés. La caractéristique distinctive d’un rectangulaire est ce que tous les 4 angles mesurent 90 degrés. Pour créer une forme rectangulaire avec l’outil Images Géométriques, vous devez définir la largeur, la hauteur, le radius, et aussi sélectionner une couleur pour la forme. Sur le côté droit de la page, vous obtiendrez la sortie de la forme et sur la partie basse, vous obtiendrez le code HTML et CSS. Vous pouvez copier le code et l’utiliser.

Circle (Cercle)

Le cercle est une forme qui peut être créée en traçant une courbe qui est toujours la même distance d’un point appelé le centre. La distance autour d’une cercle est appelée is called la circonférence du centre. Pour créer une forme cercle avec l’outil Images Géométriques, vous devez définir la largeur, la hauteur, le radius, et aussi sélectionner une couleur de la forme. Sur le côté droit de la page, vous obtiendrez la sortie et sur la partie basse, vous obtiendrez le code HTML et CSS.

Triangle

Le triangle est une forme qui est constituée par 3 lignes droites qui sont appelées les côtés. Il y a des façon différentes de classifier les triangles, selon leurs côtés ou angles:

Selon leurs angles:

  1. Triangle rectangle – avec l’angle de 90 degrés.
  2. Triangle aigu – le plus grand angle est inférieur à 90 degrés.
  3. Triangle obtus– le plus grand angle est supérieur à 90 degrés.

Selon leurs côtés:

  1. Triangle équilatéral – tous les côtés et angles sont égaux.
  2. Triangle isocèle – deux côtés égaux.
  3. Triangle scalène– tous les trois côtés sont différents.

L’outil Images Géométriques vous permet de créer une forme de triangle en quelques secondes et obtenir le code HTML et CSS immédiatement. Pour la créer, vous devez définir la largeur, la hauteur et le radius. Vous pouvez définir une valeur dans la saisie "rotate" et l’outil va pivoter l’image. Sélectionnez une couleur pour la forme en hex. Sur le côté droit de la page, vous obtiendrez la sortie et sur la partie basse, vous obtiendrez le code..

Parallelogram (Parallélogramme)

Un Parallélogramme est une forme plate dont les côtés opposés sont parallèles et ont la même longueur.

Le parallélogramme a les propriétés suivantes:

  1. Les côtés opposés sont parallèles.
  2. Les côtés opposés sont congruents.
  3. Les angles opposés sont congruents.
  4. Les angles consécutifs sont supplémentaires.

Pour créer une forme de parallélogramme, vous devez définir la largeur, la hauteur, le radius, et fausser l’image pour spécifier une transformation 2D de travers le long de l’axe x et y. Sélectionnez une couleur de la forme en hex. Sur le côté droit de la page, vous obtiendrez la saisie de la forme et, sur la partie basse, le code apparaîtra.

Heart (Coeur)

Cette structure a la forme d’un coeur. Cela est une forme géométrique car elle a des lignes droites et courbées. Pour créer une forme d’un coeur, vous devez définir la largeur, la hauteur, le radius, et spécifier la taille du coeur en définissant une valeur dans la saisie "scale". Sélectionnez une couleur pour votre coeur en hex. Sur le côté droit de la page, vous obtiendrez la sortie de la forme et, sur la partie basse, vous obtiendrez le code que vous pouvez copier.

Pac-Man

La forme de Pac-man est appelé un secteur. Un secteur est un part d’une tarte que vous pouvez vous couper pour le dessert. L’angle est appelé un angle réflexe - sa mesure est supérieure à 180 degrés. Avec l’outil Images Géométriques, vous pouvez créer un pac-man juste en un clic. Vous pouvez choisir le côté à couper pour avoir une forme de pac-man. De plus, vous pouvez définir la taille de la forme. Sur la partie basse de la page, le code HTML et CSS apparaîtra immédiatement.

Pair Point Burst

Créez votre propre forme en définissant le nombre d’angles et en obtenant le code ci-dessous. Dans la saisie "count", vous pouvez écrire n’importe quel nombre et l’outil vous donnera une forme avec ce nombre des angles.

Moon (Lune)

Cette structure a la forme d’une lune. L’outil Images Géométriques crée des formes différentes d’une lune. Vous pouvez définir la largeur, hauteur, radius et spécifier la position de la forme en définissant la valeur pour "left" et "right". Les valeurs négatives sont valides. Au dessous, vous pouvez obtenir le code.