Information Graphic - css

I am trying to create a interactive info graphic image like this. However, mapping through the coordination is not a promising solution. The resolution will be losing when scale these images.
So, is there any other tool or css animation could form the infographic, and make the data more visualise.

It will be ease if you use .svg images, they never lose resolution when scaling.

Related

How to create hexogon shaped / neural network of photos

I'm having a tough time properly describing what needs to be done to make the below happen in CSS. Is there an effective way to do this in CSS with images? If so what is the proper way to describe this shape / layout? If no example, how would you implement this? Should it just be a png?
Did you have a look at:
Position icons into circle
http://hugogiraudel.com/2013/04/02/items-on-circle/
http://www.connolly-technologies.com/jquery-arrange-items-in-a-circle/
You also use transform: rotate(xxxdeg) in css to distribute the images evenly around.

Applying greyscale effects to images - Photoshop CC 2017

The image below has a kind of faded grey look with what seems to be some slight blurring and works quite well as a generic banner image.
Usually I am provided with these images or just find stock images but I'd be very interested in learning how to apply these effects with Photoshop or CSS. I have a feeling that Photoshop is a more appropriate tool.
The image I'm experimenting with is this:
It isn't the best image but for my testing purposes at least it's a similar shape and size.
I know I can use things like de-saturation or a coloured layer with a colour blend mode for this sort of thing. However, does the first image look like it has a specific effect or is it just a case of trial and error?
I appreciate this is similar to this question.
open your image in photoshop, add a new layer on top of the image, fill the layer with a color of your choice (in this case grey/black) then reduce the opacity of the layer. You will get something similar to what you want. This is a simple trick. It can be done in other ways too with more modifications.
Maybe you could get the effect by using css blur and overlaying the image with a gray layer with opacity.
You could also just create the effect in photoshop and use that

Can I convert an image to CSS3?

Supposing that I have a polygon image PNG file like this (No border, the shape is filled with one color, no gradient, and background of the image is transparent) http://www.enchantedlearning.com/crafts/books/shapes/gifs/4.GIF
I'm thinking of using that polygon image as a background image and it will be changed (to another image with different color) when the user hovers on it.
But I also want the color of the background image to be customizable. So, I'm thinking if there is any possibility to draw the polygon instead of using image files so that the color will be customizable (I don't think it's a good idea to create one file for one color and so on so forth).
What is the best solution for this case? Using png or drawing it by css?
Is there a tool/website to convert my png to css code?
Make the white areas transparent (colour to alpha in GIMP)
Convert the image to a data URI (it's optional but it will make your site load faster)
Use the url in (2) as the background-image and use any background-color you want.
Use this to convert an image: http://codepen.io/blazeeboy/pen/bCaLE
I think it's much better to use converted images because browsers load them faster.
I think CSS is the wrong thing to use for this. Yes, it is possible to create a lot of shapes using CSS, but there are limitations, and in any case, drawing shapes with CSS is a bit of a hack, even when it's just a simple triangle.
Rather than CSS, I would suggest SVG is the appropriate tools for this job.
SVG is a graphics format for vector graphics that can be embedded in a site, and can be created or altered via Javascript directly within the site. Changing the colour and shape of a simple polygon is about as easy as it gets with SVG.
The other advantage of using SVG is that because it's a vector graphic, it's scalable, so you could display it at any size.
The only down-side of SVG is that it isn't supported by old versions of IE (IE8 and earlier). However, these browsers do support an alternative language called VML, and several good Javascript libraries exist which will work with either, thus allowing you complete cross-browser compatibility. The one I'd recommend is Raphael.js.
So a tiny (and very easy) bit of Javascript code instead of a very messy bit of CSS. Seems like a winner to me.
Maybe u could use this: https://javier.xyz/img2css/, the principle is to use box-shadow,it's fine if the picture is small, so u should consider performance

Drawing graphs with purely HTML5

Can any one point me to any resources for making graphs in HTML5? Most of resources I have seen through Google use animated graphs, I just want a simple static graph in HTML5. One more thing, I am really very weak in graphs, so a simple, easy to understand solution would be very helpful. I will be using this XML file to display data in graphical format.
US Canada Mortality
Thanks in advance :-)
Check out the new canvas tag. It allows you to draw shapes including rectangles and circles using javascript. Canvas Tutorials
If you're looking for just a standard bar chart, though, you can use the div tag with a specified width, height, and background color. This method avoids the use of javascript.

background-position technique for 'single-sprite-background-images'

What is a good 'image spriting' tool to turn single images into one big sprite with different background-position?
I know about http://spriteme.org/ but it doesn't seem to produce a result as nice as:
goDaddy's or Behance's
I've been doing it by hand for small hovers and icons but doing the entire website would take a while to hand-code all the background-position properties.
Thanks
You can try SASS/COMPASS. Even if you are only using the sprite functionality (called sprite mixin) it is worth using it. There are some nice tutorials like this one.

Resources