Mdcss est un simple outils permettant de générer facilement un guide des styles css.
Nous allons voir comment l'utiliser sur un cas simple.
Dans cet exemple, j'utiliserai un fichier gulpfile.
Pour commencer, il faut l'installer via npm ou yarn.
Les archives de l'auteur : Cedric DELANNOY
Sticky sidebar
Nous allons voir comment créer un menu latéral qui nous suit au scroll sur le coté.
Le scroll ne prendra effet qu'une fois le header passé et prendra fin une fois arrivé au footer.
Dans un premier temps créons le gabarit général.
Les flex-items
Flexbox est une valeur de la propriété css display. J'ai pu en faire usage sur des projets requérant une compatibilité ie 11 minimum pour profiter des avantages qu'elle procure par rapport aux display: table, display: inline-block ou float: left lorsqu'il s'agit de mettre deux blocs côte à côte (pas de perte de flux, pas d'espace entre les deux blocs).
Avant de parler en détail des flex-items, je vais m'interesser rapidement au flex-container à qui on affecte le display flex. En effet, on donne à un container la valeur flex sur son display, puis une série de propriétés que je vais rapidement énumerer et qui agissent n'ont pas sur lui même, mais sur ses enfants directs (appellé flex-items).
Initiation au canvas
Nous allons voir dans cet article un exemple d'utilisation de la balise canvas dans le cadre d'une animation sur un visuel.
L'animation consistera à faire disparaître au survol l'image bloc par bloc avec une animation d'opacité et de translation vers le haut.