Les modèles en libre-service du lab sont pensés pour être utilisés facilement. Textes, images, couleurs… Tout peut être remplacé sans avoir à faire de retouche photo ou autre. C’est pourquoi dans la majorité des modèles les images sont redimensionnées et recadrées automatiquement. Ce qui veut dire que n’importe quelle image prendra toujours la même forme et la même place imposée en CSS.

Les propriétés utilisées en CSS sont les suivantes :

object-fit et object-position

Object-fit redimensionne l’image en fonction du conteneur et object-position sert à déplacer l’image selon le besoin.

La bonne comparaison serait d’imaginer une photo placée dans un cadre que l’on ajuste selon la taille et forme du cadre.

A vous de choisir la bonne image!

Pour des effets de style, ce modèle a recours à un dégradé de couleur généré en CSS. Il existe des générateurs web simplifiés pour produire son parfait dégradé et je vous conseille cssgradient.io/.

Ne copiez que la deuxième ligne fournie par le site.

Pour les curieux, voici comment se compose un dégradé allant du blanc vers le noir, de haut en bas linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(0,0,0,1) 100%) puis, décortiqué :



linear définit le type de degradé. Il existe deux types répandus : linéaire et radial.
180deg règle l'inclinaison, seulement pour les dégradés linéaires.
255,255,255 est le code de couleur dit RGBA (ici blanc puis noir)
1 correspond à l'opacité de la couleur qui va de 1 (opaque) à 0 (transparent). 50% d'opacité = 0.5
0% est la place que prendra la couleur dans le fond. 0% étant l'extrême côté, 100% l'extrême opposé pour un dégradé tout en douceur.

Vous maîtrisez désormais la magie du dégradé!