pascal.lafourcade
/
swish
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '69bad5ceb3'
${ noResults }
swish/SwichGIT/Doc/Forme.md

9.1 KiB
Raw Blame History

Projet Swish

Etudes des formes

Avec C.TOFFIN, Y.SEVRET, A.GOLFIER, T.SOUCHON et Monsieur LAFOURCADE EN 2A de DUT Info.

SOMMAIRE

Explications

Chaque forme est contenu dans une div carré. Pour simplifier mes calculs, je prends un carré de longueur X qui permet de calculer facilement par la suite, si nous augmentons ou diminuons la taille de la div.

La division étant définie par :

#containform {
    height: var(--x);
    width: var(--x);
    display: table-cell;
    vertical-align: middle;
}

Etude du cercle

Cette structure contient deux formes :

  • Un anneau (composé de 2 ronds) qui représente la partie extérieur
  • Un rond qui représente la partie intérieur manquante

En HTML pour coder un rond, nous partons d'une div simple (un quadrilatère) :

<div class="rond"></div>

Et en CSS nous définissons

.rond {
    /*centrer la division*/
    display: table;
    margin: 0 auto;
    /*définir la couleur*/
    background-color: #FFD100;
    /*définir la taille*/
    height: 3vw;
    width: 3vw;
    /*définir un arondie à notre div*/
    border-radius: 3vw;
}

Version 1

Notre objectif étant de réaliser la figure suivante :

Alt text

En HTML pour coder les formes ci-dessus :

<div class="containform">
	<div class="anneau">
		<div class="rondinterieur"></div>
	</div>
</div>
<div class="containform">
  <div class="rond"></div>
</div>

Code forme anneau :

:root{
  --couleur : black;
  --couleurfond : white;
	/*Valeur à changer en fonction*/
  --x : 6vw;
  --d : calc(var(--x_longueur)/2);
  --e : calc(var(--x_longueur)/4);
}
.anneau {
    background-color: var(--couleur);
    border-radius: var(--x);
    height: var(--x);
    width: var(--x);
    /*Centrer les éléments intérieurs verticalement*/
    display: table-cell;
    vertical-align: middle;
}
.rondinterieur {
    background-color: var(--couleurfond);
    height: var(--d);
    width: var(--d);
    /*Centrer horizontalement*/
    display: table;
    margin: 0 auto;
    /*Faire un arondie*/
    border-radius: var(--d);
}
.rond {
   /*Centrer horizontalement*/
    display: table;
    margin: 0 auto;
    /*Définir la couleur*/
    background-color: var(--couleur);
    height: var(--d);
    width: var(--d);
    border-radius: var(--d);
}

Pour résumer, le rond intérieur va se centrer au milieu de l'anneau.

Version 2

Notre objectif étant de réaliser la figure suivante :

Alt text

Ici, nous nous intéressons sur la forme de gauche, car la forme de droite est déhà présenté au dessus. Code HTML :

<div class="containform2">
	<div class="rond2"></div>
</div>
<div class="containform">
	<div class="rond"></div>
</div>

Code CSS :

.containform2{
  height: var(--x);
  width: var(--x);
  display: table-cell;
  vertical-align: middle;
  background-color: var(--couleur);
}

.rond2 {
  display: table;
  margin: 0 auto;
  background-color: var(--couleurfond);
  height: var(--d);
  width: var(--d);
  border-radius: var(--d);
}

Version 3

Pour la version 3, nous assemblons les idée du dessous de façon à obtenir cette idée :

Alt text Pour différencier chacunes des formes, nous réduisons le diamètre à chaque fois.

<div class="containform2">
	<div class="anneau2"></div>
</div>
<div class="containform">
	<div class="anneau3">
		<div class="rond3"></div>
	</div>
</div>
<div class="containform">
	<div class="rond4"></div>
</div>

Code CSS :

:root{
	/*Valeur à changer en fonction*/
  --couleur : #FFD100;
	--couleurfond : white;
  --x : 6vw;
  --d : calc(var(--x)/2);
  --d1 : calc(var(--x)/1.15);
  --d2 : calc(var(--x)/1,25);
  --d3 : calc(var(--x)/2,15);
  --e : calc(var(--x)/4);
}

.anneau2 {
	position: relative;
  background-color: var(--couleurfond);
  border-radius: var(--d1);
  height: var(--d1);
  width: var(--d1);
  calc((var(--x) - var(--d1))/2);
  /*Centrer verticalement les div contenu dans cette div*/
  display: table-cell;
  vertical-align: middle;
}

.anneau3 {
	position: relative;
  background-color: var(--couleur);
  border-radius: var(--d2);
  height: var(--d2);
  width: var(--d2);
  /*Centrer horizontalement*/
  margin-left: auto;
  margin-right: auto;
}

