Une semaine au poil - #1

Je vous ai concocté une petite sélection de mes trouvailles pour cette première semaine. Vous y trouverez un beau site, un calendrier en CSS, un burger animé en SVG, la nouvelle tendance des diffuse shadows et des cinemagraphs de la série Versailles.

Milka veut vous aider à envoyer une lettre de Noël

Commençons tout de suite par ce site qui allie le magnifique au magique ! Milka, avec l’aide de l’agence Merci-Michel nous a sorti un des plus beaux sites que nous pouvons trouver en cette fin d’année.
Le principe est super simple, vous écrivez un email de Noël personnalisé à votre ami, et cet ami la recevra lorsque le petit bonhomme en vélo aura fini sa tournée.
Mis à part le principe, qui finalement n’a rien de nouveau, c’est surtout au niveau de l’animation et de son design que se trouve le véritable plus. Le design féerique est parfaitement réalisé, tout se tient, et l’animation 3d est gérée à merveille.
Enfin bref, allez le voir ça ici : https://www.christmas.express/

Concept d’un calendrier uniquement réalisé en CSS

See the Pen CSS-only Colorful Calendar Concept by David Khourshid (@davidkpiano) on CodePen.

Je suis tombé par hasard sur ce codepen et j’avoue avoir été impressionné par le travail réalisé. Surtout que ce calendrier a uniquement été réalisé en HTML et en CSS.
Retrouvez-le ici sur codepen.

Tutoriel pour réaliser un menu sous forme de burger animé en SVG

Le SVG est un format qui repose sur une syntaxe en XML. Non seulement le SVG a l’avantage d’être vectoriel et donc particulièrement pratique pour les sites responsives mais il permet également d’être animé. Il est tout de même nécessaire d’avoir quelques connaissances en CSS et dans ce cas précis en JavaScript car il utilise une bibliothèque du nom de Segment.
Si vous souhaitez réaliser un menu burger comme sur l’image ci-dessus je vous conseille le tutoriel suivant : Animating an SVG Menu Icon with Segment, en anglais par contre.

Le long shadow n’est plus !

Vous vous souvenez du long shadow ? cette tendance qui date d’il y a quelques temps et qui est (était ?) sur de nombreux sites. Non ? voici quelques exemples pour vous rafraîchir la mémoire :
Il semblerait qu’on ait trouvé son remplaçant si l’on croit cet article Long Shadow is Dead. Welcome diffuse shadows. Vous savez maintenant ce qu’il vous reste à faire si vous voulez rester dans la tendance.

Cinemagraph de la série Versailles

Vous avez sans doute entendu parler de la série Versailles diffusée en ce moment sur Canal+. J’avais envie de partager ces superbes cinemagraphs réalisés par l’artiste Julien Douvier. Si vous ne le connaissez pas je vous invite à aller voir ses réalisations sur son site : juliendouvier.com.