Section 8 – animation africa – with background color #f39c12.Section 7 – animation south-america – with background color #f1c40f.Section 6 – animation north-america – with background color #2c3e50.Section 5 – animation graph europe – with background color #34495e.Section 4 – animation fish – with background color #16a085.Section 3 – animation earth – with background color #1abc9c.Section 2 – animation sun – with background color #2980b9.Section 1 – title – with background color #3498db.Be sure to give each section a class with the background-color declared in it. Start in the body element by coding all the sections that build the infographic up, in my case, there are 11 sections with each of them having a different background-color, i chose the Flat UI for my palette. Creating the infographic: Step 1: create all sections To get you up and running with this document, i recommend reading this excellent blogpost: An Introduction to HTML5 Boilerplate.
INFOGRAPHIC CREATOR L CODE
This document contains every bit of code to have your project smoothly run in all major, modern browsers. Preparing the documentįor the purpose of this tutorial, i recommend downloading the HTML Boilerplate. Beside reading that book, i can recommend the presentation by Sara Soueidan on animating SVG with CSS. In this pocket book, CSS animations are explained in a super comprehensive way with all the examples available as codepens. I want to keep the animations simple and tried to code as much as possible with CSS. Once you decided on which technique you’ll use to accomplish your task, i recommend reading and finding online sources about it, for this specific tutorial, i started with a pocket guide and e-book written by Val Head and published by Five Simple Steps: CSS animations. Reading about the chosen technique SVG in combination with CSS for animation SVG is an open W3C standard and SVG allows for three types of graphic objects: vector graphic shapes, images and text. Because SVG is recently being supported by all major and modern browsers, people will explore the world of SVG and will start to use it for more and more artwork. SVG is a resolution independent graphical format which means that you don’t have to serve up multiple versions of a given graphic to all of the different screens.
Why do i choose SVG as the graphic format? Scalable and independent Sketch your initial idea for later usage and reference. I collected my data from Wikipedia and shared the link at the bottom of my infographic. For the purpose of this SVG infographic, i choose the subject “Population growth on this planet”. An important step is to label time-sensitive data to keep the data credible and last thing is to optimize the infographic to make it shareable.
Try to simplify as much as possible, limit the focus to just one area. Infographic research: be sure to present complex information quickly & clearly, structure the infographic and start with a title, visualize data that is relevant to the story, optimize illustrations for the targeted screens. With Postcards you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before.
0 kommentar(er)