.rond3 {
  position: relative;
  top : calc(var(--x) - var(--d2));
  left : calc(var(--x) - var(--d2));
  display: table-cell;
  vertical-align: middle;
  background-color: var(--couleurfond);
  height: var(--d);
  width: var(--d);
  border-radius: var(--d);
}

.rond4 {
  display: table;
  margin: 0 auto;
  background-color: var(--couleur);
  height: var(--d3);
  width: var(--d3);
  border-radius: var(--d3);
}

Etude du carré

Cette structure contient deux formes :

  • Un carré (composé de 2 carré) qui représente la partie extérieur
  • Un carré qui représente la partie intérieur manquante

Version 1

Alt text

En HTML pour coder les formes ci-dessus :

<div class="containform">
	<div class="carre">
		<div class="carreinterieur"></div>
	</div>
</div>

<div class="containform">
	<div class="carre2"></div>
</div>

Code CSS pour le carré :

:root{
  /*Valeur à changer en fonction*/
  --couleur : black;
  --couleurfond : white;
  --x : 6vw;
  --d : calc(var(--x)/2);
  --l : calc(var(--x)/2);
  --e : calc(var(--x)/4);
  --d1 : calc(var(--x)/1.15);
  --d2 : calc(var(--x)/1,25);
  --d3 : calc(var(--x)/2,15);
  --basecarre : calc(var(--x)/1.2);
  --b2 : calc(var(--x)/2);
}

.carre{
  position: relative;
  background-color: var(--couleur);
  height: var(--basecarre);
  width: var(--basecarre);
  margin-left: auto;
  margin-right: auto;
}

.carreinterieur{
  position: relative;
 top : calc((var(--basecarre) - var(--b2))/2);
 left : calc((var(--basecarre) - var(--b2))/2);
 display: table-cell;
 vertical-align: middle;
 background-color: var(--couleurfond);
 height: var(--b2);
 width: var(--b2);
}

.carre2 {
    background-color: var(--couleur);
    height: var(--b2);
    width: var(--b2);
    display: table;
    margin: 0 auto;
}

Version 2

Alt text

En HTML pour coder les formes ci-dessus :

<div class="containform2">
	<div class="carreinterieur2"></div>
</div>
<div class="containform">
	<div class="carre2"></div>
</div>

Code CSS pour le carré :

:root{
  /*Valeur à changer en fonction*/
  --couleur : black;
  --couleurfond : white;
  --x : 6vw;
  --d : calc(var(--x)/2);
  --l : calc(var(--x)/2);
  --e : calc(var(--x)/4);
  --d1 : calc(var(--x)/1.15);
  --d2 : calc(var(--x)/1,25);
  --d3 : calc(var(--x)/2,15);
  --basecarre : calc(var(--x)/1.2);
  --b2 : calc(var(--x)/2);
}

.carreinterieur2 {
    background-color: var(--couleurfond);
    height: var(--b2);
    width: var(--b2);
    display: table;
    margin-left: auto;
    margin-right: auto;
}

Version 3

Alt text

En HTML pour coder les formes ci-dessus :

<div class="containform2">
	<div class="carreinterieur3"></div>
</div>
<div class="containform">
	<div class="carrev2">
		<div class="carreinterieur4"></div>
	</div>
</div>
<div class="containform">
	<div class="carre3"></div>
</div>

Code CSS pour le carré :

:root{
  /*Valeur à changer en fonction*/
  --couleur : black;
  --couleurfond : white;
  --x : 6vw;
  --d : calc(var(--x)/2);
  --l : calc(var(--x)/2);
  --e : calc(var(--x)/4);
  --d1 : calc(var(--x)/1.15);
  --d2 : calc(var(--x)/1,25);
  --d3 : calc(var(--x)/2,15);
  --basecarre : calc(var(--x)/1.2);
  --b2 : calc(var(--x)/2);
  --b3 : calc(var(--x)/1.3);
  --b4 : calc(var(--x)/2.4);
}

.carreinterieur3 {
	position: relative;
    background-color: var(--couleurfond);
    height: var(--basecarre);
    width: var(--basecarre);
    left : calc((var(--x) - var(--basecarre))/2);
    display: table-cell;
    vertical-align: middle;
}

.carrev2 {
	position: relative;
    background-color: var(--couleur);
    height: var(--b3);
    width: var(--b3);
    margin-left: auto;
    margin-right: auto;
}

.carreinterieur4 {
	position : relative;
	top : calc((var(--x) - var(--basecarre)) / 1.3);
	left : calc((var(--x) - var(--basecarre)) / 1.3);
  background-color: var(--couleurfond);
  height: var(--d);
  width: var(--d);
  display: table-cell;
  vertical-align: middle;
}

.carre3 {
    background-color: var(--couleur);
    height: var(--b4);
    width: var(--b4);
    display: table;
    margin: 0 auto;
}

Etude du triangle

Version 1