How to convert CSS3 animation in *.gif

Reading Time: 3 minutes

In last few years, it is trendy to provide better user experience by adding small changes in the interface using css3 animation. Currently, experiments with this feature take us far away from simple effects. If you have a good imagination and tech skills, you can even create the solar system in the pure CSS.

See the Pen Solar System animation – Pure CSS by Malik Dellidj (@kowlor) on CodePen.

However, in production, we still use css3 animation for more pragmatic tasks, for example for creating pure CSS spinners. There are a lot of solution for beautiful spinners in open-source.

See the Pen Sit ‘n Spin by esjay (@esjay) on CodePen.

They are compatible with most modern browsers, but sometimes for some reasons, the need to have the same spinner in gif format can arise. For example, if the same spinner must be used in the third-party services, that are included in your solution in the iframe. Or if you need compatibility with very old browsers. The first idea that comes to mind is to search some solution, where you can load your page with the spinner and obtain gif at the end. Here I need to disappoint you. There are no such services. The reason for it is the fact that CSS3 animation and GIF are very different technologies.Continue reading →

How to make background image visible in the emails in the Outlook

Reading Time: 2 minutes

Even if you think about yourself as front-end developer from time to time you would be doing some a little bit strange tasks. For me last week this task is creation markups for emails. One of the hardest in this task is to primary test emails markups, that were developed. If you haven’t account at Litmus or at any other systems that emulate mail client you would need just send test emails. If you ever work on the creation markups for the email you know that most of the problems and bugs will come from the testing markup view in the Outlook.Continue reading →