Astuces CSS
Préambule
Dans cet article, nous allons voir quelques astuces en CSS.
Centrer les éléments
Position absolue
Un élément en position: absolute, sera positionné par rapport soit à un élément parent ayant : position: relative, soit par rapport au body par défaut.
- top : position par rapport au haut de l'élément
- left: position par rapport à la gauche de l'élément
- right: position par rapport à la droite de l'élément
- bottom: position par rapport au bas de l'élément
Si on souhaite effectué un centrage parfait de notre élément, au sein de son parent ou du body, nous allons mettre à 50% top et left, puis utiliser une transformation (CSS3) :
transform: translate(-50%, -50%);
La translation, à -50% pour le haut comme la gauche, va permettre de déplacer de la moitié de notre élément au sein du parent. Ainsi, nous avons déplacer de la moitié de notre parent, mais du coup au on remonte et pousse à gauche, de la moitié de la taille de notre propre élément. Cela permet donc de retirer le décalage et de parfaitement centrer l'élément.
Avec les marges
Avec le système de margin, on peut positionner l'élément au centre. Par exemple :
margin: 0 auto;
Cette ligne, va définir la marche haute et basse à 0 et en automatique pour la gauche et la droite. Cela va permettre alors de centrer horizontalement notre élément. En revanche, il n'est pas possible d'effectuer la même chose pour le centrage vertical.
Avec les flexbox
Avec le système de flexbox (CSS3), on peut centrer nos éléments dans le parent, que se soit horizontalement ou verticalement. En premier lieu, nous devons déclarer que nous travaillons avec les flexbox :
display: flex
Ensuite, on va utiliser le centrage horizontale avec :
justify-content: center;
Enfin, nous avons l'alignement vertical avec :
align-items: center;
Attention cependant, pour pouvoir réaliser un centrage, il faut définir une hauteur à notre élément. Si on ne définit pas la hauteur, le centrage vertical n'est pas possible.
Créer des formes
Le CSS3 nous permet parmi l'éventail de possibilité, de créer des formes, qu'elles soit spécifique (un carré par exemple) ou polygonale (une forme qu'on définie par rapport à l'ensemble des points donnés). Pour cela nous utilisons donc :
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
Dans cet exemple, nous avons un losange. Chaque point est définit par la position top et left, ici donc :
- Un premier point positionné à la moitié du haut et collé à gauche
- Un second point positionné en diagonale à 100% du haut et 50% de la gauche (diagonale bas-gauche)
- Un troisième point positionné en diagonale à 50% du haut et 100% de la gauche (diagonale bas-droite)
- Enfin le quatrième point positionné en diagonale collé en haut et à 50% de la gauche (diagonale haut-droite)
Chacun des points va créer une ligne les reliant entre eux, ici donc le premier et le second point forment une diagonale qui va vers le bas, puis le second et le troisième forment une seconde ligne qui va en diagonale vers le haut et toujours vers la droite, formant la moitié de notre losange, enfin le troisième et quatrième vont former une nouvelle ligne diagonale allant en haut vers la gauche, formant un quart de notre losange. Mais comme une forme géométrique est toujours fermée, automatiquement il trace la dernière ligne diagonale qui se relie au premier point formant donc le dernier quart de notre losange.
Rendre une image responsive
Pour rendre une image responsive, il faut lui définir une largeur à 100% du conteneur et une hauteur en automatique. Du coup quand vous allez avoir une taille d'écran plus importante ou plus petite, l'image va automatiquement s'adapter.
Dégradé linéaire
En CSS, il est possible de réaliser très simplement des dégradés dit linéaire. Par exemple :
background-image: linear-gradient(red, blue);
Ici, nous faisons donc un dégradé passant du rouge (en haut) au bleu (en bas). On peut spécifier aussi une direction par exemple :
background-image: linear-gradient(to top left, red, blue);
Ici, notre dégradé de rouge part du bas à droite et monte en diagonale jusqu'en haut à gauche en passant vers le bleu. On retrouve donc notre dégradé de rouge vers le bleu, mais ici avec une diagonale.
On peut aussi spécifier l'information en degré, ce qui permet de gérer plus finement notre dégradé. On peut aussi ne pas faire un dégradé mais une succession de couleur ou personnaliser encore plus notre dégradé. Ainsi, en ajoutant à la couleur un pourcentage, on lui indique qu'il fera cette couleur de sa position jusqu'à x pourcent. Par exemple le drapeau français :
background-image: linear-gradient(to right, bleu 33%, white 33%, white 66%, red 66%);
Ici, on indique qu'on veut le "dégradé" vers la droite, avec le bleu sur 33% de la taille, puis du blanc de 33% jusqu'à 66% et enfin le rouge à partir de 66% ici jusqu'à la fin puisqu'on ne spécifie pas d'autres couleurs.
Le pourcentage, indique de la position jusqu'à un certain pourcentage. Ainsi, le white 33% permet d'indiquer jusqu'à 33% c'est du blanc, ce qui permet de reprendre à partir du bleu.
On peut avoir un dégradé partant non plus d'un bord, mais du milieu ; on utilisera radial-gradient' à la place de linear-gradient. Il part du centre obligatoirement. On ne peut pas indiquer de direction mais un pourcentage qui permet de spécifié la quantité de chaque couleur.
Conclusion
Le CSS permet de faire beaucoup de choses, et cet article ne traite que de quelques éléments qu'on oublis ou qui sont méconnus. Les possibilités sont telles, qu'on peut presque tout faire maintenant sans jamais utilisé de JavaScript, au contraire d'avant le CSS3 où on était bien plus limité.