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.
160 lines
3.8 KiB
160 lines
3.8 KiB
# Projet Swish
|
|
**Etudes des formes**
|
|
> Avec C.TOFFIN, Y.SEVRET, A.GOLFIER, T.SOUCHON et Monsieur LAFOURCADE EN 2A de DUT Info.
|
|
|
|
---
|
|
## SOMMAIRE
|
|
- [Explications](#Explications)
|
|
- [Etude du cercle](#Etude-du-cercle)
|
|
- [Etude du carré](#Etude-du-carré)
|
|
- [Etude du triangle](#Etude-du-triangle)
|
|
- [Etude du losange](#Etude-du-losange)
|
|
- [Etude du pentagone](#Etude-du-pentagone)
|
|
|
|
|
|
---
|
|
## 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 :
|
|
```css
|
|
#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) :
|
|
```HTML
|
|
<div class="rond"></div>
|
|
```
|
|
Et en CSS nous définissons
|
|
```CSS
|
|
.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 :
|
|
|
|
|
|
|
|
Code forme anneau :
|
|
```css
|
|
:root{
|
|
/*Valeur à changer en fonction*/
|
|
--x : 6vw;
|
|
--d : calc(var(--x_longueur)/2);
|
|
--e : calc(var(--x_longueur)/4);
|
|
}
|
|
|
|
.anneau {
|
|
background-color: #FFD100;
|
|
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: white;
|
|
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: #FFD100;
|
|
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 :
|
|
|
|
|
|
|
|
Ici, nous nous intéressons sur la forme de gauche, car la forme de droite est déhà présenté au dessus.
|
|
Code HTML :
|
|
```HTML
|
|
<div class="containform2">
|
|
<div class="rond2"></div>
|
|
</div>
|
|
```
|
|
Code CSS :
|
|
```css
|
|
.containform2{
|
|
height: var(--x);
|
|
width: var(--x);
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
background-color: #FFD100;
|
|
}
|
|
|
|
.rond2 {
|
|
display: table;
|
|
margin: 0 auto;
|
|
background-color: white;
|
|
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 :
|
|
|
|
|
|
Il faut alors coder la forme de gauche
|
|
```HTML
|
|
<div class="containform2">
|
|
<div class="anneau2"></div>
|
|
</div>
|
|
```
|
|
Code CSS :
|
|
```css
|
|
.anneau2 {
|
|
background-color: white;
|
|
border-radius: var(--x);
|
|
height: var(--x);
|
|
width: var(--x);
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
}
|
|
```
|
|
|
|
Pour résumer, nous avons 2 container différents, 2 anneaux différents et deux rond différents. Une version transparente et une version avec une couleur pleine.
|