Animate png sprites with css3 animations

Here’s a demo I made on Codepen that let’s you play with Ken (from Street Fighter II). There are several moves, like jumping, walking, etc and of course there’s the famous Hadoken! 🙂 It’s made with only CSS transitions and a minimum of javascript that let’s you control Ken.

See the Pen Ken’s Street Fighter II with animated sprites by Julien Knebel (@jkneb) on CodePen.

UPDATE
And here’s the post I wrote for the David Walsh Blog → where I explain how it works in details.

Continue reading →

CSS transition from a fixed px width to an auto width

I was struggling trying to animate the width of a <div> from a fixed px width to a 100% (or auto) width. The idea was to have a completely fluid 2 columns layout. A main col taking all the space and a right col with a fixed width. Then, on a particular user action, the right col animates until taking all the remaining space (overlapping the main col). I needed to achieve the effect only with css transitions.

Here’s how I did it…

Continue reading “CSS transition from a fixed px width to an auto width” →

Pure CSS 3 fancy separator

I recently had to reproduce a fancy “kinda separator” and I gave it a try in pure css. The result is quite cool. It works like a charm in ie9, Chrome, Safari, Opera and Firefox.

If you’re using Firefox you’ll notice (or not) that the dashed rounded border is “solid” rather than being “dashed” (inside the white circle)… Well there’s a bug about it in Firefox opened since 2007… dashed border simply doesn’t work when a border-radius is applied to it. Too bad… Well the guys at Webkit’s have the solution, wonder why Firefox didn’t implemented it jet.

Anyway the :after shadow border works great every where I tested it so it’s a quite robust ie9+ technique. I need to apply a degraded version for ie8, maybe just a simple grey border.

Here’s the Codepen version. You can play with the tabs to see how it works underhood.

See the Pen Shadow separator by Julien Knebel (@jkneb) on CodePen.

Un preloader sympa en full CSS3 avec LESS

Aujourd’hui la triste réalité des preloaders sur le web fait qu’en fait ils ne servent à rien. À part à égailler l’expérience utilisateur de l’internaute. Ils ne servent à rien parce qu’il est techniquement impossible “d’écouter” la progression du chargement de quelque chose dans une page web (hormis les sites en flash qui eux sont capables d’afficher des loader qui fonctionnent vraiment). Bon donc concrètement on voit plein de petits loader sympas qui fleurissent sur la toile mais en fait ce sont tous des gif animés… Pourquoi donc des gif animés ? Parce qu’ils sont faciles à trouver (ajaxload.info), faciles à implémenter (en général le gif est positionné en background-image avec un positionnement center center), et en plus ils sont légers.

Bon, je me suis amusé à m’en faire un en full css3 + css transitions 2D donc pas d’image, que des propriétés css. La compatibilité navigateurs est pas top mais pas non plus dégueu et puis c’était sympa à faire 😛

La démo

Le code HTML

Le code CSS

Le css qui en découle est complexe et peu facilement administrable il est donc plus intelligent de le faire en LESS ou en SASS pour profiter des variables au sein du fichier css.

@loaderSize       : 55px;
@radThickness     : @loaderSize/10;
@spinSpeed        : 750ms;
@backgroundColor  : #eee;
@forgroundColor   : #ccc;
@masksColor       : #fff;
@middleCircleSize : 68%;

Dans mon présent exemple j’ai donc choisi d’utiliser LESS et j’ai fais en sorte de rassembler les variables en haut du fichier. De là on peut gérer tous les paramètres importants du spinner, sa taille, ses couleurs, sa vitesse de rotation, etc. Exemple : modifiez @loaderSize pour redimensionner la totalité du loader et des éléments qui le composent (tout en conservant leurs proportions). Ensuite il ne reste plus qu’à compiler vers du CSS et le tour est joué.

Avantages

• Fonctionne sur tous les navigateurs modernes et sur les appareils mobiles.
• Pas de requête HTTP pour charger une image dans la page.
• L’animation est en css3 donc elle est légère et fluide car non-basée sur JavaScript.
• Si on zoom sur le loader (essentiellement dans le cas où l’on surf depuis une tablette) le loader reste parfait, contrairement à une image qui paraîtra toute moche et étirée.
• Taille personnalisable si utilisé avec LESS.
• Permet de frimer en soirée geek 🙂

Inconvénients

• Plus compliqué à administrer et à mettre en place qu’une simple image en background.
• Pas de compatibilité sur IE9 et en dessous (à l’heure où j’écris cet article il y a de bonnes chances que ça marche sur ie10).
• Rajoute du markup HTML dans la page.